js代码中在一个对象上触发某类事件(比如onclick事件),如果此对象定义了此事件的处理程序(函数),那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,直至它被处理或者它到达了对象层次的最顶层(document对象),而这个事件的传播过程就叫做冒泡!

通过下面的事例可以详细的对JS中的冒泡事件进行理解!

js冒泡事例:

示例代码:

<h1>我是H标签</h1>
<ul>
    <li>我是li标签</li>
    <li>我是li标签</li>
    <li>我是li标签</li>
</ul>
<script>
    window.onload = function () {
        var li = document.getElementsByTagName('li');
        var ul = document.getElementsByTagName('ul')[0];
        ul.onclick = function () {
            alert('我是ul事件')
        }
        document.body.onclick = function () {
            alert('我是整个document事件')
        }
        for (i = 0; i < li.length; i++) {
            li[i].onclick = function () {
                alert('我是li标签的事件')
            }
        }
    } 
</script>

事件触发:

点击 li 标签,会分别触发 li 标签的事件,ul 标签的事件以及整个documnet的事件,直至li标签的所有上级标签的事件执行完毕为止!

js中的冒泡事件详解

阻止js冒泡事件的方法

js的冒泡事件是可以阻止的,可以参考下面的示例代码!

1、cancelBubble 取消事件处理

<script>
    window.onload = function () {
        var li = document.getElementsByTagName('li');
        var ul = document.getElementsByTagName('ul')[0];
        ul.onclick = function () {
            alert('我是ul事件');
        }
        document.body.onclick = function () {
            alert('我是整个document事件');
        }
        for (i = 0; i < li.length; i++) {
            li[i].onclick = function () {
                alert('我是li标签的事件');
                //添加下面的代码即可阻止后面的冒泡事件
                event.cancelBubble = true;
            }
        }
    } 
</script>

注:

(1)、event.cancelBubble 默认值为false

(2)、event.cancelBubble 的默认值如果为 true,则会取消其后面的代码处理

(3)、cancelBubble不符合W3C标准,并且只支持IE浏览器。

2、使用 stopPropagation() 方法

stoppropagation可以阻止浏览器的冒泡行为,但需要注意 stoppropagation 属于W3C标准,试用于Firefox等浏览器,但是不支持IE浏览器。

<script>
    window.onload = function () {
        var li = document.getElementsByTagName('li');
        var ul = document.getElementsByTagName('ul')[0];
        ul.onclick = function () {
            alert('我是ul事件');
        }
        document.body.onclick = function () {
            alert('我是整个document事件');
        }
        for (i = 0; i < li.length; i++) {
            li[i].onclick = function () {
                alert('我是li标签的事件');
                //添加下面的代码即可阻止后面的冒泡事件
                event.stopPropagation();
            }
        }
    } 
</script>