JS Event--suppresses event bubbling and disables default events

Event Object
The event object represents the state of the incident, such as the element in which the event occurred, the state of the keyboard key, the position of the mouse, and the state of the mouse button.
Events are often used in conjunction with functions, and functions are not executed until the event occurs!

One, what is event bubbling

Fires a class of events on an object (such as clicking the OnClick event), and if this object defines a handler for this event, then this event invokes the handler, and if the event handler is not defined or the event returns true, the event propagates to the object's parent object, That is, events propagate from child elements to ancestral elements, from inside to outside until it is processed (all the same events of the parent object will be activated), or it reaches the topmost level of the object, the Document object (some browsers are windows).

Ii. What is the role of event bubbling

(1) Event bubbling allows multiple operations to be centralized (adding an event handler to a parent element to avoid adding event handlers to multiple child elements), which also allows you to capture events at different levels of the object layer.
(2) Let different objects capture the same event at the same time, and call their own proprietary handlers to do their own things, like the Boss command, their employees to do their jobs on the job.

Iii. what to pay attention to

Event bubbling is supported in all browsers we use, that is, events propagate from child elements to ancestral elements, just as bubbles float from the bottom to the surface.
In the so-called standard browser like Firefox,chrome,safari, there is a stage in event propagation, which is the capture phase, in fact, the capture phase is a process completely opposite to the bubbling phase, that is, the event is propagated from the ancestor element to the child elements, to illustrate that in IE, There is no such stage in the Opera browser.

Not all events can bubble. The following events do not bubble: blur, focus, load, unload.

Event capture is different in different browsers and even versions of browsers of the same type. If the Netscape4.0 uses a capture event solution, most other browsers support the bubbling event solution, and the DOM event stream also supports text node event bubbling.

Event captures reach the top level of the target in different browsers or different browser versions also have a difference. In IE6, HTML is a receive event bubbling, and most browsers continue bubbling to the Window object, which is ... body→documen→window.

Blocking bubbles does not prevent the object from default behavior. For example, when the Submit button is clicked, the form data will be submitted, which does not require us to write the program custom.


1. Prohibit event bubbling
function Stopbubble (e) {
If an event object is provided, this is a non-IE browser
if (e && e.stoppropagation)
So it supports the Stoppropagation () method
E.stoppropagation ();
Else
Otherwise, we need to use IE to cancel the event bubbling
Window.event.cancelBubble = true;
}

2. Prohibit default events
Prevent Browser from default behavior
function Stopdefault (e) {
Block default browser action (web)
if (e && e.preventdefault)
E.preventdefault ();
How to block the default action of a function in IE
Else
Window.event.returnValue = false;
return false;
}

JS Event--suppresses event bubbling and disables default events