JavaScript Advanced Programming: Chapter 13th events

The interaction between JavaScript and HTML is implemented through events.

I. Flow of events

First, we need to understand the concept of event flow . When we click on a button, we also click on the container element of the button, and even click the entire event. The event flow description is the order in which events are received from the page. There are two ways to receive events in a mainstream browser. One is the event bubbling stream proposed by IE, and the other is the event capture Stream proposed by Netscape. As the name implies, the event bubbling stream is a gradual upward index of the DOM tree from the smallest element being clicked, while the idea of event capture is that less specific nodes first catch the event, and then the event goes down along the DOM tree and continues to propagate to the actual target of the event.

Since older browsers do not support the event capture model, it is recommended that developers use event bubbling whenever possible and use event capture with special needs.

Second, event processing procedures

　　An event is an action performed by the user or browser itself, such as Click,load,mouseover, which is the name of the event, and the function that responds to an event is called an event handler (or event listener). The name of the event handler starts with on, and Onclick,onmouseover believes everyone is quite familiar with it.

2.1 HTML Event handlers

  <inputtype= "button"value= "click"onclick= "alert (&quot;click!&quot;)">//click!  <inputtype= "button"value= "Click2"onclick= "alert (event.type)">//click  <inputtype= "button"value= "Click3"onclick= "alert (this.value)">//click3

After you specify an event handler, you create a function that encapsulates the attributes of the element. There is a local variable event in this function, which is the event object . There is also a local variable this, which equals the target element of the event.

Because HTML event handlers make HTML and JavaScript code tightly coupled, many developers abandon HTML event handlers and instead use JavaScript to specify event handlers.

2.2 DOM0 Level Event handlers

Simply put, in JS, a function is assigned to the event handler property of an element. At this time, the event handlers developed using the DOM0-level method are considered elements of the method . Therefore, the event handler at this time is run in the scope of the element , that is, any properties and methods of the element can be accessed through this in the event handler.

var btn = document.getElementById ("btn"function() {       //  At this point the OnClick event handler is the method of the element  alert (this. Value);              }

The DOM0-level event handler is declared by assigning a reference to the function instance to the properties of the DOM element.

The disadvantage of DOM level No. 0 is that properties are used to store references to functions that act as event handlers, so each element can only register one event handler at a time for any particular event type.

2.3 DOM2 Level Event handlers

The DOM level 2nd event model (also known as a listener) is designed to address these types of problems. Each DOM element defines a method named AddEventListener () that attaches an event handler (listener) to an element. The format of this method is as follows: AddEventListener (enenttype,listener,usecapture);

With DOM2-level handlers, we can set up multiple event handlers for the same event type on the same element.

2.4 IE Event handlers

IE implements two methods similar to DOM: Attachevent () and DetachEvent (). Note that the arguments in the incoming attachevent are "onclick", not "click" in the DOM method. The main difference between using the attachevent () and DOM0-level methods in IE is the scope of the time-handlers. This method runs in the global scope, so this is equal to window, which is important when writing cross-browser code. as with attachevent () and Addeventlisterner (), you can add event handlers to the element multiple times. But the difference is that the former executes the program from the back, and the latter is the sequential execution.

Third, the event object

The event object contains all the information related to the event. All browsers support event objects, but they are supported in different ways.

3.1 Event objects in the DOM

A DOM-compatible browser will pass an events event into the event handler . Regardless of the method used to specify the event handler (DOM0 or DOM2 level).

 var  btn = document.getElementById ("mybtn"  /*  dom 0-level method specifies an event handler  */ btn.onclick  = function   /*  dom 2-level method specifies an event handler  */ btn.addeventlistener ( click, function   );  

Inside an event handler, there are always three objects: this, Target, Currenttarget. Where this and currenttarget contain the same value-the target element to which the event handler is specified, and target contains the actual target of the event. When an event handler is assigned directly to the target element, this, target, and currenttarget contain the same values.

varBTN = document.getElementById ("mybtn"); Btn.onclick=function(event) {Console.log (Event.target== This);//trueConsole.log (Event.currenttarget = = This);//true};/*If the event handler exists in the parent node of the button*/varBODY =Document.body;body.onclick=function(event) {Console.log (Event.target== This);//the target object contains the BTNConsole.log (Event.currenttarget = = This);//all contain body};

The Stoppropagation () method can be used to immediately stop the propagation of an event in the DOM hierarchy, that is, to cancel further event capture or bubbling, Thus avoiding the event handlers on the Document.body, as shown in the following example, when clicking Btn, the body event handler is not triggered because event bubbling is canceled in time.

var btn = document.getElementById ("mybtn"); var body =function(event) {  Console.log ("BTN was clicked!" );   function (event) {  console.log ("body was clicked");};

3.2 Event objects in IE

The first need to detail is that there is no event.target in IE, but event.srcelement; Firefox supports target only, and chrome two is supported. It is not necessarily possible to get the element that is currently being triggered by using this, so programmers are advised to use target and srcelement to get the destination element.

In addition, if you use DOM level 0 to develop an event handler in IE, the events object exists as a property of the Window object. It needs to be called by window.event, and if you use Attachevent to bind the event, the event object is passed in as a parameter to the handler.

Iv. Types of events

There are many types of events that can occur in a Web browser, different event types have different information, and "DOM3-level events" Specify the following types of events.

UI events, focus events, mouse events, wheel events, text events, keyboard events, composite events, change events. Each event type contains a variety of events, not too much elaboration here, preferably in the actual application of the selection of important memories.

Here is to highlight the HTML5 event.

1.contextmenu Event--a menu for customizing the right-click Popup.

2.beforeunload event--to prevent page uninstallation

3.pageshow Event--triggered when the page is displayed. If the page reloads, start load, then start pageshow; If the page is from the cache, the pageshow is immediately triggered.

V. Memory and performance

The number of event handlers added to the page will directly affect the overall performance of the page. Because the browser must specify all event handlers in advance to access the DOM in large numbers, the interaction time of the entire page is delayed.

too many event handlers "The solution to the problem is The event delegate. Event Delegation takes advantage of event bubbling, specifying only one event handler to manage all events of a certain type.

In addition, you can remove event handlers when you don't need them. When the DOM with the event handler is removed (for example, removechild () or innerHTML), the event handlers added to the element cannot be reclaimed. Therefore, when you know that an element is about to be removed, it is best to manually remove the event handler (Btn.onclick=null;). and remove all event handlers for the page before the browser unloads the page (unonload).

VI. Simulation Events

three steps to simulate an event: 1, create the event object, 2, initialize the events object, 3, trigger the event.

JavaScript Advanced Programming: Chapter 13th events