JavaScript Learning Notes (iv) event bindings, compatibility issues for--JS events

Event Capture: The event starts from the root node and goes to the child node, and if the node binds the event action, it executes the action and continues down. Event Bubbling: The event is dispatched to the node by the child node, and if the node binds the event action, the action is executed and then continues to go up. How do I bind events and remove events? Because Internet Explorer does not support event capture, event bubbling is supported only. As a result, other standards-compliant browsers use a function binding and removal defined by the web, and IE has its own set of execution rules. The following separately summarizes the Internet and IE binding mechanism: 1, the event binding under theAdd Event- AddEventListener () Remove Event- RemoveEventListener () Stop event bubbling- even.stoppropagation () it contains 3 parameters: event name (such as click, mouseover-not on), function, bubbling, or captured Boolean value (captured to true, bubbling to false.) Generally we use false)For example: Write an event switcher:When you click the div with the id "box", the red color is alternating. (It can also be concluded that the event can pass this) ★ Summary: ①addeventlistener () can assign multiple processing functions to an element, rather than overwriting; "such as: Window.addeventlistener (" load "), function () {alert (" Hi ");},false);Window.addeventlistener ("load"), function () {alert ("Goodbye");},false);//will pop up Hi GoodBye. Without being overwritten " ② The same function will be masked. "such as: Window.addeventlistener (" Load ", init,false);Window.addeventlistener ("Load", init,false);function init () {alert ("Hi");} will only pop up once Hi " ③ can pass this, see above example event switcher ④ Add an extra method that will not be overwritten 2, the event binding under IEAdd Event- attachevent () Remove Event- detachevent () Stop event bubbling- window.event.cancelBubble = true; since IE does not support capture, it requires only 2 parameters: event name (to be added on), function nameFor example:★ Summary:The ①ie event binding resolves the overwrite problem, and the order is reversed, as in the example above② The same function is not masked, as in the above example③ cannot pass this. "Example: Window.attachevent (" Unload ", function () {var box = document.getElementById ("box");box.attachevent ("onclick", function () {alert (this ===window); Gets true, cannot pass this}}); "④ Add additional methods and will not be overwrittenExample: Window.attachevent ("onload", function () {var box = document.getElementById ("box");box.attachevent ("onclick", function () {alert ("Hi");         });box.attachevent ("onclick", function () {alert ("Hello");         }); });//pop-up Hi, Hello " ? Second, the full range of Internet and IE compatibility1. Add events across browsers://obj equivalent to window,type equivalent to load, fn equals function2. Cross-browser removal of events:3. Get target objects across browsers: additional additions to the event object:1. Under the MouseOver and Mouseout events, get the DOM objects that are moved in and out from, using the Relatedtarget propertyie, move in with Fromelement, move out with toelement Example: Compatible code:function Gettarget (evt) {var e = evt | | window.event;if (e.srcelement) {//IE underif (E.type = = "MouseOver") {return E.fromelement;} else if (E.type = = "Mouseout") {return E.toelement;} else if (e.relatedtarget) {//return E.relatedtarget;  } } } 2. Block default behavior (example: Block open hyperlinks)the use of Preventdefault () method;Use ReturnValue = False method under IE; Example: Code compatibility:function Predef (evt) {var e = evt | | window.event;if (e.preventdefault) {E.preventdefault ();}else {E.returnvalue = false; }} 3. Context Menu Event: Use ContextMenu event to modify right click to appear the specified menu.  Example: function Predef (evt) {var e = evt| | window.event;if (e.preventdefault) {E.preventdefault ();}else {E.returnvalue=false;           }        } addevent (window, "Load", function () {var text = document.getElementById ("text");addevent (text, "ContextMenu", function (evt) {predef (EVT); Block Menu Popupvar menu = document.getElementById ("menu");var e = evt | | window.event;menu.style.left = e.clientx+ "px"; Right-click menu appears with mousemenu.style.top = e.clienty+ "px"; menu.style.display = "block"; Pop Up the modified menu addevent (document, "click", Function () {Menu.style.display = "None"; Do not display the default menu box})})})       

JavaScript Learning Notes (iv) event bindings, compatibility issues for--JS events