DOM事件揭秘-事件流

Posted

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事件揭秘-事件流的主要内容,如果未能解决你的问题,请参考以下文章

ie和dom事件流的区别

事件高级 DOM事件流 捕获阶段/冒泡阶段

事件高级 DOM事件流 捕获阶段/冒泡阶段

DOM 事件

DOM事件流

jQuery事件传播,事件流