JavaScript events: Event bubbling, event capture, blocking default events

Talking about JavaScript events, event bubbling, event capture, and blocking default events are three topics that can be difficult to avoid, whether in an interview or in a normal job.

Bubble article:

Let's take a look at some examples:

Js:

        var$input = document.getElementsByTagName ("input")[0]; var$div = document.getElementsByTagName ("Div")[0]; var$body = document.getElementsByTagName ("Body")[0]; $input. onclick=function (e) { This. Style.border ="5px Solid Red"            varE = e | |window.e; Alert ("Red")} $div. onclick=function (e) { This. Style.border ="5px Solid Green"Alert ("Green")} $body. onclick=function (e) { This. Style.border ="5px Solid Yellow"Alert ("Yellow")        }

Html:

    < Div >        <  type= "button"  value= "test event bubbling"/>    </  div>

Pop up "red", "green", "yellow" in turn.

Your intention is to trigger the button, which is triggered along with events bound by the parent element. This is the event bubbling.

If the event binding to input is changed to:

$input. onclick = function (e) {    This.style.border = "5px solid red"    var e = e | | window.e;    Alert ("Red")    e.stoppropagation ();}

This time it will only pop up "red"

Because events are blocked from bubbling.

Capture article:

Since there are events bubbling, there can also be events captured, which is an opposite process. The difference is from the top-level element to the target element or from the target element to the top-level element.

Look at the code:

$input. AddEventListener ("click", Function () {    This.style.border = "5px solid red";    Alert ("Red")}, True) $div. AddEventListener ("click", Function () {    This.style.border = "5px solid green";    Alert ("Green")}, True) $body. AddEventListener ("click", Function () {    This.style.border = "5px solid yellow";    Alert ("Yellow")}, True)

This time in turn pops up "yellow", "green", "Red".

This is the capture of the event.

If the third parameter of the AddEventListener method is changed to false, it is triggered only in the bubbling phase, followed by the following: "Red", "green", "yellow".

To block the default event chapter:

There are some HTML elements of the default behavior, such as a tag, click on the Jump action, the form form of submit type input has a default commit jump event; reset type input has reset form behavior.

If you want to block these browsers from default behavior, JavaScript provides you with a method.

First on the code

1 var $a = document.getElementsByTagName ("a") [0]; 2 function (e) {3     alert ("Jump action was blocked by me")4    e.preventdefault (); 5     returnfalse; // can also 6 }

<a href= "http://www.nipic.com" > Network </a>

The default event is not.

Since return false and E.preventdefault () are the same effect, do they have a difference? Of course.

The default behavior of an event host can be organized only in HTML event properties and DOM0-level event handling methods by returning a return of false.

Note: The above are based on the standard, not considering the different implementations of IE.

JavaScript events: Event bubbling, event capture, blocking default events