First, the difference between mouseover and mouseenter
mouseover: As long as the mouse pointer moves into the element bound to the event or its child elements, the event will be triggered.
mouseenter: The event will only be triggered when the mouse pointer moves into the element bound to the event.
In other words, if an element has no child elements, then the effect of binding the mouseover or mouseenter events on the element is no different. Each time the mouse moves into the element, it will only trigger an event; if the element bound to the mouseover event has child Element, then each time you move in the element, an event is triggered (including moving in from the outside and moving in from the child element), and when you move in the child element, an event is also triggered.
One is that the mouse can automatically trigger on the bound element or child element, and the other is that it must move the bound element to trigger
1. Mouseover and mouseout will have event bubbling, which means that the event will be triggered when the mouse moves in or out of the child element or parent element of the current element.
2. The mouseenter and mouseleave events will not bubble. It still means that when the mouse moves in and out, the child or parent elements of the single-label element will not trigger the event.
Second, the mechanism of event propagation (bubbling and capture), using code to verify, the difference between event bubbling and event capture
Event capturing: When the mouse clicks or triggers a dom event, the browser will start the event propagation from the root node from the outside to the inside, that is, the child element is clicked, if the parent element registers the corresponding event through the event capturing method , Will first trigger the event bound by the parent element.
Event bubbling (dubbed bubbling): contrary to event capture, the event bubbling sequence is to propagate events from inside to outside until the root node
Event bubbling: Multiple elements are nested and have a hierarchical relationship. These elements are registered for the same event. If the event of the element inside is triggered, the event of the element outside is automatically triggered. From the inside out.
Event capture: Multiple elements are nested and have a hierarchical relationship. These elements are registered with the same event. If the event of the element inside is triggered, the event of the element outside is automatically triggered. From outside to inside.
addEventListener ("event type without on", "event handler function", "control event phase") In the event control phase: false: bubbling phase true: capturing phase
e.eventPhase judging the event phase (bubbling and capturing cannot occur at the same time) )
3. The default behavior of blocking events, can event bubbling and event capturing be prevented? How to prevent? To
prevent the propagation of events:
• In W3c, use the stopPropagation () method
• Set cancelBubble = true under IE;
during the capture process stopPropagation (); After that, the subsequent bubbling process will not happen ~
Prevent the default behavior of events, such as jumping
after clicking <a> ~ • In W3c, use the preventDefault () method;
• Set window.event.returnValue = false in IE;
1.setInterval of this point
setInterval point of this is window
2. how to set custom attributes
the custom attributes: element.setAttributet ( "Properties") set properties
3. how to prevent the event from bubbling to prevent the event from bubbling: e.stopPropagation () ; Google Firefox to prevent bubbling events
e.cancelBubble = true; IE8 and previous versions of browsers to prevent bubbling