400-650-7353
您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】DOM级事件绑定

【Web前端基础知识】DOM级事件绑定

  • 发布: 优就业it培训
  • 来源:
  • 2021-10-29 15:40:27
  • 阅读()
  • 分享
  • 手机端入口

今天从事件流,DOM0级事件绑定,DOM2级事件绑定,低版本IE事件绑定等方面来学习事件。

事件流

当你单击了某个元素,单击事件不仅仅发生在这个元素上,你也单击了它的父元素、父元素的父元素、……它的祖先元素,甚至单击了整个页面。

“事件流”描述的是页面上各个元素接收事件的顺序。

我们为了描述事件的传播顺序,特意人为规定了两个阶段:捕获阶段capture pahse、冒泡阶段bubbling phase。点击页面上的一个元素,事件在哪个阶段触发,这取决于添加事件监听的方法。

DOM0级事件绑定

DOM分为级别,DOM0级、1级、2级、3级,是不同的标准,标准一直在升级。

我们之前学习的 obj.onclick = function () {} 这种注册监听的写法,就是DOM0级的事件绑定方法。就是把onclick当做属性添加给了oDiv元素。

通过实验,我们发现,这种事件添加方法,只能监听冒泡过程。事件的捕获阶段,没有监听成功。

这里需要注意,在IE9、Chrome里面,事件会冒泡到window对象,而IE6、7、8仅仅冒泡到document对象。

另外,用这种方法绑定的监听,this指的是触发这个事件的元素,没有任何的浏览器兼容问题。

DOM0级还有一种写法,直接将监听写在标签里面,工作中不许用:

写在HTML标签里面代码耦合性很强,三层没有完全分离,工作中不用的。这种写法,也是监听冒泡阶段。

用DOM0级添加事件监听,同一个元素不能有两个同样事件监听,比如:

  1. box.onclick = function () { 
  2.    alert(1); 
  3.  } 
  4.    box.onclick = function () { 
  5.    alert(2); 
  6.  } 

以JS代码后出现的为准,它会覆盖先写的函数。所以点击box弹出2。

DOM2级事件绑定

DOM1级规范中,没有对事件进行改动,所以不再赘述。

DOM2级做了新的规范,不用on来绑定监听了,而是使用一个方法 addEventListener()。它接受三个参数:什么事件、函数、是否监听捕获阶段。

第1个参数:事件名不用写on,比如:click、mouseover 、mouseout

第2个参数:函数可以是匿名函数,也可以是有名函数

第3个参数:布尔值,true表示监听捕获、false表示监听冒泡阶段

比如:

  1. box.addEventListener("click", funciton () { 
  2.     alert(1); 
  3. }, true); 

第三个参数是true,表示监听box的捕获阶段的单击事件。

addEventListener可以重复添加相同事件名的事件:我们给box1的绑定了两个事件冒泡阶段的监听,不会覆盖,两个监听的函数都会执行,按照代码执行顺序。

  1. box.addEventListener("click", funciton () { 
  2.     alert(1); 
  3. }, true); 
  4. box.addEventListener("click", funciton () { 
  5.     alert(2); 
  6. }, true); 

先弹出1,然后弹出2。

低版本IE的事件绑定

现在仍有少量的用户在使用IE8,所以我们把低版本的IE事件绑定说明一下。

IE6、7、8不支持addEventListener()方法,支持 attachEvent() 方法。

  1. box.attachEvent("onclick"function () { 
  2.   alert("click"); 
  3. }); 

attachEvent方法没有第三个参数,也就是说,不能选择监听捕获、冒泡,只能监听冒泡阶段。

第一个参数,必须写on,和addEventListener()不一样;

第二个参数,就是事件处理函数

没有第三个参数,只能监听冒泡。所以和DOM0事件写法一样(比如onclick)。

低版本IE的事件监听attachEvent:事件处理函数里面的this,不是触发事件的这个元素,而是window对象!

并且,同一个事件名的多个监听,会反着执行:

  1. box.attachEvent("onclick"function () { 
  2.   alert(1); 
  3. }); 
  4. box.attachEvent("onclick"function () { 
  5.   alert(2); 
  6. }); 
  7. box.attachEvent("onclick"function () { 
  8.   alert(3); 
  9. }); 

结果会弹出3、2、1。

文章“【Web前端基础知识】DOM级事件绑定”已帮助

更多内容

>>本文地址:http://www.ujiuye.com/zhuanye/2021/70628.html

THE END  

声明:本站稿件版权均属中公教育优就业所有,未经许可不得擅自转载。

领取零基础自学IT资源

(内含学习路线+视频教程+项目源码)

涉及Java、Web前端、UI设计、软件测试、Python等多个IT热门方向

打开微信扫一扫即可领取哦~

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
  • 大前端大前端
  • 大数据大数据
  • 互联网营销互联网营销
  • JavaJava
  • Linux云计算Linux
  • Python+人工智能Python
  • 嵌入式物联网嵌入式
  • 全域电商运营全域电商运营
  • 软件测试软件测试
  • 室内设计室内设计
  • 平面设计平面设计
  • 电商设计电商设计
  • 网页设计网页设计
  • 全链路UI/UE设计UI设计
  • VR/AR游戏开发VR/AR
  • 网络安全网络安全
  • 新媒体与短视频运营新媒体
  • 直播带货直播带货
  • 智能机器人软件开发智能机器人
 

快速通道fast track

近期开班时间TIME