Detailed explanation of JavaScript dom event object and IE event object instance

Event object: When an event on the DOM is triggered, an event object event will be generated. This object contains all information related to the event, including the element that caused the event, The type of event and other information related to the specific event.

Event object in DOM

A DOM-compatible browser will pass an event object into the event handler, regardless of When specifying the event handler, whether the DOM0 or DOM2 method is used, the event object will be passed in. The event object only exists during the execution of the event handler. Once the event handler completes execution, the event object will be destroyed. The following is a code example:

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
 console.log(event.type); // "click"
}
btn.addEventListener("click", function(event) {
 console.log(event.type);
}, false);

The event object contains properties and methods related to the specific event that created it. The types of events triggered are different, and the available property methods are also different. But all events will have the following properties or methods:

• bubbles: Boolean value, indicating whether the event bubbles

• cancelable: Boolean value , indicating whether the default behavior of the event can be canceled

• currentTarget: element, the element where the event handler is currently processing the event

• defaultPrevented: Boolean Value, indicating whether the preventDefault() method has been called

• detail: integer, detailed information related to the event

• eventPhase: integer, calling event The stages of the handler, 1 represents the capture stage, 2 represents the target stage, and 3 represents the bubbling stage

• preventDefault(): function, the default behavior of canceling the event, can be called when cancelable is true The method

• stopImmediatePropagation(): function that cancels further capturing or bubbling of the event while preventing any event handlers from being called

• stopPropagation (): Function, cancels further capturing or bubbling of the event. This method can be called when bubbles is true

• target: element, the target of the event

• trusted: Boolean value, when true, it means that the event was generated by the browser, otherwise it means that the event was created through JS

• type: String, the type of event being triggered

• view: The abstract view associated with the event, equivalent to the window object where the event occurred

The following code example shows the usage of some of the above attributes, It can also help us further understand the event flow. Suppose there is a button "myBtn" on the page. When the button is clicked, both this and currentTarget are equal to the body element because the event handler is registered on the body element. The value of target is equal to the button element, because it is the real target of the click event. Since there is no event handler registered on the button, the "click" event bubbles up to document.body before being processed.

document.body.onclick = function(event) {
 console.log(event.currentTarget === document.body); // true
 console.log(this === document.body); // true
 console.log(event.target === document.getElementById("myBtn")); // true
};

Look at another example. In the following code, the stopPropagation() method cancels further capturing or bubbling of events. When I click the button, the click event handlers on the button and body elements should be triggered due to the event bubbling mechanism, outputting "From Bth..." and "From Body...". Now the click event is blocked from propagating further in the DOM hierarchy after firing on the button element, so the event handler on the body will not be fired.

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
 console.log("From Bth ...");
 event.stopPropagation(); // 停止事件传播
};
document.body.onclick = function() {
 console.log("From Body ...");
};

Event object in IE

In IE, when using the DOM0 method to add an event handler, the event object is used as the window object. A property exists. If it is added through the attachEvent() method, the event object is passed into the event processing function as a parameter. The following is a code example:

var btn = document.getElementById("myBtn");
btn.onclick = function() {
 var event = window.event;
 console.log(event.type); // "click"
};
btn.attachEvent("onclick", function(event) {
 console.log(event.type); // "click"
});

IE's event object also contains properties and methods related to the event that created it. These properties and methods will also vary depending on the event type. But all event objects will contain the following properties:

• cancelBubble: Boolean value, readable and writable, defaults to false. Cancel event bubbling when set to true

• returnValue: Boolean value, readable and writable, defaults to true. The default behavior of canceling the event when set to false

• srcElment: element, the target element of the event, the same as the target attribute in the DOM

• type: string, event type

In IE, the scope of the event handler is determined based on how it is specified. The value of this does not necessarily point to the target element of the event. . Therefore, it is safer to use the srcElement attribute. Please look at the code example below. In the first method, the value of this is the target element, and in the second method, as mentioned earlier, the event handler of this method is executed in the global scope, so the value of this is window.

var btn = document.getElementById("myBtn");
btn.onclick = function() {
 console.log(window.event.srcElement === this); // true
}
btn.attachEvent("onclick", function(event) {
 console.log(event.srcElement === this); // false
});

The above is the detailed content of Detailed explanation of JavaScript dom event object and IE event object instance. For more information, please follow other related articles on the PHP Chinese website!