Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the Event object in the DOM event". In the daily operation, I believe that many people have doubts about what the Event object is in the DOM event. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt about "what is the Event object in the DOM event?" Next, please follow the editor to study!

An event object (event object) is an object that is related to a particular event and contains the details of that event. We can get a series of methods and properties generated after the event is triggered through the parameters passed to the event handler.

Event object

The Event object is actually a parameter of an event handler, and when an event is called, we just need to pass it into the event function to get it. The code is as follows:

Function getEvent (event) {event = event | | window.event;}

The above event function passes in a parameter called Event as the event object and handles it with browser compatibility. In IE8 and previous versions, when registering event handlers by setting properties, the event object was not passed when called, but needed to be obtained through the global object window.event. So in the above code, we use | | to judge, using event if the event object exists and window.event if it doesn't exist.

The Event object contains several methods and properties, through which we can get the details of the event and process it.

Event object method

The Event object mainly has the following two methods to deal with event propagation (bubbling, capture) and event cancellation.

1.stopPropagation

The stopPropagation method is mainly used to prevent further propagation of events, such as preventing events from bubbling up.

Function getEvent (event) {event.stopPropagation ();} child.addEventListener ('click', getEvent, false)

If you need to be compatible with IE8 and below browsers, you need to use cancelBubble instead of stopPropagation, because lower versions of IE do 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 prevents further propagation of events.

2.perventDefault

The perventDefault method is used to cancel the default action of the event, such as the jump behavior of the a link and the form auto-submission behavior, which can be canceled with the perventDefault method. The code is as follows:

Do not jump 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 prevent the jump behavior of the a link. However, in browsers before IE9, you need to set the returnValue property to false. 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 DOM event specification defines another method on the Event object, named stopImmediatePropagation.

3.stopImmediatePropagation

Compared with stopPropagation, stopImmediatePropagation can also prevent the propagation of events, except that it can also block events of the same type bound to this element. Such as:

Var go = document.getElementById ('go'); function goFn (event) {event.preventDefault (); event.stopImmediatePropagation (); / / prevent events from bubbling and console.log of the same type (' I didn't jump!') ;} function goFn2 (event) {console.log ('I am the same event!') ;} go.addEventListener ('click', goFn, false); go.addEventListener (' click', goFn2, false)

We continue to add a click event to the a link, and if we add the stopImmediatePropagation method to the goFn method, the goFn2 method will not be executed and the click event will not bubble to the upper layer.

It should be noted that some browsers of stopImmediatePropagation currently do not support it, but libraries like jQuery encapsulate cross-platform stopImmediatePropagation methods.

Event object Properties

Compared with the method of Event object, because there are relatively many properties of Event object, the text can not explain them one by one, so it mainly introduces the properties of Event object which are commonly used in practical projects.

1.type attribute

Through type, we can get the type of event that occurs, for example, the click event we get is the 'click' string.

Var go = document.getElementById ('go'); function goFn (event) {console.log (event.type); / / output' click'} go.addEventListener ('click', goFn, false)

2.target attribute

The target attribute is mainly used to get the target object of the event, for example, when we click on the a tag, we get the html object of the a tag.

Var go = document.getElementById ('go'); function goFn (event) {var target = event.target; console.log (target = = go) / / returns true} go.addEventListener (' click', goFn, false)

In IE8 and previous versions, we need to use srcElement instead of target. The compatibility scheme 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 an event is triggered with a mouse, the main event properties include the position of the mouse and the state of the button, for example, clientX and clientY specify the position of the mouse in the window coordinates, and button and which specify which mouse button to press.

Function moveFn (event) {console.log (event.screenX) / / get the mouse's screen-based X-axis coordinates console.log (event.screenY) / / get the mouse's screen-based Y-axis coordinates console.log (event.clientX) / / get the mouse's browser-based X-axis coordinates console.log (event.clientY) / / get the mouse's Y-axis sitting based on the browser window The standard console.log (event.pageX) / / gets the mouse's document-based X-axis coordinate console.log (event.pageY) / / gets the mouse's document-based Y-axis coordinate} function clickFn (event) {console.log (event.button) / / gets the mouse button pressed. In non-IE browsers, 0 is the left mouse button, 1 is the middle mouse button, and 2 is the right mouse button console.log (event.which) / / to get which keyboard key or mouse button is pressed on the specified event} document.addEventListener ('mouseover', moveFn, false); document.addEventListener (' click', clickFn, false)

4. Keyboard event Properties

When an event is triggered with the keyboard, the main event properties include the keyboard key keyCode and whether or not to press the special key, for example, keyCode specifies the key code value of the pressed key, and ctrlKey specifies whether the ctrl key is pressed.

Function keyFn (event) {console.log (event.keyCode); / / gets the key code value console.log (event.ctrlKey) of the pressed key; / / gets whether the ctrl key console.log (event.shiftKey) is pressed; / / gets whether the shift key console.log (event.altKey) is pressed; / / gets whether the alt key console.log (event.metaKey) is pressed / / get whether the meta key} document.addEventListener ('keyup', keyFn, false) is pressed; at this point, the study of "what is the Event object in the DOM event" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.