zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    判断字符串是否包含某一个值方法
    生成一个随机手机号
    python 常用数据类型及操作方法
    selenium 常用的定位方法
    mysql 多表查询
    转载--python全栈开发学习
    Jenkins执行jmeter自动化脚本方法
    阅读方法
    pytorch学习
    英文阅读材料记录
  • 原文地址:https://www.cnblogs.com/xiaobaizhiqian/p/8414048.html
Copyright © 2011-2022 走看看