js 事件流(冒泡、捕获)与绑定事件方法

最新推荐文章于 2024-09-11 11:02:35 发布

六鼎

最新推荐文章于 2024-09-11 11:02:35 发布

阅读量547

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/qq309364574/article/details/119785292

版权

本文详细介绍了JavaScript中的事件流，包括冒泡、捕获和DOM事件流，并讲解了DOM0级、DOM2级以及IE绑定事件的方法，以及如何实现跨浏览器事件绑定的兼容性处理。同时，讨论了事件对象的特性及其在阻止事件默认行为和终止事件传播中的应用。

摘要由CSDN通过智能技术生成

一：事件流

事件流描述的是从页面中接收事件的顺序。但 IE 的事件流是事件冒泡流，而 Netscape Communicator 的事件流是事件捕获流。

1.事件冒泡

IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
在这里插入图片描述
如果click页面中的div元素，先是触发div上的绑定事件，然后是body上的绑定事件，再然后是html，知道document对象。

IE9、Firefox、Chrome 和 Safari 将事件一直冒泡到 window 对象。

2.事件捕获

事件捕获与事件冒泡相反，认为最不具体的节点应该更早接收事件。
在这里插入图片描述
如果click页面中的div元素，先是由document节点接收到事件，然后是html，再然后是body触发事件，最后是div元素触发事件。

IE9、Safari、Chrome、Opera和 Firefox 目前也都支持这种事件流模型，但是都是从window对象开始接收事件。

3.DOM事件流

DOM2级事件规定，事件流包括3个阶段，(捕获阶段、目标阶段、冒泡阶段)。
在这里插入图片描述
用户操作事件开始，先是捕获，从document节点开始，到div节点之前，捕获结束，开始目标阶段，表示div节点接收到事件，然后开始冒泡。

“DOM2 级事件”规范明确要求捕获阶段不会涉及事件目标，就是在捕获阶段不会触发绑定事件。在冒泡阶段会触发绑定事件（目标阶段属于冒泡阶段），如上图点击div元素，会在4，5，6，7触发绑定事件，1，2，3则不触发

IE9、Safari、Chrome、Firefox 和 Opera 9.5 及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两个机会在目标对象上面操作事件。IE8不支持DOM事件流。

二.绑定事件

1.DOM0级绑定事件

    //输出Click Me1。this为绑定事件目标元素
    <input type="button" value="Click Me1" onclick="console.log(this.value)" />

	//输出Click Me2。event为绑定事件节点对象
    <input type="button" value="Click Me2" onclick="console.log(event.target.value)" />
		
    <input type="button" value="Click Me3" onclick="clickMe3(event)" />

	<input type="button" value="Click Me4" id="clickMe4"/>
    <script>
        function clickMe3 (event){
   
        	console.log(this)   //this指向window
            console.log(event.target.value)   //输出Click Me3。event.target为绑定事件目标元素
        }

        var btn = document.getElementById("clickMe");
        btn.onclick = function(event){
   
            console.log(this)   //this指向绑定元素
            console.log(event)