JavaScript event bubbling, event capturing and blocking default event code examples

Talking about JavaScript events, the three topics of event bubbling, event capturing, and blocking default events are difficult to avoid whether in interviews or in daily work.

Bubbling Chapter

Let’s take a look at an example first:

js:

var $input = document.getElementsByTagName("input")[0];
        var $p = document.getElementsByTagName("p")[0];
        var $body = document.getElementsByTagName("body")[0];

        $input.onclick = function(e){
            this.style.border = "5px solid red"
            var e = e || window.e;
            alert("red")
        }
        $p.onclick = function(e){
            this.style.border = "5px solid green"
            alert("green")
        }
        $body.onclick = function(e){
            this.style.border = "5px solid yellow"
            alert("yellow")
        }

html:

<p>
        <input type="button" value="测试事件冒泡" />
    </p>

pop up “red” in turn ,"green","yellow".

Your original intention is to trigger the button element, but it is triggered together with the event bound to the parent element. This is 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();
}

At this time, only "red" will pop up

because the event bubbling is prevented.

Capture

Since there is bubbling of events, there can also be capture of events. This is a reverse process. The difference is from the top element to the target element or from the target element to the top element.

Look at the code:

$input.addEventListener("click", function(){
    this.style.border = "5px solid red";
    alert("red")
}, true)
$p.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)

At this time, "yellow", "green", and "red" pop up in sequence.

This is the capture of events.

If you change the third parameter of the addEventListener method to false, it means that it is only triggered during the bubbling stage, and the pop-ups are in order: "red", "green", "yellow".

Prevent default events

There are some html elementsDefault behavior, such as a label, there will be a jump action after clicking; submit type input in the form There is a default submission jump event; the reset type input has reset form behavior.

If you want to prevent these browser default behaviors, JavaScript provides you with a way.

The code first

var $a = document.getElementsByTagName("a")[0];
$a.onclick = function(e){
    alert("跳转动作被我阻止了")
    e.preventDefault();
    //return false;//也可以
}

<a href="http://www.nipic.com">昵图网</a>

The default event is gone.

Since return false and e.preventDefault() have the same effect, are there any differences between them? Of course there is.

Only in HTML event attributes and DOM0 level event handling methods can the default behavior of the event host be organized by returning return false.

Note: The above are based on the W3C standard and do not take into account the different implementations of IE.

The above is the detailed content of JavaScript event bubbling, event capturing and blocking default event code examples. For more information, please follow other related articles on the PHP Chinese website!