• addEventListener has 3 parameters, as shown below:
element.addEventListener(type, listener, useCapture);
| parameter | Parameter description |
|---|---|
| element | The object to bind the event and the HTML node. |
| type | For event name, please remove the "on" before the event. For example, "onclick" should be written as "click", and "onmouseover" should be written as "mouseover". |
| listener | To bind the event listening function, be careful to write only the function name and do not include brackets. |
| userCapture | The event monitoring method can only be true and false: true, adopting capture mode; false, adopting bubble mode. If there are no special requirements, it is generally false. |
Here it is necessary to talk about the difference between capture mode and bubble mode.
As shown in the figure, there are two layers of div elements, and both set click events. Generally speaking, if I click on the inner blue element will not only trigger the click event of the blue element, but also trigger the click event of the red element at the same time. The useCapture parameter is to control the order of the two click events at this time. If it is false, the bubble mode will be used. It is a process from the inside out, so the click event of the blue element will be executed first and then the click event of the red element. If it is true, it is the capture mode. In contrast to the bubble mode, it is from the outside to the inside. The click event of the red element will be executed first before the click event of the blue element will be executed.
If the useCapture used by elements of different layers is different, the target element will first look for events set to capture mode from the outermost element. After reaching the target element to execute the event of the target element, then look out for events set to bubble mode.
• AttachEvent has 2 parameters, as shown below:
element.attachEvent(type, listener);
| parameter | Parameter description |
|---|---|
| element | The object to bind the event and the HTML node. |
| type | For event name, please add "on" before the event, such as "onclick" and "onmouseover", which is the difference from addEventListener. |
| listener | To bind the event listening function, be careful to write only the function name and do not include brackets. |
addEventListener() is a standard method to bind event listening function, which is supported by W3C. Chrome, FireFox, Opera, Safari, IE9.0 and above all support this function; however, IE8.0 and below do not support this method, it uses attachEvent() to bind event listening function. Therefore, this binding event method must deal with browser compatibility issues.
Code compatible with IE and non-IE browser event binding:
function addEvent(obj,type,handle){ try{ // Chrome, FireFox, Opera, Safari, IE9.0 and above versions obj.addEventListener(type,handle,false); }catch(e){ try{ // IE8.0 and below versions obj.attachEvent('on' + type,handle); }catch(e){ // Early browser obj['on' + type] = handle; } }}or
function regEvent(ele, event_name, fun){ if (window.attachEvent) ele.attachEvent(event_name, fun); //IE browser else { event_name = event_name.replace(/^on/, ""); //If on start, delete on, such as onclick->click ele.addEventListener(event_name, fun, false); //Non IE browser}}The above article briefly talks about the difference between addEventListener and attachEvent is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.