重学DOM事件

皓皓先生
197 阅读3分钟

DOM事件

基本概念：DOM事件的级别

DOM0级：element.onclick=function(event){}

DOM2级：element.addEventListener('click',function(event){},false)冒泡

DOM3级：element.addEventListener('keyup',function(event){},false),新增了更多事件类型，如鼠标,键盘事件

DOM级别一共可以分为4个级别：DOM0级，DOM1级，DOM2级和 DOM3级，而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理

有人可能会疑惑，为什么没有DOM1级事件处理呢？因为1级DOM标准并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。

1. DOM0级事件

  • 第一种
<button type="button" onclick="showfu()"></button>

<script>
    function showfu() {
        alert('Hello Agoni');
    }
</script>

以上的代码，我们通过直接在HTML代码里面定义了一个 onclick属性触发showfu这样的事件处理程序

最大的缺点:就是HTML和JS耦合太强，我们如果需要修改函数名就必须修改两个地方，

优点:是不需要操作DOM来完成事件的绑定。

  • 第二种
<button id="btn" type="button"></button>
<script>
    var btn = document.getElementById('btn');
    
    btn.onclick = function() {
        alert('Hello Agoni');
    }
    // btn.onclick = null; 解绑事件 
</script>

以上代码我们给button定义了一个id，通过JS获取到了这个id的按钮，并将一个函数赋值给了一个事件处理属性onclick，这样的方法便是DOM0级处理事件的体现。我们可以通过给事件处理属性赋值null来解绑事件。

DOM0级事件处理程序的缺点在于一个处理程序无法同时绑定多个处理函数，比如我还想在按钮点击事件上加上另外一个函数。

2. DOM2级事件

处理程序无法同时绑定多个处理函数的缺点，允许给一个处理程序添加多个处理函数

<button id="btn" type="button"></button>

<script>
    var btn = document.getElementById('btn');
    
    function showFn() {
        alert('Hello World');
    }
    
    btn.addEventListener('click', showFn, false);
    (true捕获阶段调用事件处理方法；false冒泡阶段调用事件处理方法。)

    // btn.removeEventListener('click', showFn, false); 解绑事件 
</script>

需要注意的是IE8级以下版本不支持addEventListener和removeEventListener，需要用attachEvent和detachEvent来实现：

btn.attachEvent('onclick', showFn); // 绑定事件 
btn.detachEvent('onclick', showFn); // 解绑事件
  • 兼容性
  1. attachEvent——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
  2. addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8
//绑定事件
helper.on = function (target, eventType, handlerFun) {
    if (target.addEventListener) {
        target.addEventListener(eventType, handlerFun, false);
    } else {
        target.attachEvent("on" + eventType,
            function (event) {
                return handlerFun.call(target, event);
            }, false);
    }
};

//取消事件监听
helper.remove = function (target, eventType, handlerFun) {
    if (target.removeEventListener) {
        target.removeEventListener(eventType, handlerFun);
    } else {
        target.detachEvent("on" + eventType,
            function (event) {
                return handlerFun.call(target, event);
            }, true);
    }
};

3.DOM3级事件

  1. UI事件，当用户与页面上的元素交互时触发，如：load、scroll
  2. 焦点事件，当元素获得或失去焦点时触发，如：blur、focus
  3. 鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
  4. 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
  5. 文本事件，当在文档中输入文本时触发，如：textInput
  6. 键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
  7. 合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
  8. 变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

DOM事件模型

捕获/冒泡

DOM事件流

  • 捕获=>自身阶段=>冒泡
    DOM事件流

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

DOM事件捕获的具体流程


DOM事件捕获的具体流程

获取html节点
document.docuemntElement

获取body节点
document.body

Event对象的常见应用

event.preventDefault()
阻止默认行为

event.stopPropagation()
阻止冒泡

event.stopImmediatePropagation()
当前节点以及事件链上的所有后续节点上，目的是在执行完当前事件处理程序之后，停止当前节点以及所有后续节点的事件处理程序的运行

stopPropagation可以阻止事件冒泡，但不会影响该事件的其他监听方法执行
而stopImmediatePropagation不仅阻止事件冒泡，还会阻止该事件后面的其他监听方法执行

event.currentTarget()
当前所绑定事件的元素

event.target()
当前被点击的元素
avatar
文章
阅读
粉丝