Of Stack

JavaScript Event Learning Summary (3) js Event Objects

  • 2021-06-28 08:42:06
  • OfStack

Related reading:

JavaScript Event Learning Summary (5) Mouse events for event types in js

https://www.ofstack.com/article/86259.htm

JavaScript Event Learning Summary (1) Event Flow

https://www.ofstack.com/article/86261.htm

javaScript Event Learning Summary (4) Public members of event (properties and methods)

https://www.ofstack.com/article/86262.htm

JavaScript Event Learning Summary (2) js event handler

https://www.ofstack.com/article/86264.htm

JavaScript Event Learning Summary (3) js Event Object

https://www.ofstack.com/article/86266.htm

1. Event Objects

1. Understanding the Objects of Events

Events exist as objects in the browser, event.When an event is triggered, an event object, event, is generated that contains all the event-related information.Includes the elements that cause the event, the type of event, and other information related to a particular event.

For example, the event generated by a mouse operation contains information about the mouse position;The event produced by keyboard operations contains information about the keys pressed.

All browsers support event objects, but in a different way, the event object must be passed to the event handler as a 1-only parameter in DOM, where event is a property of the window object.

2. event in 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.Event objects can be accessed directly through event.

3. Event objects in DOM

Both DOM0 and DOM2 level event handlers pass in event as a parameter. 


<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

Case 1: When an event handler is added through an 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>

Case 2: The event object is passed in as a parameter through the event handler added by attachEvent (). 


<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 an event handler added by the DOM0 level method. It has the same type as window.event.type1, but the event parameter passed in is different from window.event. Why? 


btn.onclick= function (event) {
var event1=window.event;
console.log('event1.type='+event1.type); //event1.type=click
console.log('event.type='+event.type); //event.type=click
console.log('event1==event?'+(event==event1)); //event1==event?false
}

2. The event and window.event passed in through the event handler added by attachEvent are different. Why? 


<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.attachEvent("onclick", function (type) {
console.log(event.type); //click
console.log("event==window.event?"+(event==window.event)); //event==window.event?false
})
</script>
</body>

The above is the JavaScript event learning summary (3) js event object related knowledge introduced to you by this site. I hope it will be helpful to you. If you want to know more, please pay attention to this site site site!

Related articles: