(Nineth Day) Dom events

AddEventListener

Use the Addeventlistner () method to register an event handler for the event target. Addeventlistner () accepts three parameters. The first is the event type to register the handler, the event type (or first name) is a string, but it does not include the prefix "on" that should be used to set the event handler properties. The second parameter is the function that should be called when an event of the specified type occurs. The last parameter is a Boolean value. Typically, false is passed to this parameter. If true is passed in the opposite direction, the function is registered as a capture event handler and called during different scheduling stages of the event. You can ignore the third parameter without passing false, and the specification should eventually change so that it is allowed to do so. However, ignoring this parameter in the following example may be an error in some browsers.

<button ID ="btn">click me</button>varb = document.getElementById ("btn"); B.onclick=function () {alert ("Thanks for clicking me!"); } b.addeventlistener ("Click", function () {alert ("Thanks again!"); }, false);

Calling AddEventListener () with "Click" as the first parameter above does not affect the value of the OnClick property. In the preceding code, clicking a button results in two alert () dialogs.

(1) Multiple handler functions for the same event type are registered for the same object by calling AddEventListener () multiple times. When an object occurs, all registration handlers for that event type are called in the order in which they were registered.

(2) It is useless to call AddEventListener () multiple times on the same object using the same parameters, the handler is still registered only once, and repeated calls do not change the order of the calling handlers.

Attachevent

IE9 IE does not support AddEventListener () and RemoveEventListener (). IE5 and later versions define similar methods Attachevent () and DetachEvent ().

The attachevent () and DetachEvent () methods work similarly to Addeventlistender () and RemoveEventListener (), with one exception:

• Because the IE event model does not support event capture, attachevent () and detachevent () require only two parameters: event type and handler function.
• The first parameter of the IE method uses an event handler property name with an "on" prefix, rather than an event type without a prefix. For example, when you pass "click" to AddEventListener (), you pass "onclick" to attachevent ().
• Attachevent () allows the same event handler function to be registered multiple times. When a particular event type occurs, the number of calls to the registered function is the same as the number of registrations.

It is often seen that the event handler registration code is called in a browser that supports AddEventListener (), otherwise it is attachevent ():

varb = document.getElementById ("MyButton");varHandler = function () {alert ("thanks!"); };if(B.addeventlistener) B.addeventlistener ("Click", Hanlder,false);Else if(b.attachevent) b.attachevent ("onclick", handler)

Parameters of the event handler

In previous versions of IE8, event handlers were registered by setting properties, and delivery event objects were not passed when they were called. Instead, you need to pass the Global Object window. event to get the events object. For interoperability, you can write the following procedure so that if no parameters are used, window.event:

function handler (event) {       eventEvent | | window.  Event;}

Event handlers are passed to the attachevent () registration event handler, but they can also use window.event.

Event cancellation

In browsers that support AddEventListener (), the event's default action is also canceled by invoking the Preventdefault () method of the event object. However, in IE before IE9, the same effect can be achieved by setting the returnvalue property of the event object to False.

Window.onload =function () {varA = document.getElementById ("a"); A.onclick= function (Event){                    Event. Preventdefault (); }            }<a id="a"href="http:www.cnblogs.com">clcik me</a>/*The IE9 below is not so! Display Error: Unable to get attribute "Preventdefault" for undefined or null reference*/

The following changes are made:

Window.onload =function () {varA = document.getElementById ("a"); A.onclick= function (Event){                       var Event=Event|| Window.Event; Event. Preventdefault (); }            }           <a id="a"href="http:www.cnblogs.com">clcik me</a>/*However, it is not supported below IE8 and must be Event.returnvalue = False */

The following code gives three kinds of event cancellation techniques

function Cancelhandler (Event) {     var Event=Event|| Window.Event; /*Here is the code that handles the event*/     if(Event. Preventdefault)Event. Preventdefault ();//Standard Technology     if(Event. returnvalue)Event. returnvalue =false;//IE     return false;//Handler for handling use of object property registration}

Event propagation (event bubbling) concepts

Fires a class of events on an object (such as clicking the OnClick event), and if this object defines a handler for this event, then this event invokes the handler, and if the event handler is not defined or the event returns true, the event propagates to the object's parent object, from inside to outside, Until it is processed (all the same events of the parent object will be activated), or it reaches the topmost level of the object, the Document object (some browsers are windows).

(1) event.stoppropagation ()

Event bubbling is blocked during event processing, but does not halt the default behavior (it performs a hyperlink jump)

"Note" Before IE9 IE does not support the Stoppropagation () method. Instead, the IE event object has a cancelbubble property, and setting this property to true prevents the event from being propagated further.

(2) return False

Event bubbling is blocked during event processing, and the default behavior is blocked

(3) event.preventdefault ()

Its role is: During event processing, do not halt the event bubbling, but the default behavior (it only executes all the bullets, but did not perform a hyperlink jump)

(4) Stopimmediatepropagation ()

This method prevents the propagation of events from any other object, but also prevents calls to any other event handlers that are registered on the same object. "Note" This method is only supported on IE 11+, if it is required for IE compatibility support, this method is not recommended

Mouse events

1Click2 3  ContextMenu 4 /*events that can be canceled when the context menu is about to appear. The current browser displays a context menu when the right mouse button is present, so this event can also be used as a click event*/ 5 6 ondblclick7 /*triggered when the user double-clicks the mouse*/8 9MouseDownTen /*triggered when the user presses the mouse button*/ One  A MouseUp - /*triggered when the user releases the mouse button*/ -  the MouseMove - /*triggered when the user moves the mouse*/ -  - mouseover + /*triggered when the mouse enters the element*/ -  + mouseout A /*triggered when the mouse leaves the element*/ at  - MouseEnter - /*similar to "mouseover, but not bubbling." IE introduced it, HTML5 it standardized, but not widely implemented "*/ -  - MouseLeave - /*similar to "mouseout, but not bubbling." IE introduced it, HTML5 it standardized, but not yet widely implemented "*/

Text Events

The browser has three traditional keyboard input events. onkeydown Events, onkeyup events, and onkeypress events. Among the three, KeyPress is a more advanced event, which indicates that a printable character has been produced. And the objects passed through the KeyPress event are more chaotic. a onkeypress event represents the single character entered. The event object specifies a character in the form of an array Unicode encoding, so it must be converted to a string using String.fromCharCode () .

(Nineth Day) Dom events