Home > Developer > JavaScript
Related reading:
JavaScript Event Learning Summary (v) Event type mouse events in JS
Http://www.jb51.net/article/86259.htm
JavaScript Event Learning Summary (i) Event flow
Http://www.jb51.net/article/86261.htm
A summary of JavaScript event Learning (iv) Public members of events (properties and methods)
Http://www.jb51.net/article/86262.htm
A summary of JavaScript event Learning (ii) JS event handler
Http://www.jb51.net/article/86264.htm
JavaScript Event Learning Summary (iii) JS event object
Http://www.jb51.net/article/86266.htm
One, Event object
1. Know the Event object
Events exist in the browser in the form of an object, that is, an event. When an event is triggered, an event object is generated that contains all the information related to the event. Includes the element that causes the event, the type of the event, and other information related to a particular event.
For example, a mouse action generates an event that contains information about the location of the mouse, and the event generated by the keyboard contains information about the pressed key.
All browsers support the event object, but in different ways, the event object in the DOM must be passed as a unique parameter to the incident handler, which in IE is an attribute of the Window object.
2. Events in HTML event handlers
<input id= "btn" type= button "value=" click "onclick=" Console.log (' HTML event handler ' +event.type) "/>
This creates a function that contains the local variable event. Event objects can be accessed directly through events.
3, Event objects in the DOM
Event handlers at both the DOM0 level and the DOM2 level pass the 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, IE in the event object
In the first case: When an event handler is added through the DOM0-level method, it 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>
Second: Event handlers that are added by attachevent () are passed in as arguments.
<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 have two places I don't understand.
1, the event handler that is added through the DOM0-level method can also pass in a parameter of an event, its type and window.event.type are the same, but the passed event parameter 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 that are added through attachevent are not the same, 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 a small set to introduce the JavaScript Event learning Summary (iii) JS event object related knowledge, hope for everyone to help, if you want to learn more content please pay attention to cloud Habitat community website!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
