Home > Developer > JavaScript
JavaScript event (3) event object
1. Recognize that event object events exist in the browser in the form of objects, that is, events. When an event is triggered, an event object is generated, which contains all event-related information. Includes the elements that cause the event, the event type, and other information related to the specific event. For example, an event generated by a mouse operation contains information about the mouse position, and an event generated by a keyboard operation contains information related to the pressed key. All browsers support event objects in different ways. In DOM, event objects must be passed to the event handler as unique parameters. in IE, event is an attribute of the window object. 2. event <input id = "btn" type = "button" value = "click" onclick = "console. log ('html event handler '+ event. type) "/> to create a function that contains the local variable event. You can directly access the event object through the event. 3. In DOM, event objects at the DOM0 and DOM2 levels are passed in as parameters. Copy the Code <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> copy Code 4. First case of the event object in IE: when an event handler is added using the DOM0 method, the event object exists as an attribute of the window object. Copy the Code <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> copy the code to the second scenario: Use the event handler added by attachEvent (), and the event object is passed in as a parameter. Copy the Code <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>. 1. You can also input an event parameter in the event handler added using the DOM0-level method. Its type and window. event. type, but the input event parameter is the same as window. events are different. 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 input event in the event handler added through attachEvent is different from the window. event. Why? Copy the Code <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>
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
