【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。

THE END  

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

领取零基础自学IT资源

涉及方向有Java、Web前端、UI设计、软件测试、python等科目,内容包含学习路线、视频、源码等

点击申请领取资料

点击查看资料详情 

收起 


 相关推荐

问题解答专区
返回顶部