Related readings:
JavaScript Event Learning Summary (V) Mouse Event Type in JS
//www.VeVB.COM/article/86259.htm
JavaScript Event Learning Summary (I) Event Flow
//www.VeVB.COM/article/86261.htm
JavaScript event learning summary (IV) Public members of event (properties and methods)
//www.VeVB.COM/article/86262.htm
JavaScript event learning summary (II) js event handler
//www.VeVB.COM/article/86264.htm
JavaScript event learning summary (III) js event object
//www.VeVB.COM/article/86266.htm
1. Event Object
1. Understand the event object
Events exist in the browser as objects, i.e. event. Triggering an event will generate an event object event, which contains all the information related to the event. Includes the elements that result in the event, the type of event, and other information related to a specific event.
For example: the event generated by the mouse operation will contain information about the mouse position; the event generated by the keyboard operation will contain information related to the pressed key.
All browsers support event objects, but the support methods are different. In DOM, event objects must be passed to event handling functions as unique parameters. In IE, event is an attribute of window objects.
2. Event in the html event handler
<input id="btn" type="button" value="click" onclick=" console.log('html event handler'+event.type)"/>This creates a function containing the local variable event. The event object can be accessed directly through event.
3. Event objects in DOM
The event handlers at level DOM0 and level DOM2 will pass event as parameters.
<body><input id="btn" type="button" value="click"/><script>var btn=document.getElementById("btn");btn.onclick=function(event){console.log("DOM0 & click");console.log(event.type); //click}btn.addEventListener("click", function (event) {console.log("DOM2 & click");console.log(event.type); //click},false);</script></body>4. Event Objects in IE
The first case: When adding an event handler through the DOM0 level method, the event object exists as an attribute of the window object.
<body><input id="btn" type="button" value="click"/><script>var btn=document.getElementById("btn");btn.onclick= function () {var event=window.event;console.log(event.type); //click}</script></body>The second case: the event handler added through attachEvent(), and the event object is passed in as a parameter.
<body><input id="btn" type="button" value="click"/><script>var btn=document.getElementById("btn");btn.attachEvent("onclick", function (type) {console.log(event.type); //click})</script></body>But I don't understand two things.
1. An event parameter can also be passed into the event handler added through the DOM0 level method. Its type is the same as window.event.type, but the event parameter passed is different from window.event. Why?
btn.onclick= function (event) {var event1=window.event;console.log('event1.type='+event1.type); //event1.type=clickconsole.log('event.type='+event.type); //event.type=clickconsole.log('event1==event?'+(event==event1)); //event1==event?false}2. The event passed in the event handler added through attachEvent is different from window.event. Why?
<body><input id="btn" type="button" value="click"/><script>var btn=document.getElementById("btn");btn.attachEvent("onclick", function (type) {console.log(event.type); //clickconsole.log("event==window.event?"+(event==window.event)); //event==window.event?false})</script></body>The above is the summary of JavaScript event learning (III) related knowledge about js event objects introduced by the editor. I hope it will be helpful to everyone. If you want to know more, please pay attention to the Wulin.com website!