JavaScript event learning summary (II) js event handler

Related readings:

JavaScript Event Learning Summary (V) Mouse Event Type in JS

//www.VeVB.COM/article/86259.htm

JavaScript Event Learning Summary (I) Event Flow

//www.VeVB.COM/article/86261.htm

JavaScript event learning summary (IV) Public members of event (properties and methods)

//www.VeVB.COM/article/86262.htm

JavaScript event learning summary (II) js event handler

//www.VeVB.COM/article/86264.htm

JavaScript event learning summary (III) js event object

1. Event handler

As mentioned earlier, events are some actions performed by the user or browser themselves, such as click, load and mouseover are all the names of events. The function that responds to a certain event is called an event handler (also called an event handler, event handler). The name of the event handler starts with "on", so the event handler of the click event is onclick, and the event handler of the load event is onload.

There are three main ways to specify event handlers for events.

1. HTML event handler

First of all, this approach is outdated. Because the actions (javascript code) and the content (html code) are tightly coupled. But it can still be used when writing a small demo.

There are two ways to do this, both of which are very simple:

The first type: directly define the event handler and the included actions in the html.

The code copy is as follows:<input type="button" value="click me!"/>

The second type: defines the event handler in html, and the executed actions call the script defined elsewhere.

The code copy is as follows: <input type="button" value="click me!"/><script>function showMessage(){ alert("clicked!");}</script>

note:

1) Through the event variable, you can directly access the event itself. For example, onclick="alert(event.type)" will pop up the click event.

2) This value is equal to the target element of the event, where the target element is input. For example, onclick="alert(this.value)" can get the value value of the input element.

2. DOM0 level event handler

This method is simple and cross-browser, but can only add an event handler to one element.

Because this method adds multiple event handlers to elements, the following will override the previous one.

Add event handler:

 <input type="button" value="click me!" onclick="showMessage()"/><script>function showMessage(){ alert("clicked!");}</script>

Delete event handler:

The code copy is as follows: myBtn.onclick=null;

3. DOM2 level event handler

DOM2-level event handlers can add multiple event handlers to one element. It defines two methods for adding and removing event handlers: addEventListener() and removeEventListener().

Both methods require 3 parameters: event name, event handler function, and boolean value.

This boolean value is true, and the event is processed in the capture stage, false, and the event is processed in the bubble stage, which defaults to false.

Add event handler: Now add two event handlers for the button, one pops up "hello" and the other pops up "world".

 <input id="myBtn" type="button" value="click me!"/><script> var myBtn=document.getElementById("myBtn"); myBtn.addEventListener("click",function(){ alert("hello"); },false); myBtn.addEventListener("click",function(){ alert("world"); },false);</script>

Delete event handler: The event handler added through addEventListener must be deleted through removeEventListener, and the parameters are consistent.

note: The anonymous function added through addEventListener will not be deleted. The following code will not work!

The code copy is as follows: myBtn.removeEventListener("click",function(){ alert("world"); },false);

It seems that the removeEventListener is consistent with the addEventListener parameter above, but in fact, the anonymous function in the second parameter is completely different.

So in order to delete the event handler, the code can be written like this:

 <input id="myBtn" type="button" value="click me!"/><script> var myBtn=document.getElementById("myBtn"); var handler=function(){ alert("hello"); } myBtn.addEventListener("click",handler,false); myBtn.removeEventListener("click",handler,false);</script>

2. IE event handler

1. Practical application scenarios

IE8 and below browsers do not support addEventListener. If you want to be compatible with IE8 and below browsers in actual development. If you use native binding events and need to be processed compatible, you can use jquery bind instead.

2. IE8 event binding

IE8 and the following browsers implement two similar methods as in DOM: attachEvent() and detachEvent().

Both methods require two parameters: the event handler name and the event handler function.

note:

IE11 only supports addEventListener!

IE9 and IE10 support attachEvent and addEventListener!

TE8 and below only support attachEvent!

You can use the following code to test it in various IE version browsers.

 <input id="myBtn" type="button" value="click me!"/><script> var myBtn=document.getElementById("myBtn"); var handlerIE=function(){ alert("helloIE"); } var handlerDOM= function () { alert("helloDOM"); } myBtn.addEventListener("click",handlerDOM,false); myBtn.attachEvent("onclick",handlerIE);</script>

Add event handler: Now add two event handlers for the button, one pops up "hello" and the other pops up "world"

 <script> var myBtn=document.getElementById("myBtn"); myBtn.attachEvent("onclick",function(){ alert("hello"); }); myBtn.attachEvent("onclick",function(){ alert("world"); });</script>

note: The operation effect here is worth noting:

"world" pops up first in browsers below IE8, and then "hello". The order of event triggering in DOM is opposite.

IE9 and above browsers first pop up "hello" and then pop up "world". The same order as the event triggering in DOM.

It can be seen that IE browser is gradually getting on the right track. . .

Delete event handler: The event handler added through attachEvent must be deleted through the detachEvent method, and the parameters are consistent.

Like the DOM event, the added anonymous functions will not be deleted.

So in order to delete the event handler, the code can be written like this:

 <input id="myBtn" type="button" value="click me!"/><script> var myBtn=document.getElementById("myBtn"); var handler= function () { alert("hello"); } myBtn.attachEvent("onclick",handler); myBtn.detachEvent("onclick",handler);</script>

note : There is another place to pay attention to in the IE event handler: scope.

Using the attachEvent() method, the event handler runs in the global scope, so this is equal to window.

The scope of the method at the dom2 or dom0 level is inside the element, and this value is the target element.

The following example will pop up true.

 <input id="myBtn" type="button" value="click me!"/><script> var myBtn=document.getElementById("myBtn"); myBtn.attachEvent("onclick",function(){ alert(this===window); });</script>

This is something to keep in mind when writing cross-browser code.

IE7/8 detection:

 //Judge IE7/8 compatibility detection var isIE=!!window.ActiveXObject; var isIE6=isIE&&!window.XMLHttpRequest; var isIE8=isIE&&!!document.documentMode; var isIE7=isIE&&!isIE6&&!isIE8; if(isIE8 || isIE7){ li.attachEvent("onclick",function(){ _marker.openInfoWindow(_iw); }) }else{ li.addEventListener("click",function(){ _marker.openInfoWindow(_iw); }) }

The above is the relevant knowledge of the JavaScript event learning summary (II) of the js event handler that the editor introduced to you. I hope it will be helpful to everyone!