DOM事件揭秘－事件流

Posted 2020-08-20

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM事件揭秘－事件流相关的知识，希望对你有一定的参考价值。

事件：文档／窗口中发生的特定的交互瞬间

瀑布流，图片轮播

动作都是通过事件触发的

课程内容：

1，理解事件流

2，使用时间处理程序

3，不同的事件类型

ie4.0以后，

事件流：描述的是从页面中接收事件的顺序

ie:事件冒泡流

n：事件捕获流

事件冒泡：事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）

事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。多数浏览器也支持，但是低版本的支持不好，请放心使用事件冒泡，知道事件捕获即可。

html事件处理程序：事件直接加载在html结构里，缺点是html和js紧密耦合在一起，如果要更改的话，html和js都要改，麻烦。很多开发人员会摒弃掉。

dom0级事件处理程序：把一个函数赋值给一个事件的处理程序的属性，js比较传统的，用的最多的一种，简单，跨浏览器的优势。

<script>
    btn2.onclick = function showmessage(){
        alert("111");
    }
    btn2.onclick = null;//删除onclick属性

</script>

dom2级事件处理程序:2个方法，用于处理指定和删除事件处理程序的操作方法 addEventListener()和removeEventListener（），包含事件名、作为事件处理程序的函数，布尔值（布尔值false-事件冒泡，所以一般用false,true-事件捕获，不常用。)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div>
    <input type="button" value="按钮1" id="btn1" onclick="showMes()">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">

</div>
    <script>
    function showMes(){
        alert("这是html事件处理程序");
    }

    var btn2 = document.getElementById("btn2");
    btn2.onclick = function showmessage(){
        alert("这是dom0级处理程序");
    }
    btn2.onclick = null;//删除onclick属性

    var btn3 = document.getElementById("btn3");
    addEventListener("click",showMes,false);
    addEventListener("click",function(){
        alert(btn3.value);
    },false);
    addEventListener("click",function(){
        alert("这是dom2级处理程序");
    },false);
    removeEventListener("click",showMes,false);//删除事件属性
</script>
</body>
</html>

//dom0 和 dom2都可以添加多个事件属性，按照代码顺序执行

事件名不能加on,false兼容各种浏览器，listener单词不要写错。

测试，ie不起作用。

4、IE事件处理程序－支持ie和opera
attachEvent()添加事件
detachEvent()删除事件
这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数。因为ie8和以前的版本只支持事件冒泡，默认事件冒泡。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div>
        <input type="button" value="按钮1" id="btn1" onclick="showMes()">
        <input type="button" value="按钮2" id="btn2">
        <input type="button" value="按钮3" id="btn3">
    </div>
    <script>
    //html事件处理程序
    function showMes() {
        alert("这是html事件处理程序");
    }

    //dom0级事件处理程序
    var btn2 = document.getElementById("btn2");
    btn2.onclick = function showmessage() {
        alert("这是dom0级处理程序");
    }
    btn2.onclick = null; //删除onclick属性

    // //dom2级事件处理程序
    // var btn3 = document.getElementById("btn3");
    // addEventListener("click", showMes, false); //事件名不能加on,false兼容各种浏览器，listener单词不要写错。
    // addEventListener("click", function() {
    //     alert(btn3.value);
    // }, false);
    // addEventListener("click", function() {
    //     alert("这是dom2级处理程序");
    // }, false);
    // removeEventListener("click", showMes, false); //删除事件属性

    // //dom0 和 dom2都可以添加多个事件属性，按照代码顺序执行

    //能力检测 跨浏览器事件处理
    var eventutill = {
        //添加句柄
        addHandler:function(element,type,handler){
            if(element,addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element,attachEvent){
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;//[]作用等同于".","."不能和字符串紧接着写
            }
        },//这里记得加逗号
         //删除句柄

        removeHandler:function(element,type,handler){
            if(element,removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element,detachEvent){
                element.detachEvent("on"+type,handler);
            }else{
                element["on"+type]=null;
            }
        }
    }
    eventutill.addHandler(btn3,"click",showMes);//click记得要加引号
    //eventutill.addHandler(btn3,“click”,showMes);

    </script>
</body>

</html>

以上是关于DOM事件揭秘－事件流的主要内容，如果未能解决你的问题，请参考以下文章