阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

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

      目录
      目录