JavaScript Event Summary (event handler mode)--javascript Advanced Programming Notes

1. Event Flow: Describes the order in which events are received from the page.

2. Event bubbling: The event flow of IE is called event bubbling, that is, the event starts to receive from the concrete element (the node with the deepest nesting level in the document) and then propagates up to the non-specific node (document).

3, Event capture: Refers to the less specific nodes should receive the event earlier, and the specific node should be the last to receive the event.

4. Dom Event Flow: The event flow defined by the "DOM2 level event" contains three stages: event capture, in the target phase and the event bubbling phase. (The actual target element will not receive events during the capture phase)

IE does not support DOM event streams, and Opera, Safari, Chrome, and Firefox support event streams.

5. There are several ways to handle the event handler:

1) HTML event handler:

<input type= "text" onclick= "alert (1)"/>;

<input type= "text" onclick= "ShowMessage ()"/>

<script>    function  showmessage () {        alert (1);    } </script>    

2 Disadvantages of this approach: first, when the DOM element is loaded, the bottom JS is not loaded, click Input will error (This is my understanding of a concise sentence summary error), and the second is JS and HTML code tightly coupled. If you change the event handler, you need to change two places: HTML and JavaScript code.

2) DOM0 level event handler:

is to assign a function to the handler property of an event. Today modern is supported for all browsers. The advantages of both simple and browser-style. Properties are usually all lowercase, such as onclick. You can specify an event handler by setting the value of this property to a function. As shown below:

<input type= "button" id= "Btn_test" value= "test"/>

var obtn = document.getElementById ("Btn_test");
Obtn.onclick = function () {
alert (this.id); Btn_test (PS: This in the program refers to the current element )
}

Event handlers that are added in this manner are processed during the bubbling phase of the event flow.

Remove the event handler method specified through the DOM0 level and set the event handler property to null:

Btn.onclick = null; Delete Time handlers

3) DOM2 Level event handler:

The "DOM2 level event" defines two methods for handling the actions of the specified and deleted event handlers: AddEventListener () and RemoveEventListener (). All DOM contains these two methods, and they accept 3 parameters: The event name to process, the function to handle as an event, and a Boolean value. The last Boolean value is true, which means that the event handler is called during the capture phase and, if False, the time handler is called during the bubbling phase.

var obtn = document.getElementById ("Btn_test");

function Test1 () {Console.log ("Test1")}
Obtn.addeventlistener ("click", Test1,false);//bubbling

To remove an event handler method:

Obtn.removeeventlistener ("click", Test1,false);//Can be removed, the anonymous function is not removed.

In most cases, event handlers are added to the bubbling phase of the event stream, which allows for maximum compatibility with various browsers.

4) IE Event Processing program:

IE implements two methods similar to the one in the DOM: Attachevent () and DetachEvent (). Both methods receive the same two parameters, the event handler name, and the event handler function. Because IE only supports event bubbling, event handlers added through Attachevent () are added to the bubbling phase.

var obtn = document.getElementById ("Btn_test");

Obtn.attachevent ("onclick", function () {

Alert (This = = = window); True

});

var obtn = document.getElementById ("Btn_test");

function Test1 () {Console.log ("Test1")}

Obtn.attachevent ("onclick", test1);

Remove the appropriate event handlers:

Obtn.detachevent ("onclick", test1);

5) Cross-browser event handling:

varEventutil ={addHandler:function(element, type, handler) {if(Element.addeventlistener) {//in IEElement.addeventlistener (Type,handler,false);//bubbling                    }                    Else if(element.attachevent) {//in IEelement.attachevent ("on" +type,handler); }                    Else{element["On" + type] =handler; }}, RemoveHandler:function(element, type, handler) {if(Element.removeeventlistener) {//in IEElement.removeeventlistener (Type,handler,false);//bubbling                    }                    Else if(element.detachevent) {//in IEelement.detachevent ("on" +type,handler); }                    Else{element["On" + type] =NULL; }                }                            }                         varOBTN = document.getElementById ("Btn_test"); varHandler =function() {alert (111); } eventutil.addhandler (OBTN,"Click", Handler); Eventutil.removehandler (OBTN,"Click", Handler);

No matter how the time handlers are added to the element, if other methods are not valid, the DOM0-level method is used by default.

First write here, welcome to reprint and forwarding, please indicate the source, if you have help, trouble to help you point to the bottom right corner of the support ~ ~

JavaScript Event Summary (event handler mode)--javascript Advanced Programming Notes