Analysis of the usage of JavaScript event object event object

This article describes the usage of JavaScript event object event object. Share it for your reference, as follows:

The previous article has been introducedFive ways JavaScript can specify handlers for events。

The following continues to introduce the event object event of JavaScript.

An event object event contains the elements that result in the event, the type of event, and other information related to a specific event.

1. Event objects in DOM

Properties/Methods	type	illustrate
bubbles	Boolean	Indicates whether the event is bubbled
cancelabel	Boolean	Indicates whether the default behavior of the event can be canceled
currentTarget	Element	The element that the event handler is currently processing the event (the element that listens to the event)
defaultPrevented	Boolean	true means preventDefault() has been called
detail	Integer	Details related to the event
eventPhase	Integer	The stage of calling event handler: 1 means the capture stage, 2 means the target, and 3 means the bubble stage
preventDefault()	Function	Cancel the default behavior of the event and use this method only if cancelable is true.
stopImmediatePropagation()	Function	Cancel the capture or bubbling of events while preventing any event handler from being called
stopPropagation()	Function	Cancel the event capture or bubbling, and bubbles are true to use this method
target	Element	The goal of the event
trusted	Boolean	true means that the event is generated by the browser, false means that the event is created by the developer through JavaScript.
type	String	Type of event
view	AbstractView	Abstract view associated with events, equivalent to window object where events occur

If the event handler is assigned to the target element directly, this,currentTargetandtargetContains the same value; if the event handler exists in the button's parent node,thisandcurrentTargetequals the parent node, and target equals the button element.

When you need to process multiple events through one function, you can use the type attribute:

var btn = ("button")[0];
var handler = function(event) {
 switch() {
  case "click":
   alert("click");
  case "mouseover":
   alert("mouseover");
  case "mouseout":
   alert("mouseout");
 }
}
 = handler;
 = handler;
 = handler;

Notice:The event object will exist only during the execution of the event handler; once the event handler is executed, the event object will be destroyed.

2. Event objects in IE

There are several different ways to access event objects in IE:

1) When adding event handlers using the DOM0 level method,Access event object;

2) In useattachEvent()When adding an event handler, the event object will be passed into the event handler as a parameter, or it can be passed throughAccess event object;

3) When specifying event handlers through HTML attributes, you can also access the event object through a variable named event.

Event targets in IE passsrcElementAttribute acquisition, this does not necessarily equal the event target: when adding event handlers using the DOM0 level method, this is equal to the event target, but when usingattachEvent()When adding an event handler,thisIt is not equal to the event target.

Properties/Methods	type	illustrate
cancelBubble	Boolean	Default is false, but setting it to true can cancel event bubbles. Since IE does not support event capture, it can only cancel event bubbles, while stopPropagation() can cancel event capture or bubbles at the same time.
returnValue	Boolean	Default is true, but setting it to false will cancel the default behavior of the event
srcElement	Element	The goal of the event
type	String	Type of event

3. Cross-browser events

var EventUtil = { 
 addHandler: function(element, type, handler) {
  ......
 }, 
 getEvent: function(event) {
  return event ? event : ;
 },
 getTarget: function(event) {
  return  || ;
 },
 preventDefault: function(event) {
  if ()
   ();
  else
    = false;
 },
 removeHandler: function(element, type, handler) {
  ......
 }, 
 stopPropagation: function() {
  if ()
   ();
  else
    = true;
 }
};
var btn = ("button")[0];
 = function(event) {
 event = (event);
 (event);
 (event);
 alert(); // Output: click}

PS：For instructions on javascript events, please refer to this siteA complete list of javascript events and functions：http://tools./table/javascript_event

For more information about JavaScript, readers who are interested in reading this site's special topic:A complete collection of operations and techniques related to JavaScript events》、《Summary of JavaScript page element operation skills》、《Summary of JavaScript DOM skills》、《Summary of JavaScript search algorithm skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript Errors and Debugging Skills》

I hope this article will be helpful to everyone's JavaScript programming.