A simple story of DOM events (II.) _javascript skills

In the simple explanation of DOM events (i), I mainly explained the event handlers at different DOM level, and introduced the triggering principle and method of event bubbling and capturing. This article will continue to introduce the knowledge points in the DOM event, focusing primarily on the properties and methods of the event object in the DOM event.

So what is an event object in a DOM event? An event object refers to an object that is related to a particular event and that contains the details of the event. We can get a series of methods and properties that occur after the event is triggered by passing the arguments to the event handler.

Event Object

The event object is actually a parameter to an event handler, and when we call the events, we just need to pass them in to the event function to get it. The code is as follows:

function GetEvent (event) {
 event = Event | | window.event;

The event function above passed a parameter named event as the object of events, with browser compatibility. In IE8 and earlier versions, the event object was not passed when it was invoked by setting the property registration event handler, which needed to be obtained through the global object window.event. So in the above code we use | | To make judgments, use event if the event object exists, or use window.event if it does not exist.

The event object contains several methods and properties that allow us to get the details of the event and handle it.

Event Object method

The event object mainly has the following two methods for handling the propagation (bubbling, capturing) of events and the cancellation of events.

1.stopPropagation

The Stoppropagation method is used primarily to prevent further propagation of events, such as preventing events from continuing to bubble up the upper layer.

function GetEvent (event) {
 event.stoppropagation ();
}
Child.addeventlistener (' Click ', GetEvent, false);

If you need compatible IE8 and the following version of the browser, you need to use cancelbubble to replace the stoppropagation, because the lower version of IE does not support the Stoppropagation method.

function GetEvent (event) {
 event = Event | | window.event;
 if (event.stoppropagation) {
 event.stoppropagation ();
 } else {
 event.cancelbubble = true;
 }
}

Cancelbubble is a property of the IE event object, and setting this property to True can prevent the event from spreading further.

2.preventDefault

The Preventdefault method is used to cancel the default action of an event, such as the jump behavior of a link and the form autocommit behavior can be canceled using the Preventdefault method. The code is as follows:

<a id= "Go" href= "https://www.baidu.com/" > No jump </a>
var go = document.getElementById (' go ');
function Gofn (event) {
 event.preventdefault ();
 Console.log (' I didn't jump! ');
}
Go.addeventlistener (' Click ', Gofn, false);

Through Preventdefault, we successfully blocked the jump behavior of a link. However, you need to set the ReturnValue property to False in the browser before IE9. As follows:

function Gofn (event) {
 event = Event | | window.event;
 if (event.preventdefault) {
 event.preventdefault ();
 } else {
 event.returnvalue = false;
 }
 Console.log (' I didn't jump! ');
}

In addition to the two main methods of the event object above, the current draft of the DOM event specification also defines another method on the event object named Stopimmediatepropagation.

3.stopImmediatePropagation

Compared with stoppropagation, stopimmediatepropagation can also prevent the spread of events, except that they can also block the same type of event that the element is bound to. Such as:

var go = document.getElementById (' go ');

function Gofn (event) {
 event.preventdefault ();
 Event.stopimmediatepropagation (); Block event bubbling and block the same type of event
 Console.log (' I didn't jump! ');
}
function GoFn2 (event) {
 Console.log (' I am the same type of events! ');
}
Go.addeventlistener (' Click ', Gofn, false);
Go.addeventlistener (' Click ', GoFn2, false);

We continue adding a click event to the A link, and if we add the Stopimmediatepropagation method to the Gofn method, then the GoFn2 method will not be executed and the Click event will not bubble up to the top.

It should be noted that stopimmediatepropagation is not currently supported in some browsers, but libraries such as jquery encapsulate Cross-platform stopimmediatepropagation methods.

Event Object Properties

Compared with the event object's method, because the event object has a relatively large number of properties, text can not be explained, so it is mainly introduced in the actual project of the common event object properties.

1.type Properties

By type we can get the type of event that happens, such as Click event and we get the ' click ' String.

var go = document.getElementById (' go ');
function Gofn (event) {
 console.log (event.type);//Output ' click '
}
go.addeventlistener (' Click ', Gofn, False) ;

2.target Properties

The target property is primarily used to get the target object of the event, such as the HTML object of the a tag we clicked on for the a tag.

var go = document.getElementById (' go ');
function Gofn (event) {
 var target = event.target;
 Console.log (target = = go)//return True
}

In IE8 and prior versions, we need to use srcelement rather than target. The compatibility scenario is as follows:

function Gofn (event) {
 var event = Event | | window.event, 
 target = Event.target | | event.srcelement;
 Console.log (target = = go)//return True
}

3. Mouse Event Properties

When you trigger an event with the mouse, the primary event property contains the position of the mouse and the state of the key, such as: Clientx and Clienty Specify the position of the mouse in the window coordinates, and the button and which specify which mouse button is pressed.

function Movefn (event) {
 Console.log (Event.screenx)//Get mouse based on screen x-axis
 coordinates console.log (event.screeny)// Get mouse based on screen y-coordinate
 console.log (EVENT.CLIENTX)//Get mouse based on the x-axis coordinates of the browser window
 console.log (event.clienty)// Gets the mouse based on the y-coordinate of the browser window
 console.log (event.pagex)//Get the mouse based on the document's x-axis
 console.log (event.pagey)//Get the mouse based on the y-coordinate of the document
}
function Clickfn (event) {
 Console.log (Event.button)//Get the button pressed by the mouse. Non IE browser 0 for the left mouse button, 1 for the middle mouse button, 2 for the right mouse button
 Console.log (Event.which)//Get the specified event which keyboard key or mouse button is pressed
}
Document.addeventlistener (' mouseover ', Movefn, false);
Document.addeventlistener (' Click ', Clickfn, false);

4. Keyboard Event Properties

When you trigger an event with the keyboard, the primary event property contains the key keycode of the keyboard and whether or not a special key is pressed, such as: keycode specifies the key value of the key pressed, Ctrlkey Specifies whether the CTRL key is pressed.

function Keyfn (event) {
 console.log (event.keycode);//Get the key code value of the pressed key
 Console.log (Event.ctrlkey);//Get the CTRL key pressed
 Console.log (Event.shiftkey);//Get whether the SHIFT key is pressed
 Console.log (event.altkey);//Get the ALT key
 Console.log ( Event.metakey); Gets whether the META key
}
document.addeventlistener (' KeyUp ', KEYFN, false) is pressed;

Similar event properties, such as Form Event properties and window event properties, are not detailed here. Interested students can access the relevant information.

Summarize

This paper mainly explains the common properties and methods of event object in DOM events, and also introduces its compatibility problem and solution in IE. However, the knowledge of DOM events is much more than that, and it is hoped that this will only help developers who first know Dom.

Remarks: Text reference from the JavaScript Authority guide book and the Web Tutorial "the DOM incident".

The above is the entire content of this article, I hope to help you, interested friends can see the "DOM event of the Simple (a)", thank you for the support of cloud habitat community!