Talking about JavaScript events (event handlers)

An event is an action that is performed by the user or by the browser itself. such as click, Load, and mouseover are the names of the events. The function that responds to an event is called an event handler. The name of the event handler begins with "On", such as the event handler for the Click event is the onclick. There are several ways to specify an event handler for an event.

• HTML Event handlers

　　Element can be specified using an HTML attribute with the same name as the corresponding event handler. The value of this attribute can support certain JavaScript code. For example, some JavaScript code is executed when the button is clicked. <div id= "AA" onclick= "Console.log (' div ')" style= "width:100px;" >2222</div> , when this div is clicked, the div is output in the browser's console. This feature is implemented through JavaScript and cannot be used without escaping HTML syntax characters, such as the number (&), double quotation mark (""), single quotation mark ("), less than (<), or greater than (>).

Event handlers defined in HTML can contain specific actions to be performed, or scripts that are defined on other pages can be called.

1  function Divclick (e) {2              var target=E.target; 3              Console.log ("div"); 4              // stopbubble (e); 5          }

<div id= "AA" onclick= "Divclick (event);" Style= "width:100px;" >2222</div>

In the above code, the Divclick function is called after the div is clicked. This function is in a script that is defined separately, and of course it can be defined in an external file. The code in the event handler can access the global method. The event parameter and the This parameter can also be passed in the code above. The event parameter is able to get the type parameters of events, etc., through this to get the Click Object itself.

1  function Divclick (e) {2              // var target=e.target; 3              Console.log ($ (E). text ()); // 222 4              // stopbubble (e); 5          }

<div id= "AA" onclick= "Divclick (this);" style= "width:100px;" >2222</div>

There are some drawbacks to specifying an event handler in HTML: there is a certain time difference, the user may trigger the corresponding event on the page, but the event handler does not yet have the condition to execute. In the above example, if the Divclick function is defined below the div, we click on the div before the function has been parsed, which results in an error.

Another disadvantage is that the scope chain of such event handlers can cause different results in different browsers. Different JavaScript engines follow a slightly different identifier resolution rule, and it is likely that an error occurred while accessing the unqualified object.

The last drawback to specifying an event handler through HTML is the tight coupling between HTML and JavaScript code. If you are replacing an event handler, you need to change two places: JavaScript and HTML.

• Dom-level event handlers

The traditional way to specify an event handler through JavaScript is to assign a function to the event handler property. There are two advantages to specifying an event handler through JavaScript: simple and browser compatibility. To specify an event handler using JavaScript, you must first obtain an object reference for an element. Each element has its own event handler, which is usually all lowercase, such as onclick.

　　

1<div id= "AA" style= "width:100px;" >2222</div>2<script>3             varA=document.getelementbyid ("AA");4a.onclick=function(e) {5                 vartarget=E.target;6                 vartext=target.innerhtml;7Console.log (text);//2228             }9</script>

The above code obtains a reference to the object through the Document object, and then assigns it an OnClick event handler. E is the parameter of the Click event, which enables you to get the object of the Click event, which is target. You can further get the properties of an object by using an object.

　　

1 <div id= "AA"  style= "width:100px;" >2222</div>2         <script>3             $ ("#aa"). Click (function(e) { 4                 var target=E.target; 5                 var text=target.innerhtml; 6                 Console.log (text); // 222 7             }); 8         </script>

This code has the same effect as the above example, but this is done with jquery.

The

DOM2-level event handler defines two methods for handling the actions of the specified and deleted event handlers: AddEventListener and RemoveEventListener. All DOM nodes contain both methods, and they receive 3 parameters: the name of the event to be processed, the function that is the event handler, and a Boolean value. If true, the Boolean value indicates that the event handler is executed during the capture phase and, if False, the event handler is called during the bubbling phase.

1 <div id= "AA"  style= "width:100px;" >2222</div>2         <script>3             var a=document.getelementbyid ("AA"  ); 4             A.addeventlistener ("click",function(e) {5                 console.log ( this . ID); 6             },false); 7         </script>

The above example adds a click event to the element AA via AddEventListener. The element is accessible through an event handler, and the This and element are in the same scope chain.

Through the DOM2 level you can add multiple event handlers. The event handlers are triggered sequentially in the order in which they were added.

1 varA=document.getelementbyid ("AA");2A.addeventlistener ("click",function(e) {3Console.log ( This. ID);4},false);5A.addeventlistener ("click",function(e) {6Console.log ( This. InnerHTML);7},false);

Event handlers can be removed through RemoveEventListener by AddEventListener the event handlers that are added. However, sometimes we will go into a misunderstanding.

1 varA=document.getelementbyid ("AA");2A.addeventlistener ("click",function(e) {3Console.log ( This. ID);4},false);5A.removeeventlistener ("click",function(e) {6Console.log ( This. ID);7},false);

The above code we use the RemoveEventListener method to remove the event handler, but it does not work. When using AddEventListener and RemoveEventListener, the second event handler function must be the same function to be useful, and we'll make a change to the above code.

1 var a=document.getelementbyid ("AA"); 2             var callback=function(e) {3                 console.log (this. id); 4             }5             a.addeventlistener ("Click", Callback,false); 6             A.removeeventlistener ("Click", Callback,false);

In the above code, we call the same method in AddEventListener and RemoveEventListener, so the element AA has no click event.

For IE8 and IE8 the following browsers, they do not have the two methods described above, but they provide attachevent and detachevent two methods. These two only need to pass two parameters: the first parameter event program name, and the second event handler function.

 1  var  A=document.getelementbyid ("AA " 2  var  callback=function   (e) { 3   Console.log (e.target.innerhtml);  4  }  5 // a.addeventlistener ("click", Callback,fals e);  6  // a.rem Oveeventlistener ("click", Callback,false);  7  a.attachevent ("onclick", callback); 

The above code adds an event handler through Attachevent, but attachevent is not the same as AddEventListener. In the event handler function of Attachevent, this is pointing to the window, and we cannot get the element object.

　　

1 varA=document.getelementbyid ("AA");2             varcallback=function(e) {3Console.log ( This. ID);4             }5             //A.addeventlistener ("click", Callback,false);6             //A.removeeventlistener ("click", Callback,false);7A.attachevent ("onclick",function(e) {8 Callback.call (a,e);9});

The above code, we have changed the point of this through call, but this will bring another problem, how detachevent?

• Cross-browser event handlers　

In order to cross-browser event handlers, developers can encapsulate their own JS library.

1 varEventutil={2Addevent:function(ELEMENT,TYPE,FN) {3                     if(element.addeventlistener) {4Element.addeventlistener (TYPE,FN,false);5                     }6                     Else if(element.attachevent) {7Element.attachevent ("on" +TYPE,FN);8                     }9                     Else{Tenelement["on" +type]=fn; One                     } A                 }, -Removeevent:function(ELEMENT,TYPE,FN) { -                     if(element.removeeventlistener) { theElement.removeeventlistener (TYPE,FN,false); -                     } -                     Else if(element.detachevent) { -Element.detachevent ("on" +TYPE,FN); +                     } -                     Else{ +element["on" +type]=NULL; A                     } at                 } -             }; -             varAa=document.getelementbyid ("AA"); -             varFunc=function(e) { - Console.log (e.type); -Eventutil.removeevent (AA, "click", func); in             } -Eventutil.addevent (AA, "click", Func);

The above Eventutil encapsulates a cross-browser object that contains two methods addevent and removeevent. In line 25th, get the Element object reference, 26 rows define the FN function, and 30 lines call Addevent to add an event handler. This event handler can only be executed once, because we have called the Removeevent function in the Func function.

Talking about JavaScript events (event handlers)