When an event on the DOM is triggered, an event object event will be generated.
Event Objects in DOM
A DOM-compatible browser will pass an event object into the event handler. The event object contains properties and methods related to the specific event that created it. The event types of division are different, and the available attribute methods are different. However, all events will have members listed in the table below.
The following lists the attributes defined by the Level 2 DOM event standard:
- bubbles: Returns a boolean value indicating whether the event is a bubble event type.
- cancelable: Returns a boolean value indicating whether the event can have a cancelable default action.
- currentTarget: Returns the element whose event listener triggers the event.
- eventPhase: Returns the current stage of event propagation.
- target: Returns the element that triggers this event (the target node of the event).
- timeStamp: Returns the date and time of the event being generated.
- type: Returns the name of the event represented by the current Event object.
The following lists the methods defined by the Level 2 DOM event standard. IE's event model does not support these methods:
- initEvent(): Initializes the properties of the newly created Event object.
- preventDefault(): Notifies the browser not to perform default actions associated with events.
- stopPropagation(): No more events are dispatched.
this、target、currentTarget
Inside the event handler, the object this always equals the value of the currentTarget, and the target only contains the actual target of the event. If the event handler is assigned to the target element directly, this, currentTarget, and target contain the same values. like:
var btn = ("#btn");
=function () {
( === this); //true
( === this); //true
}
Since the target of the click event is the btn button, these three values are equal. If the event handler is in the button's parent node(), then these values are not the same. like:
var btn = ("#btn");
=function () {
( === ); //true
(this === ); //true
( === btn); //true Because btn does not register the event handler, the click event bubbles up}
Here, both this and currentTarget are because the event handler is registered to this element. But the target element is equal to the button element because it is the real target of the click event. Since the button does not register the event handler, the click event bubbles up, where the event can be processed.
type
You can use the type attribute when you need to process multiple events through a function. like:
//Get Buttonvar btn = ("#btn");
//Set multiple eventsvar handler = function() {
//Type of detection event switch () {
case "click":
("i click it");
break;
case "mouseover":
("i enter it");
break;
case "mouseout":
("i leave it");
break;
}
}
// Assign the response event value = handler;
= handler;
= handler;
preventDefault()
To block the default behavior of a specific event, you can use this method. like:
var aTags = ("a");
for (var i = 0; i < ; i++) {
var currentATag = aTags[i];
= function() {
();
}
};
The above code blocks all A-tagged hyperlink functions on the web page. It should be noted that only events whose cancelable property is set to true can use preventDefault() to cancel their default behavior.
stopPropagation()
Stop the spread of events in the DOM level immediately, i.e. cancel further event capture or bubbling. For example, an event handler directly added to a button can call the method, thereby avoiding triggering the event handler registered above. like:
var btn = ("btn");
= function () {
("btn clicked");
// ();
};
= function () {
("clicked");
};
//The result of clicking://btn clicked
//clicked
Another example:
var btn = ("btn");
= function () {
("btn clicked");
();
};
= function () {
("clicked");
};
//The result of clicking://btn clicked
eventPhase
This property is used to determine which stage of the event is currently in the event stream.
1. If it is the capture stage, it is equal to 1;
2. If it is the target object stage, it is equal to 2;
3. If it is the bubbling stage, it is equal to 3;
like:
var btn = ("btn");
("click", function() {
("bodyListener" + );
}, true) //Capture stage
= function() {
("btn" + );
} //The target object stage is actually a bubble stage (on btn)
= function() {
("body" + );
} //Bubbling stage (on body)
Another example:
var btn = ("btn");
("click", function() {
(); //1
(); //HTMLBodyElement
}, true);
("click", function() {
(); //2
(); //HTMLInputElement
});
("click", function() {
(); //3
(); //HTMLBodyElement
});
The process is probably:
Capture stage --> btn target object stage --> bubble stage
The above is all about this article, I hope it will be helpful to everyone's learning.