1. Event Flow: Describes the order in which events are accepted from the page
①, event bubbling flow: That is, the time is first received by the most specific element (the node with the deepest nesting level in the document) and then propagated up to the least specific node (document).
Chestnut: If <body><div><input type= "button"/></div></body> secondary structure, click the button, the default point of the button is the container default point body, HTML is the default point, and the document is the default point.
②, event capture: A less specific node should receive an event earlier, and the most specific node receives the event at the end. Is the way the Netscape browser is handled, in the order that it is just the opposite of the event bubbling sequence supported by IE and other browsers.
2. There are three types of JavaScript event handlers:
①, HTML event handlers, that is, directly in the HTML add onclick and other events, and JS coupling more.
②, DOM0-level event handlers (much more): Take the element out first, and then add an event to its properties called the DOM0-level handler.
It is a more traditional way of assigning a function to a property of an event handler.
Pros: Simple, cross-browser advantage
var Btn2=document.getelementbyid ("btn2");---get the element first, define the object//Get the Btn2 button object
Btn2.onclick=function () {alert (' This is an event added through the DOM0 level! ')}----Let the event appear as an object's property. Add the OnClick property to btn2 Btn2.onclick=null to delete an event
Common advantages of ③, DOM2, and DOM0: Multiple event handlers can be added to an element and executed sequentially.
DOM2 level event handler, IE does not support, IE has a dedicated event handler.
DOM2-level Event handlers: Defines two methods---actions to handle specifying and deleting event handlers.
The AddEventListener ()---Add an event listener and RemoveEventListener () to an element---delete an event. You must pass in the same argument when adding an event "
Three parameter settings; event name, processing method (function), Boolean--false: Indicates that the event handler is called during the bubbling phase (maximum compatibility with the browser), typically set to False;true to invoke event handlers during the capture phase
(events added through the former can only be removed by the latter.) If obj.click= null is not valid) the event name to be processed does not need to be "on"! function does not add "()"
④, 1.IE event handlers: IE also provides similar DOM2-level event handlers
Attachevent () Add Event
DetachEvent () Delete event
A function that receives the same two parameters, the name of the event handler (to write "on"), and the event handler. The reason for not using the third parameter is to remove the Boolean value: IE8 and earlier browser versions only support event bubbling!
⑤, cross-browser event handlers
function Showmes () {
Alert ("Hello world!");
}
var Btn=document.getelementbyid ("btn");
var eventutil={
Add handle
Addhandler:function (Element,type,handler) {
DOM2-level event handlers are performed first
if (Element.addeventlistener) {
Element.addeventlistener (Type,handler,false);
}else if (element.attachevent) {
Then the IE event handler
Element.attachevent ("on" +type,handler);
}else{
It is best to perform DOM0 level event handlers element["onclick"]===element.onclick
element["on" +type]=handler;
}
}
}
Eventutil.addhandler (BTN, "click", Showmes);
3. Event Object
① What is an event object? An object is generated when events on the DOM are triggered
Events Object Event
Event object properties in the DOM
(1), the Type property is used to get event types
(2), the target property is used to get the event target
(3), Stoppropagation () method to block event bubbling
(4), Preventdefault () method to block the default behavior of an event
If a DIV has a button,button and div bound to the Click event, and if the event bubbles, then when the button is clicked, the button's handler is triggered first, then the DIV's handler function is triggered. (from Inside Out)
If sometimes you don't want to bubble up, that is, you don't want div events to be triggered, you need to block event bubbling. Stoppropagation () method
If you need to block the default property jump for a tag, you can use the default behavior of the Block event Preventdefault () method
Event flow and event handlers for DOM event exploration
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
