JavaScript 如何使用事件,以及IE和标准DOM事件模型之间存在的差别

🌙
手机阅读
本文目录结构

问题

如何使用事件,以及IE和标准DOM事件模型之间存在的差别。

答案

关于事件流

1.1 IE的事件流:事件冒泡
  由事件的目标(event.srcElement)接受事件,然后逐级向上(例:下一个为包含event.srcElement的节点传递事件,直到文档节点document;
1.2 其他浏览器支持的另一种事件流:事件捕获
  与事件冒泡正好相反,文档节点document先监听到事件,然后把事件逐级向下传递事件,直到目标节点event.target;
1.3 DOM事件流
  DOM2级事件规范的事件流综合了以上两种,把事件流分为了以下三个阶段:
  1.3.1 事件捕获阶段
    不涉及事件目标,或者说这个阶段在目标之前就结束了;
  1.3.2 处于目标阶段
    被看作冒泡阶段的一部分,所以可以在冒泡阶段在目标事件上操作事件;
  1.3.3 事件冒泡阶段
1.4 规范和浏览器实现的差别
  DOM2级事件规范的捕获阶段,事件从文档节点document开始传播,现代浏览器大多数都是从window对象开始传播事件的;
  DOM2级事件规范捕获阶段不涉及事件目标,现代浏览器大多数都在这个阶段包含事件目标。

如何使用事件?以下是几种用来响应事件的事件处理程序

HTML事件处理程序|DOM0级事件处理程序|DOM2级事件处理程序|IE的事件处理程序(IE11以下)

2.1HTML事件处理程序
  2.1.1 指定事件:<button type="button" onclick="alert('响应事件的处javascript代码,可以用全局的函数')">Click Me!</button>
  2.1.2 优缺点:简单,但是与HTML代码紧密耦合,更改不方便;
  2.1.3 删除事件:同DOM0的删除事件处理方式;
2.2 DOM0级事件处理程序
  2.2.1 指定事件:document.onclick = function(){alert("document has been clicked")};
  2.2.2 删除事件:document.onclick = null;
  2.2.3 优缺点:简单且跨浏览器
  2.2.4 实质: 为元素指定方法(栗子中为document指定onclick方法),移除方法,所以其处理程序是在元素的作用域运行的;
2.3 DOM2级事件处理程序
  2.3.1 指定事件:addEventListener("引号括起来的事件名", 触发事件后调用的事件处理程序, 是否在捕获节点调用时间处理程序的布尔值)
    栗子:var funA = function(){alert(" DOM2级事件处理程序")};
          document.addEventListener("click", funA, false);
  2.3.2 删除事件: document.removeEventListener("click", funA, false);
    如果指定的处理程序是匿名函数则不能删除,因为没有函数名;
  2.3.3 优缺点: 可以添加多个监听事件,缺点见2.3.2;
2.4 IE的事件处理程序(IE11以下,IE11及Edge用的DOM2级事件处理程序)
  2.4.1 指定事件: attachEvent("onclick", function(){alert("is no longer supported in ie11")});
  2.4.2 删除事件: detachEvent("onclick", funA);
    如果指定的处理程序是匿名函数则不能删除,因为没有函数名;
  2.4.3 优缺点:可以添加多个监听事件,缺点见2.4.2;

IE和标准DOM事件模型之间存在的差别

3.1 这里的IE是IE11以下;
3.2 参数的差别: attachEvent()的第一个参数比addEventListener()的事件名多一个"on",
    且没有第三个参数,因为IE事件模型只支持冒泡事件流;
3.3 事件处理函数作用域的区别: IE中事件处理程序处于全局作用域,其内的this会指向window;
    而用DOM(0或2)级事件的事件处理程序的作用域是元素作用域,其内的this指向其所属的元素
    例: document.addEventListener("click", function(){ 
            if(this == document){
              alert("此时this指向document");
            }
          }, false);
3.4 事件对象event的属性方法的差别
        IE                    DOM
cancelBubble = true    stopPropagation() //停止冒泡
returnValue = false    preventDefault() //阻止元素默认事件
srcEelement            target //事件目标

更多面试题

如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

面试题
HTML CSS JavaScript
jQuery Vue.js React
算法 HTTP Babel
BootStrap Electron Gulp
Node.js 前端经验相关 前端综合
Webpack 微信小程序 -

这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了