JavaScript---事件详解

Posted xiaobaizhiqian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript---事件详解相关的知识,希望对你有一定的参考价值。

事件流

描述的是在页面中接受事物的顺序

接收事物的顺序

  • 事件冒泡

  由最具体的元素接收,然后逐级向上传播至最不具体的元素节点(文档)

  • 事件捕获

  最不具体的节点接收事件,而最集体的节点应该是最后接收事件

事件处理

html事件处理

直接添加到HTML结构中

<button id="btn1" onclick="demo()">按钮</button>
<script>
    function demo(){
        alert("Hello");
    }
</script>

 

这种处理方式,存在修改函数名,需要到html中修改事件调用的函数名的问题

DOM0级事件处理

把一个函数赋值给一个事件处理程序属性

解决了HTML事件处理的问题

<button id="btn1">按钮</button>
<script>
    var btn1=document.getElementById(btn1);
    btn1.onclick=function(){
        alert("Hello");
    };//这样写的话,前面的事件会被覆盖
    btn1.onclick=function(){
        alert("Hello2");
    };
    //清除事件
    btn1.onclick=null;
</script>

仍然存在问题,当有多个事件时,前面的事件会被覆盖,只执行最后一个事件处理

DOM2级事件处理

  • addEventListener("事件名", "事件处理函数", "布尔值");

    true:事件捕获

    false:事件冒泡

  • removeEventListener();
<div id="divid">
    <button id="btn1">按钮</button>
</div>
//这样写就不会覆盖前面的事件
<script>
    var btn1 = document.getElementById(btn1)
    btn1.addEventListener("click", function(){
        alert("Hello")
    });
    btn1.addEventListener("click", function(){
        alert("Hello2")
    });
</script>

 

存在IE8及以下版本不支持该事件处理方法

IE事件处理程序

  • attachEvent
  • detachEvent

一个支持各浏览器的的事件处理demo

<button id="btn1">按钮</button>
<script>
    var btn1 = document.getElementById("btn1");
    if (btn1.addEventListener){
        btn1.addEventListener("click", demo);
    } else if (btn1.attachEvent){
        btn1.attachEvent("onclick", demo);
    } else {
        btn1.onclick = demo();
    }
    function demo() {
        alert("Hello");
    }
</script>

 

以上是关于JavaScript---事件详解的主要内容,如果未能解决你的问题,请参考以下文章

第三天:JS事件详解-事件流

JavaScript事件详解

Reactreact概述组件事件

JavaScript中的Event事件对象详解

eventUtil的详解,来处javascript 高级程序设计

JavaScript事件详解-zepto的事件实现