The AddEventListener parameters are as follows
AddEventListener (Type, listener[, Usecapture]);
- Type, event name
- Listener, event handler
- Usecapture, whether to capture
Always remember that listener is a response function, type of functions. I believe a lot of people understand that too. Most of the time this is used
Elem.addeventlistener (' click ', function (EV) {//Todo}, False);
The first parameter has no objection, the second parameter passes a function, the third argument passes false, and the event stream is consistent with the low version ie (both bubbles).
Read Iscroll.js (5.1.3) source code found that there is such a way of writing
_initevents 863 Lines, Method EventType (window, ' Orientationchange ', this), EventType (window, ' resize ', this);//EventType 42 lines, The following me.addevent = function (el, type, FN, capture) {El.addeventlistener (type, FN,!!) capture);};
Simplify to test code as follows
var obj = {handleevent:function (ev) { console.log (EV)}}document.addeventlistener (' Click ', obj, false)
Yes, the second parameter is not a function, but an object. A bit confused, the world view 1:30 will not change over. How could it be an object? The consequences of inertia thinking and not looking at norms are immense. Click the document without an error stating that it is really possible to use this.
The actual DOM2 of listener, defined in Events, does not say that it must be a function type.
Interface EventListener (introduced in DOM level 2)
As long as the implementation of the above interface can be used as listener, simply said to add Handleevent method to the object can be used as listener.
One of the benefits of adding events in this way is that this can be easily bound to the current class when you are using class-based development. As follows
function Component (elem, option) {This.elem = Elemthis.handleevent = function (EV) {if (Ev.type = = = ' click ') {This.updatena V ()}if (Ev.type = = = ' DblClick ') {This.updatebottom ()}}this.init ()}component.prototype = {Init:function () { This.elem.addEventlistener (' Click ', this, false) This.elem.addEventlistener (' DblClick ', this, false)},updatenav: function () {console.log (' nav update ')},updatebottom:function () {console.log (' Bottom Update ')}}
Related:
Https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
Http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener
Https://github.com/snandy/e.js
The alternative wording of AddEventListener