DOM -- 重新认识事件

最新推荐文章于 2024-06-08 16:17:53 发布

chen_晨风

最新推荐文章于 2024-06-08 16:17:53 发布

阅读量667

点赞数

分类专栏： # DOM &BOM 文章标签：事件流绑定事件兼容处理事件对象事件委托滚动事件

本文链接：https://blog.csdn.net/qq_37674616/article/details/82470350

版权

本文详细介绍了DOM中的事件流，包括冒泡事件流、捕获事件流和DOM事件流，并探讨了事件处理程序的不同实现，如DOM0级和DOM2级事件处理。同时，讲解了事件对象在非IE8以下和IE8以下的差异，以及事件委托的概念和应用场景。此外，还列举了各种事件类型，如UI事件、焦点事件、鼠标事件等，以及相关的浏览器兼容性处理。

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

版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载，转载时请注明原文地址:https://blog.csdn.net/qq_37674616/article/details/82470350

事件

事件，就是文档或浏览器窗口中发生的一些特定交互瞬间。
事件的三要素

事件目标

事件处理程序

事件对象
例如 btn.function(event){} 对该用事件来代码分析，则 btn为事件目标，事件处理程序为 function函数，事件对象 event

事件流

事件流描述的是从页面中接收事件的顺序。事件流可分为冒泡事件流和捕获事件流。

冒泡事件流

该事件流又称IE事件流,该事件流是从内向外传播(即逐级向上传播)

下图此时事件会按照如下顺序传播:
handle1 -->handle2 -->handle3 -->handle4

				<html>
					<head>
					 	<title></title>
					</head>
					<body>
					 	<div id="myDiv">Click Me</div>
					</body>
				</html> 
				<script>
					div.onclick=handle1;
					body.onclick=handle2;
					html.onclick=handle3;
					document.onclick=handle4;
					function handle1(){}
					function handle2(){}
					....
				</script>

捕获事件流

该事件流又称NetScape Communicator(网景).
思想：是不太具体的节点应该更早接受到事件，而最具体的节点应该最后接受到事件。即事件是从外到内传播

此时事件会按照如下顺序传播:
handle4 -->handle3 -->handle2 -->handle1

				<html>
					<head>
					 	<title></title>
					</head>
					<body>
					 	<div id="myDiv">Click Me</div>
					</body>
				</html> 
				<script>
					div.onclick=handle1;
					body.onclick=handle2;
					html.onclick=handle3;
					document.onclick=handle4;
					function handle1(){}
					function handle2(){}
					....
				</script>

DOM事件流

该事件分三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首先从事件捕获阶段开始,然后到实际的目标接受事件,最后为事件冒泡阶段。

事件处理程序

DOM0级事件处理程序

该处理程序不存在兼容性问题。

缺点:

1.是要等待html页面加载完毕后才能操作

2.只能添加一个事件处理程序(会覆盖)
形式:

                var btn=document.getElementById('myBtn');
                btn.onclick=function(){
                    console.log('我不会被执行');
                }
                btn.onclick=function(){
                    console.log(this.id); //"myBtn"
                }
                    //删除绑定
                    btn.onclick=null;

**:DOM0级中的this指向调用者即事件目标

DOM2级事件处理程序

该事件处理程序存在兼容性问题，一般分为IE8版以下和非IE8版本以下

优点:可以添加多个事件处理函数(执行顺序有差异的区别对待)

非IE8版本以下

定义两个方法用于处理指定和删除事件程序：addEventListener()和removeEventListener().

addEventListener(type,handle,boolean)
                   参数
                       type:要处理事件的事件名
                       handle:事件处理的函数
                       boolean:true/false
true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用处理程序。默认为false

removeEventListener(type,handle,boolean)
                   参数
                       type:要处理事件的事件名
                       handle:事件处理的函数
                       boolean:true/false
true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用处理程序。默认为false
               事件执行顺序

                    var btn=document.getElementById('myBtn');
                    btn.addEventListener('click',function(){
                        console.log(this.id);
                    });
                    btn.addEventListener('click',function(){
                        console.log("hello");
                    });

**：从上到下执行顺序执行即先打印ID然后"hello";

匿名函数不能解绑事件

                    var btn=docuemnt.getElementById('myBtn');
                    btn.addEventListener('click',function(){
                        console.log(this.id);
                    });
                    btn.removeEventListener('click',function(){ //没有用！
                        console.log('事件被移除');

最低0.47元/天解锁文章

chen_晨风

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM -- 重新认识事件

版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载，转载时请注明原文地址:https://blog.csdn.net/qq_37674616/article/details/82470350目录事件事件流冒泡事件流捕获事件流DOM事件流事件处理程序DOM0级事件处理程序 DOM2级事件处理程序非IE8...
复制链接

扫一扫

专栏目录