dom0 Level event

 <a href="#" id="hash" onclick="fn();fn1();">
<button type="button"> Go back to the top to open </button>
</a>
 var btn=$('#hash').get(0);
btn.onclick=function(){
alert('111');
};
btn.onclick=function(){
alert('222');
};

Like the upper handle onclick It's in the label , All are dom0 Level event ,fn and fn1 Execute sequentially ;   The second way to get elements , binding onclick Events are also dom0 level , The second one will cover the first one onclick, It will also cover the in line onclick, It just pops up 222.

dom2 Level event

 $('#hash').click(function(){
alert('jq Of dom2 The first time you click ')
});
$('#hash').click(function(){
alert('jq Of dom2 Level 2 Click the second time ')
}); btn.addEventListener('click',function(){
alert(' Native dom2 For the first time click')
},false);
btn.addEventListener('click',function(){
alert(' Native dom2 The second time click')
},false)

All of the above bindings belong to dom2 Level event binding , The first two are jq How to bind , The back is all original js How to bind , Will not cover , Will execute in turn jq And native binding methods , This is Yu dom0 Go somewhere else ;

dom0 and dom2 coexistence

<a href="#" id="hash" onclick="fn();fn1();">
<button type="button"> Go back to the top to open </button>
</a>
<script type="text/javascript">
function fn(){
alert('ade');
}
function fn1(){
alert('ade111');
}
var btn=$('#hash').get(0);
btn.onclick=function(){
alert('111');
};
$('#hash').click(function(){
alert('jq Of dom2 The first time you click ')
});
btn.addEventListener('click',function(){
alert(' Native dom2 For the first time click')
},false); </script>

The above example has one or two dom0 And two dom3 Level binding events ,js Written inside dom0 Level will override... Within the line fn and fn1 Method , however js Inside dom0 You can drink dom2 coexistence , The result is a pop-up 111   jq Of dom2 The first time you click   Native dom2 For the first time click;

dom0 Level events and dom2 More related articles on level 1 events

  1. test DOM0 Level events and DOM2 Stacking of level 1 events

    1. problem If you've seen Northwind CJ The lecturer's Javascript Video tutorial , You can see that it encapsulates a strong function to add and delete events , As shown below function addEvent(obj, evtype, fn) { ...

  2. DOM1 Problems and Countermeasures at the national level DOM2 Level event

    A few days ago, a little friend asked me a question , Why DOM 0 Level events and DOM2 Level event , But it didn't DOM1 What about the second level event ? Let's talk about it today DOM The level of the problem .  At the same time, recommend partners to see the shangxuetang JavaScript BO ...

  3. 【20190226】JavaScript- Knowledge points record :dom0 Level event ,dom2 Level event

    DOM0 Level event handler : By adding the element's event handler properties ( Such as onclick) The method of setting the value of to a function to specify the event handler is called DOM0 Level method , It's known as the method of elements , The event handler runs in the scope of the element ...

  4. About DOM Flow of events 、DOM0 Level events and DOM2 Level event

    One .DOM Event model DOM The event model includes capture and bubbling , Capture is from the top down to the target element , Bubbling is from the current element , That is, the target element goes up to window Two . flow The concept of flow , In today's JavaScript You can see it everywhere . Than ...

  5. js DOM0 Level events and DOM2 Level event

    There are two ways to register Events , Namely DOM0 Level and DOM2 level DOM0 Level is in the form of event binding dom The element can only have ( binding ) An event handler , His characteristic is that the same element is bound to the same event , The latter function will override the former one binding : dom.o ...

  6. DOM0 Level event handling 、DOM2 Level event handling

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. About DOM2 Event capture and event bubbling for level events

    DOM2 In an event addEventListener Implementation mechanism of , Multiple addEventListener At the same time, the execution sequence of adding : W3C Of DOM Event triggering is divided into three stages :①. Event capture phase , That is, from the top element ( It's usually ...

  8. JavaScript The default behavior of DOM2 level , Event delegation mechanism

    1. Event default behavior and blocking method    1.1 Browser default behavior       JavaScript The properties of the event itself , for example a The jump of the tag ,Submit Button submit , Right-click menu , Text box input, etc .    1.2 ...

  9. javaScript——DOM1 level ,DOM2 level ,DOM3 level

    DOM0,DOM2,DOM3 There are differences in the way events are handled :http://www.qdfuns.com/notes/11861/e21736a0b15bceca0dc7f76d77c2fb5a.html JS in do ...

Random recommendation

  1. c# Unable to load DLL xxxxxxxx The specified module was not found . ( Exception from HRESULT:0x8007007E). A solution to this problem

    I'm working on a program recently , I want to use some functions C++ It's written in DLL for C# call . But it can't be called any way , Tips " Unable to load DLL xxxxxxxx The specified module was not found . ( Exception from HRESULT:0x8007007E ...

  2. matlab in fopen and fprintf Function summary

    matlab in fopen Function in the specified file to open the following example : *1)"fopen" Open file , Give the document a code number . grammar 1:FID= FOPEN(filename,permission) Specify with ...

  3. ZOJ 1642

    The question : There are two strings , Each string consists of n Characters make up , Each character has a value ,Roy Each time you specify a string 2 A character in , The added value of his score is the value of this character , Then put the part in front of this character in the two strings ( Include this character ) Delete , Repeat this exercise ...

  4. Portfolio model (Composite)

    Portfolio model (Composite) The combination pattern is sometimes called part - The whole pattern is more convenient in dealing with problems like tree structure , Look at the diagram : Look directly at the code : [java] view plaincopypublic class Tr ...

  5. from .Net To Java Study the second part ——IDEA and start spring boot

    from .Net To Java Learn the first —— The opening The so-called work wants to do well , You must sharpen your tools first , do java The same goes for development , In the comparison of the most popular java IDE(eclipse,myeclipse.IDEA) after , I made a decision to IDE ...

  6. loadrunner Use in web_custom_request Function call webservice Interface

    1. The interface address used : http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?op=getWeatherbyCityName With SOAP ...

  7. lvalue &amp; rvalue

    https://www.youtube.com/watch?v=UTUdhjzws5g author : Know the user link :https://www.zhihu.com/question/50652989/answer ...

  8. STM32 Each document introduces 、uCOSII The file is introduced

    (1)core_cm3.c , core_cm.h: Get settings CM3 kernel , Configure some kernel registers , be used CM3 All nuclear needs : (2)stm32f10x.h  and system_stm32f10x.c , syst ...

  9. codeforces 549F Yura and Developers( Divide and conquer 、 Heuristic merging )

    codeforces 549F Yura and Developers The question Given an array , How many intervals satisfy : After removing the maximum value , And is k Multiple . Answer key Divide and conquer , For an interval , After finding the maximum , Divide into two sections . ...

  10. MongoDB Modify the database name ,collection name

    utilize dropDatabase,copyDatabase modify Database name db.copyDatabase('old_name', 'new_name'); use old_name db.dro ...