# events > The interaction between JavaScript and HTML is implemented through events. An event is a specific interaction moment that occurs in a document or browser window, and you can respond to related actions by listening for specific events. * * Image reference: UI events** # event flow is primarily the event bubbling stream presented by the IE team at the time, while Netscape presents the event capture stream, which can be defined using DOM2 level *addeventlistener () * method to handle invoking an event handler during the bubbling or capturing phase. # # Event Bubbling is when the event starts with the most specific element (the deepest nested node in the document) and then propagates up to the less specific node. [1] (http://images2015.cnblogs.com/blog/798818/201611/798818-20161110170047358-574284438.png) # # Event capture-the outermost element receives an event earlier, and the most specific element should be the last to receive the event. Event capture is intended to capture an event before it reaches its intended destination. [2] (http://images2015.cnblogs.com/blog/798818/201611/798818-20161110170115295-931887009.png) # # DOM Event stream with "DOM2 level event" The specified event flow consists of three phases: the event capture phase, the target stage, and the event bubbling phase. The first occurrence is the event capture, then the actual target receives the event, and the last stage is the bubbling phase. [3] (http://images2015.cnblogs.com/blog/798818/201611/798818-20161110170210530-1044188898.png) The AddEventListener function receives three parameters, the event name to be processed, the function that acts as the event handler, and a Boolean value, and the last Boolean value, if True, indicates that the event handler is called in the non-return phase, or false to indicate that the event handler is called during the bubbling phase. Event capture: "'//htmlClickvar $body = Document.queryselector ("Body"), $a = Document.queryselector (". A"), $b = Document.queryselector (". B"), $c = doc Ument.queryselector (". C"); $body. AddEventListener ("click", Function () {console.log (this);},true); $a. AddEventListener ("click", Function () {console.log (this);},true); $b. AddEventListener ("click", Function () {console.log (this);},true); $c. AddEventListener ("click", Function () {console.log (this);},true); "click button, then!" [4] (http://images2015.cnblogs.com/blog/798818/201611/798818-20161110170228280-1767398130.png) Event bubbling: "' $ Body.addeventlistener ("click", Function () {console.log (this);},false); $a. AddEventListener ("click", Function () {console.log (this);},false); $b. AddEventListener ("click", Function () {console.log (this);},false); $c. AddEventListener ("click", Function () {console.log (this);},false); "click button, then!" [5] (http://images2015.cnblogs.com/blog/798818/201611/798818-20161110170246452-1179305889.png) The above code is supported in IE9 and other modern browsers ( Test page). IE8 and earlier versions do not support DOM event streams only event bubbling. So we have two stages to CK on table the target object., but for compatibility reasons, it is more common to use bubbling. # event handler events are some kind of action performed by the user or the browser itself, and the function that responds to an event is called a * * Event handler (or event listener) * *. # # HTML event handler is an inline handler that starts with "on": ' "Although convenient, but there are a lot of problems, first of all, there is a jet lag problem, because the user may appear in the HTML element on the page to trigger the corresponding event, but then the event handler may not have the execution conditions The other drawback is that the scope chain of the extended event handler causes different results in different browsers, and the last drawback is that HTML is tightly coupled to the JavaScript code, and if you want to change the event handler, you need to change two places. # # # DOM0 event handlers The traditional way to specify event handlers through JavaScript is to assign a function to an event handler property. Each element, including window and DOCUEMNT, has its own event handler properties, which are usually all lowercase: ' ' var btn = document.getElementById (' mybtn '); Btn.onclick = function () {alert ("Clicked");} ' the event handlers added in this way are processed during the bubbling phase of the event stream. # # DOM2 Event handler ' DOM2 level event ' defines two methods for handling the actions of the specified and deleted event handlers: AddEventListener () and RemoveEventListener (). All DOM nodes contain both methods, which are useful for capturing and bubbling events above. The main benefit of adding event handlers using the DOM2-level method is that you can add multiple event handlers. # # IE event handler IE is implemented in the following ways: Attachevent () and DetachEvent (). Both methods receive the same two parameters: an event handler name and an event handler function. Event handlers added through Attachevent () are added to the bubbling phase: ' var btn = document.getElementById ("mybtn"); Btn.attachevent ("onclick", function () {alert ("Clicked");}) "The table behavior here is the onclick instead of the DOM in the AddEventListener () method of the Click , the main difference between using attachevent () in IE and using DOM0-level methods is the scope of the event handler, where the event handler runs within the scope of the element to which it belongs, with the DOM0-level method, and in the case of the Attachevent () method, The event handler runs in the global scope, so this is equal to window ' var bTN = document.getElementById ("mybtn"); Btn.attachevent (' onclick ', function () {alert (this = = window);//true}); An event object that triggers an event on the DOM generates an event object, all of which support the event object, but are supported in different ways. # # The Event object in the DOM contains properties and methods related to the specific event that created it. The types of events that are triggered are different, and the available properties and methods are different. However, all events have member properties for the following table. Properties/Methods | Type | Read/write | Description | | :----: |:----:| :----: | :----: | | Bubbles | Boolean | Read Only | Indicates whether the event is bubbling | | cancelable | Boolean | Read Only | Indicates whether the default behavior of the event can be canceled | | Currenttarget | Element | Read Only | The element whose event handler is currently processing the event | | defaultprevented | Boolean | Read Only | True indicates that Preventdefault () has been called DOM3 new | | Datail | Integer | Read Only | Event-specific Details | | Eventphase | Integer | Read Only | The stage in which the event handler is invoked: 1 for the capture phase, 2 for the bubble stage in Target 3 | | Preventdefault () | function | Read Only | Cancels the default behavior of the event. If cancelable is true, you can use this method | | Stopimmediatepropagation () | function | Read Only | Cancels further capture or bubbling of events while preventing any event handlers from being called (New at DOM3 level) | | Stoppropagation () | function | Read Only | Cancel the event for further capture or bubbling, and if Bubbles is true, you can use this method | | Target | Element | Read Only | Objective of the Event | | istrusted | Boolean | Read Only | Returns a Boolean value that indicates whether the current event was triggered by user behavior or generated by a script | | Type | string |Read Only | The type of event being triggered | | View | Abstractview | Read Only | The abstract view associated with the event. Equivalent to the Window object where the event occurred | More detailed documentation can be seen here inside the event handler, the object this is always equal to the value of Currenttarget, and Target contains only the actual target of the event. If the event handler is assigned directly to the target element, the This,currenttarget and target contain the same values. Depending on the attributes that the event has, you can manipulate the event more carefully. In this event, we can tell which events can bubble up. The first is the bubbling event, and if you only need to trigger the specific node without bubbling into the wrapping layer, you can use a series of properties related to the bubbling behavior, for example: ' ' in this div, if div and a have a listener click event, Then when you click on the A tab (the default event stream is in the captured phase), a Click event is triggered first, then the DIV's Click event, and finally the default event for the a tag. If you do not want to bubble, that is, click a to trigger only a click event, you can use the Stoppropagation () method: "' var $a = document.queryselector (" a "); $a. AddEventListener ("click", Function (event) {if (event.bubbles) {event.stoppropagation ();}}); "Can also be used to remove nodes directly from the handler, as well as to prevent bubbling. Of course, sometimes we do not want to jump the page, but to execute a custom script, then you can use the Preventdefault () method: "" var $a = document.queryselector ("a"); $a. AddEventListener ("click", Function (event) {if (event.bubbles) {event.preventdefault ();//Do something}}); Sometimes we may take over other people's code, without knowing the specific code, if only a single independent event needs to be modified, you can use the Stopimmediatepropagation () method before running the old JS code. "' $a. AddEventListener (' click ', Function (event) {Event.preventdefaulT (); Event.stopimmediatepropagation (); Do something}) $a. AddEventListener ("click", Function (event) {alert ("This is a tag");}); Of course, bubbling is not a bad thing, because the scene is a lot of change, in some scenarios, bubbling is also very useful, such as event Agent (delegation). Sometimes we need to attach to the generated node, the event always need to find the element, and then register, to be able to listen to events, then for these generated nodes, of course, the node can be re-registered again after the event. But what if a node with the same tag is generated? Then we need not only to remove the previously registered event, but also to rebind the previous token, otherwise it will be triggered two times. At this time, the event agent can solve this kind of problem. According to the DOM event stream, we can know that when a node bubbles up, it can bubble up all the time, so we can do the event proxy to the node's parent, according to the Event.target property, we can know * * who is pointing to the object triggering the event. Instead of using cumbersome re-registration events, you can manipulate child elements directly. As in Jquery,zepto, there are processing methods for event proxies, which will continue to be covered in the next chapter. "' $div. AddEventListener (" click ", Function (event) {alert (" This is the outer layer "), if (event.target) {event.target.style.visibility = ' Hidden '; } }); "' bubbling also has side effects, and the Mouseout event causes an advance trigger to leave the internal node, so jquery customizes the MouseEnter and MouseLeave events, and Zepto has the corresponding events. * The event object will only be present during the execution of a handler, and the event object will be destroyed (closed) * # # # # Event objects in IE have access to events in IE, especially ie6~8 note, When you add an event handler by using the DOM0-level method, the events object exists as a property of the Window object. ' var btn = document.getElementById (' a '); Btn.onclick = function () {var event = window.event; alert (Event.type); "Click"} "and the event object in IE will contain the properties and methods of the following table: | Properties/Methods | Type | Read/write | Description | |:----: |:----: |:----: |:----: | | cancelbubble | Boolean | Read/write | The default value is false, but setting it to true cancels event bubbling (as with the Stoppropagation () method in the DOM) | | returnvalue | Boolean | Read/write | The default value is False, but it is set to False to cancel the default behavior of the event (as with the Preventdefault () method in the DOM) | | srcelement | Element | Read Only | The target of the event (same as the target property in the DOM) | | Type | String | Read Only | The type of event being triggered | # # Event type not table # Event simulation combined with jquery and Zepto source summary. Some use cases: event
Javascirpt Event details-native Event Basics (i)
