JavaScript基础(二) 事件冒泡与事件捕获

废话不多说直接上最好的理解图,可以从图里看出,事件冒泡和事件捕获是一个相反的过程。

事件冒泡和事件捕获过程

1.什么是事件冒泡?

个人理解就是作用在子级的事件同时传递作用在其祖宗的身上,事件往上级传递了,就像在水里的很小的泡泡慢慢变大冒了上去。

代码描述

<div onclick="prop('div')">
    <ul onclick="prop('ul')">
        <li onclick="prop('li')">
            <button onclick="prop('button')">
                    事件冒泡
            </button>
        </li>
    </ul>
</div>
<script>
    function prop(string){
        console.log(string);
    }
</script>
点击按钮后事件冒泡效果演示

2.事件冒泡的作用?

当子元素过多时,且事件触发的功能相同时,可以利用冒泡在父级设定事件触发的功能函数,触发子元素所需事件功能,以至于一劳永逸。

代码描述

<div>
    <ul onclick="prop('button be clicked')">
        <li>
            <button>
                事件冒泡
            </button>
        </li>
        <li>
            <button>
                事件冒泡
            </button>
        </li>
        <li>
            <button>
                事件冒泡
            </button>
        </li>
        <li>
            <button>
                事件冒泡
            </button>
        </li>
    </ul>
</div>
<script>
    function prop(string) {
        console.log(string);
    }
</script>
利用事件冒泡

3.什么是事件捕获?

就是跟事件冒泡相反的,父元素先接受到事件然后一级一级传递到子元素。但还是拷贝一下其他人的概念描述记录一下。

事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)

代码描述

<div id="div">
<ul id="ul">
    <li id="li">
        <button id="button">
            事件捕获
        </button>
    </li>
</ul>
</div>

<script>
var div =document.getElementById("div");
var ul =document.getElementById("ul");
var li =document.getElementById("li");
var button =document.getElementById("button");

div.addEventListener("click",function(){
    console.log("div");
},true);

ul.addEventListener("click",function(){
    console.log("ul");
},true);

li.addEventListener("click",function(){
    console.log("li");
},true);

button.addEventListener("click",function(){
    console.log("button");
},true);

</script>
点击事件捕获按钮事件捕获效果演示

※为什么不用onclick去写事件捕获了?

因为,onclick只支持事件冒泡,不支持事件捕获!但是addEventListener的第三个参数如果设为true则为事件捕获时发生,false则为冒泡时。

5.怎么阻止和解决事件冒泡?

利用 event.stopPropagation()

代码示例

<div onclick="prop('div',event)">
    <ul onclick="prop('ul',event)">
        <li onclick="prop('li',event)">
            <button onclick="prop('button',event)">
                    事件冒泡
            </button>
        </li>
    </ul>
</div>
<script>
    function prop(string,event){
        console.log(string);
        event.stopPropagation();
    }
</script>
阻止事件冒泡效果

至于网上说的return false方法试了,onclick是不行的。

总结:事件冒泡和事件捕获是一个相反的过程。首先执行事件捕获再执行事件冒泡(无论监听顺序的先后)。使用event.stopPropagation(),来阻止冒泡。

发表评论

电子邮件地址不会被公开。 必填项已用*标注