美文网首页
前端面试题(3)——DOM事件类

前端面试题(3)——DOM事件类

作者: 言歌不言歌 | 来源:发表于2018-03-25 17:02 被阅读0次

  1. 基本概念:
    • DOM事件的级别
  2. DOM事件模型:
    • 事件冒泡
    • 事件捕获
  3. DOM事件流
  4. 描述DOM事件捕获的具体流程
  5. Event对象的常见应用
  6. 自定义事件

一、DOM事件的级别

  1. DOM0: element.onclick=function(){}
  2. DOM2: element.addEventListener('click',function(){},false)(true表示在捕获阶段触发,false表示在冒泡阶段触发,默认是false);
  3. DOM3: element.addEventListener('keyup',function(){},false)(true表示在捕获阶段触发,false表示在冒泡阶段触发,默认是false),增加了很多事件类型;

二、DOM事件模型

  1. 事件捕获:从上往下找到目标元素
  2. 事件冒泡:从目标元素往上查找

三、DOM事件流:浏览器为当前页面和用户做交互的过程中发生的过程,一个完整的事件流分三个阶段。

  1. 事件捕获
  2. 目标阶段
  3. 事件冒泡

事件通过捕获到达目标元素,这个时候就是目标阶段,第三个阶段就是从目标元素上传到window对象。

四、描述DOM事件捕获的具体流程

window --> document --> html(用js表示html节点的方法:document.documentElement;) --> body --> ··· --> 目标元素

<body>
    <div id="ev">
        <style>
            #ev {
                width: 300px;
                height: 100px;
                background: #f00;
                color: #fff;
                text-align: center;
                line-height: 100px;
            }
        </style>
        目标元素
    </div>
    <script type="text/javascript">
        var ev = document.getElementById("ev");
        ev.addEventListener('click', function() {
            console.log("ev capture");
        }, true);
        window.addEventListener('click', function() {
            console.log("window capture");
        }, true);
        document.addEventListener('click', function() {
            console.log("document capture");
        }, true);
        document.documentElement.addEventListener('click', function() {
            console.log("html capture");
        }, true);
        document.body.addEventListener('click', function() {
            console.log("body capture");
        }, true);
    </script>
</body>

// 打印结果是
// window capture
// document capture
// html capture
// body capture
// ev capture

五、Event对象的常见应用

  1. event.preventDeault():阻止默认行为;
  2. event.stopPropation():阻止事件冒泡;
  3. event.stopImmeidiatePropagation():阻止其他事件(若一个按钮绑定了两个或多个事件:事件a、事件b、……。当下场景想要实现点击按钮的时候只执行事件a,其他事件不执行,则在事件a的函数中加上event.stopImmeidiatePropagation()就能实现);
  4. event.currentTarget:当前所被绑定的事件;
  5. event.target:当前被点击的元素(早期的ie版本不支持,早期ie用event.srcElement);

六、自定义事件(模拟事件)

  1. 自定义事件和自定义触发事件的过程(只能指定事件名,不能给事件加数据)
// eve就当作普通的事件
var eve = new Event("custome");
// ev就是普通的DOM节点
ev.addEventListener("custome",function(){
    console.log("custome");
},false);
// 此时是自动触发事件,通常和其他事件结合使用
ev.dispatchEvent(eve);
// 延时5秒后触发
setTimeout(function() {
    ev.dispatchEvent(eve);
}, 5000);
  1. CustomeEvent(除了指定事件名,还能给事件加一个Object,用来传递自定义参数);

相关文章

  • 前端面试题(3)——DOM事件类

    基本概念:DOM事件的级别 DOM事件模型:事件冒泡事件捕获 DOM事件流 描述DOM事件捕获的具体流程 Even...

  • Web前端JQuery面试题(二)

    Web前端JQuery面试题(二) 1.请写出jquery的语法? 2.请问什么是DOM对象? DOM对象,DOM...

  • JS原创视频教程-知识点类

    DOM优化 此外DOM优化还有 DOM与事件事件委托 DOM与前端模板能更好的对逻辑和试图风力,MVC架构的基础 ...

  • 前端面试系列:DOM事件类

    一、基本概念: DOM事件的级别 DOM0: element.onclick=function(){} DOM2:...

  • DOM事件—面试知识点

    一、dom事件类1、基本概念:dom事件的级别(1)dom0 element.οnclick=function()...

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级、DOM1级、DOM2级、DOM3级DOM事件:DOM0级事件处理、...

  • DOM事件类

    基本概念:DOM事件的级别 DOM事件模型 DOM事件流 描述DOM事件捕获的具体流 Event对象的常见应用 自...

  • DOM事件类

    一,DOM事件的级别 1,DOM0:element.onclick=function(){} 2,DOM2...

  • DOM事件类

    DOM的知识点又多又碎,看起来费劲吧啦的。难得有空,抽时间整理了一些出来,与大家共勉。 DOM事件级别都有什么? ...

  • DOM事件类

    DOM事件的级别 DOM0 : element.onclick = function () {}DOM2: ele...

网友评论

      本文标题:前端面试题(3)——DOM事件类

      本文链接:https://www.haomeiwen.com/subject/itfkcftx.html