Examples of JavaScript registration event handling functions _javascript skills

Events are at the core of JavaScript, and the importance of it is not much described here. After triggering an event, you need to have an event handler function to handle it, for example, we can define the background of a div to be green after clicking a button, and then take a look at how to implement this effect, the code example is as follows:

In the above code, clicking the button will set the div's background color to green, because the code registers the event handler function for the button's onclick event, which sets the div's background color to green. Here's a quick example of how to register event handlers for an object's events:
Mode one:
Register the event handler directly in the HTML code, which means that the event handler function is set directly through the HTML attribute, and the code that the event handler executes is the HTML attribute value, which is used at the beginning of the article. Advantages and disadvantages are as follows:

• 1. Easy to understand and easy to use.
  
• 2. This approach is supported by mainstream browsers.
  
• 3. Mixed with the HTML code, so that the page is very complex, inconsistent with the performance and content separation principle.
  
• 4. Can only register an event handler of the same type on the same object.

Mode two:
Event handle method, the so-called event handle is the event handler function, specifies the object's specified event corresponding to an event handle. To register an event handler using this method, you first obtain a reference to the object, and then assign the event handle to the corresponding event-handling function property of the object. In fact, the way one is also an event handle way.
The code example is as follows:

In the above code, first use document.getElementById ("BT") to obtain a reference to the button object, and then assign the event handle (event handler) to the button object's OnClick event property, which triggers the OnClick event when the button is clicked. The code in the event handle is then executed. Advantages and disadvantages are as follows:

• 1. Simple and easy to understand.
• 2. Browsers are supported.
• 3. Can only register an event handler of the same type on the same object.

mode three:
is a more advanced event registration method, which is the event listener, which solves the problem of handling functions where the specified object can register only one specified type of event. However, there are some compatibility issues, as described below:
1). IE browser:
You can use the attachevent () and DetachEvent () methods to register event handlers for specified objects and to delete registered event handlers in IE Explorer. The
syntax format is as follows:
Element.attachevent ("OnEvent", EventListener)
This function has two parameters, the first is the name of the event type, and the second is the event-handler function to register.
The code instance is as follows:

The above code uses the Attachevent () function to register the onclick event handler for a button, but it can only be valid in IE browser. You can use the DetachEvent () function to remove the previously registered event handler function, which has the following syntax format:
element.detachevent ("OnEvent", EventListener) The
format is the same as the attachevent () function.
Special Note: The first parameter must have on, for example, the Click event is written "onclick."
2). Standard Browser:
Use the AddEventListener () and RemoveEventListener () functions to register and remove registration handlers in standard browsers, including IE9 and IE9 browsers. The
syntax format is as follows:
Element.addeventlistener (' event ', EventListener, usecapture);
This function has three parameters, the first parameter is the event type name, The second parameter is the event handler to register, and the third function is to specify whether this handler is called during the capture phase of the event-passing process, or whether the bubbling phase is invoked, and, by default, the event-handler function is invoked in the bubbling phase.
Special Note: The first parameter cannot be put on, for example, a click event cannot be written as "onclick", but written as "click".
The code instance is as follows:

Above code in IE9 and IE9 or other standard browsers, click the button to set the div's background color to green. You can use the RemoveEventListener () function to remove the previously registered event handler function, which has the following syntax format:
Element.removeeventlistener (' event ', EventListener, usecapture);
The format is the same as the AddEventListener () function.
To register event handler functions across browsers:
As long as you add a judgment statement, the code is as follows:

var eventutil={
  //Registration
  addhandler:function (element, type, handler) {
   if (element.addeventlistener) {
    Element.addeventlistener (type, handler, false);
   else if (element.attachevent) {
    element.attachevent ("on" + type, handler);
   } else {
    element[' on ' + type] = Han Dler
   }
  },
  //Remove Registration
  removehandler:function (element, type, handler) {
   if ( Element.removeeventlistener) {
    Element.removeeventlistener (type, handler, false);
   } else if ( element.detachevent) {
    element.detachevent ("on" + type, handler);
   } else {
    element[' on ' + type] = null;< c19/>}
  }       
 ;

The above is the detailed content of this article, I hope to help you learn.