Javascript event object
When an event is triggered in js, an event object is generated, that is, the event in the function processing program. With the event, we can access all event-related information, such as the event type and event occurrence object. Note that the event object IE and non-IE support methods are different.
Event object in DOM
Whether it is an event bound to a tag, or a DOM0 event or a DOM2 event, the event handler will pass in an event.
Button 1... Var btn = document. getElementById (button); btn. onclick = function (event) {alert (event. type) ;}; btn. addEventListener (click, function (event) {alert (event. type );});
When you click the button, event. type, that is, click, of the event type is output.
The properties and methods in the event are as follows:
Attribute/Method |
Type |
Read/write |
Description |
Bubbles |
Boolean |
Read-Only |
Event bubble? |
Cancelable |
Boolean |
Read-Only |
Can I cancel the default event behavior? |
CurrentTarget |
Element |
Read-Only |
The element that the event handler is currently processing. |
DefaultPrevented |
Boolean |
Read-Only |
When the value is true, the table has already called preventDefault () (Added in DOM3 events) |
Detail |
Integer |
Read-Only |
Event-related details |
EventPhase |
Integer |
Read-Only |
Stage of calling the event handler: 1 indicates the capture stage, 2 indicates the target stage, and 3 indicates the bubble stage. |
PreventDefault |
Function |
Read-Only |
Cancels the default action of an event. This method can be used when cancelable is true. |
StopImmediatePropagation |
Function |
Read-Only |
Cancel further event capture or bubbling and prevent any event handler from being called (added in DOM3 events) |
StopPropagation |
Function |
Read-Only |
Cancel further event capture or bubbling. This method can be used when bubbles is set to true. |
Target |
Element |
Read-Only |
Event Target |
Trusted |
Boolean |
Read-Only |
True indicates that the browser generates the event. false indicates that the event was created by a developer using Javascript (added in DOM3 events) |
Type |
String |
Read-Only |
Type of the event to be triggered |
View |
AbstractView |
Read-Only |
Abstract view associated with the event. Equivalent to the window object in which an event occurs |
Target and currentTarget
First, note that the event contains the target and currentTarget. The former indicates the event target, which is the original target triggered by the event, the latter represents the target of the current event (because the event will capture or bubble, it is not necessarily the original target of the event)
When the event handler is on the target element, the two are the same.
var btn = document.getElementById(button);btn.onclick = function(event){ console.log(this === event.target); //true console.log(this === event.currentTarget); //true}
However, if btn is in a div, add a listener to the parent node of btn:
Button
var btnWrap= document.getElementById(btnWrap);btnWrap.onclick = function(event){ console.log(event.target=== btn); //true console.log(event.currentTarget=== btnWrap); //true}
When you click the button, the event is uploaded from the button to btnWrap. In the btnWrap event processing program, the original target of the event is btn, but the current event is btnWrap.
Cancelable and preventDefault ()
You can use the preventDefault method to block the default behavior of a tag. Typically, the default behavior of a tag is to open the url specified by its href attribute. If you want to block this behavior, call the preventDefault method in The onclick event handler.
var link = document.getElementById(myLink);link.onclick = function(event){ event.preventDefault();}
Note that the preventDefault method can be used to cancel the default action only for events whose cancelable is true.
StopPropagation ()
StopPropagation can immediately stop the propagation of events in the DOM. For example, if a Div contains some small buttons, The div event is triggered when the small button is clicked Based on Event bubbling, to prevent this, you can use stopPropagation ().
Var btn = document. getElementById (button); btn. onclick = function (event) {event. stopPropagation ();} var btnWrap = document. getElementById (btnWrap); btnWrap. onclick = function (event) {console. log (event arrival !); // No output}
Event object in IE
Unlike the event object in DOM, the event object in IE has different attributes and different access methods.
In IE, events bound through DOM0 events are not a local variable, but exist as an attribute of window.
Var btn = document. getElementById (button); btn. onclick = function (event) {alert (event. type); // Error !} Btn. onclick = function () {alert (window. event. type); // output click}
However, if the event is added through attachEvent or directly bound, it is a local variable like in the DOM and can be accessed directly.
Button 1... Var btn = document. getElementById (button); btn. attachEvent (onclick, function (event) {alert (event. type); // output 'click '});
Like in DOM, events in IE also have some event-related attributes, as shown below:
Attribute/Method |
Type |
Read/write |
Description |
CancelBubble |
Boolean |
Read/write |
The default value is false, but if it is set to true, event bubbling can be canceled (same as the stopPropagation () method in DOM) |
ReturnValue |
Boolean |
Read/write |
The default value is true, but if it is set to false, the default action of the event can be canceled (same as the preventDefault () method in DOM) |
SrcElement |
Element |
Read-Only |
Event target (same as the target attribute in DOM) |
Type |
String |
Read-Only |
Type of the event to be triggered |
SrcElement
As mentioned in the previous blog, In the attachEvent method class of IE, this does not point to the element of the currently triggered event, but to the global variable window. Therefore, it is best to use event within the event handler. srcElement is relatively safe.
var btn = document.getElementById(button);btn.onclick = function(){ alert(window.event.srcElement === this); //true}btn.attachEvent(onclick, function(){ alert(window.event.srcElement === this); //false}
ReturnValue
The returnValue function is similar to the preventDefault () method in the DOM. assigning it to false can prevent default event behavior.
btn.attachEvent(onclick, function(){ window.event.returnValue = false;}
CancelBubble
The function of cancelBubble is similar to the stopPropagation () method in DOM. assigning it to true can prevent further event bubbles.
btn.attachEvent(onclick, function(){ window.event.cancelBubble = true;}
Compile cross-browser event objects
Similar to the event handler mentioned in the previous blog, event objects must also be processed across browsers, providing a unified approach based on different implementations of DOM and IE.
Var EventUtil = {// Add events. For more information, see addHandler: function (element, type, handler) {}, // Delete events. For more information, see removeHandler: function (element, type, handler) {}, // get the event object getEvent: function (event) {return event? Event: window. event;} // get the event trigger element getTarget: function (event) {return event.tar get | event. srcElement;} // The default event preventDefault: function (event) {if (event. preventDefault) {event. preventDefault ();} else {event. returnValue = false ;}}// prevents event capture or bubbling (only bubbles exist in IE) stopPropagation: function (event) {if (event. stopPropagation) {event. propagation ();} else {event. cancelBubble = true ;}}}