在js中,“事件冒泡”是什么意思?

JavaScript022

在js中,“事件冒泡”是什么意思?,第1张

事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

即子级元素先触发,父级元素后触发。

js的优点:

在JavaScript这样的用户端脚本语言语言出现之前,传统的数据提交和验证工作均由用户端浏览器通过网络传输到服务器上进行。如果数据量很大,这对于网络和服务器的资源来说实在是一种无形的浪费。而使用JavaScript就可以在客户端进行数据验证。

JavaScript可以方便地操纵各种浏览器的对象,可以使用JavaScript来控制浏览器的外观,状态甚至运行方式,可以根据用户的需要“定制”浏览器,从而使网页更加友好。

JavaScript可以使多种任务仅在用户端就可以完成而不需要网络和服务器的参与,从而支持分布式的运算和处理。

首先要纠正你对事件冒泡的错误认识:默认情况下只要是鼠标事件都会产生冒泡(也就是把事件逐级上报给上级元素,直到页面的顶级元素document),而不是说“用了什么方法才会触发事件冒泡”。同样,所有被冒泡的元素都会自动捕获这个事件,不需要什么特殊的方法,只要添加事件处理过程即可。addEventListener和attachEvent用于绑定事件处理程序,与事件冒泡没有必然联系,不能说“用了addEventListener和attachEvent方法触发事件冒泡”。

请看下面这个简单例子,或许能让你加深理解:

<script>

function test(e){

    var t=(e||window.event).target

    if(t&&t.id&&t.id=="me"){

        alert(t.innerHTML)

    }

}

</script>

<div onclick="test()">

    <div>

        <div>

            <div>...我是打酱油的</div>

            <div id="me">...我是主角,点我!!!</div>

            <div>...我是来看热闹的</div>

        </div>

        <div>..我是工作人员</div>

    </div>

    <div>.我负责发盒饭</div>

</div>

最底层的元素点击事件,会冒泡给最外层的元素并由它来捕获和处理。所以从形式上来看事件冒泡与普通的事件绑定是差不多的,只是绑定的对象不同而已。利用事件冒泡(或者说事件委托)的优势在于可以只用一个事件处理过程就能捕获所有子元素的事件,这对于动态添加的子元素好处更大,因为他们不需要动态绑定事件了。