On the common methods of JavaScript event binding and its advantages and disadvantages _javascript Skills

Traditional way

  Element.onclick = function (e) {

     //...

   };

1. Advantages of traditional binding

Very simple and stable to make sure it works in the same browser you use

When handling an event, this keyword refers to the current element, which is a helpful group

2. Disadvantages of traditional bindings

Traditional methods only run in event bubbling, not capture and bubbling

An element can only bind one event handler at a time. The new bound event handler overwrites the old event handler function

Event object parameter (e) is not available only for IE browsers

The way of the consortium

 Element.addeventlistener (' click ', Function (e) {

    //...

  }, False);

1. The advantages of the binding of the Consortium

This method supports both the capture and bubbling phases of event handling. The event phase depends on the last parameter setting of AddEventListener: false (bubbling) or true (capture).

Inside the event handler function, the This keyword refers to the current element.

An event object can always be caught by handling the first argument (e) of a function.

You can bind the multiple events you wish for the same element without overwriting the event that was previously bound

2. The disadvantages of the consortium's binding

IE is not supported, you must use IE's attachevent function instead.

IE mode

Element.attachevent (' onclick ', function () {

    //...

  });

1. The advantages of IE method

You can bind the multiple events you wish for the same element without overwriting the previously bound event.

2. The disadvantage of IE method

IE only supports the bubbling phase of event capture

The This keyword within the event listener points to the Window object, not the current element (a huge disadvantage of IE)

Event objects exist only in the window.event parameter

Events must be named in the form of ontype, such as onclick rather than click

Only IE is available. You must use the AddEventListener in non-IE browsers

Dean Edwards's Program (Addevent/removeevent Library)

1. Advantages of Addevent

Can work in all browsers, even older browsers without any support

The This keyword can be used in all binding functions, pointing to the current element

All kinds of browser-specific functions that prevent browser default behavior and prevent event bubbling

Event objects are always passed in as the first object, regardless of the browser type

2. Disadvantages of Addevent

Work only in the bubbling phase (because it is in the traditional way of using event bindings)

The above is a small series for everyone to talk about the common methods of JavaScript event binding and its advantages and disadvantages analysis of all the content, I hope that we support the cloud-Habitat Community ~