zoukankan      html  css  js  c++  java
  • 绑定事件和解绑事件的方法

    1、on事件的绑定与解绑

        <input type="button" value="点击显示" id="btn">
        <input type="button" value="解绑" id="clear">
        <script>
            myId("btn").onclick=function(){
                alert("小狗最可爱!");
            }
            myId("clear").onclick=function(){
                myId("btn").onclick=null;
            }
        </script>

      解绑:对象.on事件名字=null

    2、对象.addEventListener("事件类型",事件处理函数,事件处理阶段(true或false))

      谷歌和火狐支持,IE8不支持

        <input type="button" value="点击显示" id="btn">
        <input type="button" value="解绑" id="clear">
        <script>
            // 多个事件了不能调用同一个函数
            myId("btn").addEventListener("click",f1,false);
            myId("btn").addEventListener("click",f2,false);
            function f1(){
                console.log("明月几时有");
            }
            function f2(){
                console.log("把酒问青天");
            }
            // 同时解绑(移除)多个事件
            myId("clear").onclick=function(){
                myId("btn").removeEventListener("click",f1,false);
                myId("btn").removeEventListener("click",f2,false);
            }
        </script>

      解绑:对象.removeEventListener("没有on的事件类型",函数,false);

    3、对象.attachEvent("有on的事件类型",事件处理函数)

      谷歌、火狐不支持,IE8支持

        <input type="button" value="点击显示" id="btn">
        <input type="button" value="解绑" id="clear">
        <script>
            // 多个事件了不能调用同一个函数
            myId("btn").attachEvent("onclick",f1);
            myId("btn").attachEvent("onclick",f2);
            function f1(){
                console.log("明月几时有");
            }
            function f2(){
                console.log("把酒问青天");
            }
            // 同时解绑(移除)多个事件
            myId("clear").onclick=function(){
                myId("btn").detachEvent("onclick",f1);
                myId("btn").detachEvent("onclick",f2);
            }
        </script>

      解绑:对象.detachEvent("on事件类型",函数名字)


    绑定事件兼容代码
    function addEventListener(element, type, fn) {
        if (element.addEventListener) {
            element.addEventListener(type, fn, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, fn);
        } else {
            element["on" + type] = fn;
        };
    };
    解绑事件兼容代码
    function removeEventListener(element, type, fn) {
        if (element.removeEventListener) {
            element.removeEventListener(type, fn, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, fn);
        } else {
            element["on" + type] = null;
        };
    };
        <input type="button" value="点击显示" id="btn">
        <input type="button" value="解绑" id="clear">
        <script>
            // 事件函数
            function f1(){
                console.log("明月几时有");
            }
            function f2(){
                console.log("把酒问青天");
            }
            // 元素绑定事件兼容代码
            function addEventListener(element,type,fn){
                if(element.addEventListener){
                    element.addEventListener(type,fn,false);
                }else if(element.attachEvent){
                    element.attachEvent("on"+type,fn);
                }else{
                    element["on"+type]=fn;
                }
            };
            // 元素解绑事件兼容代码
            function removeEventListener(element,type,fn){
                if(element.removeEventListener){
                    element.removeEventListener(type,fn,false);
                }else if(element.detachEvent){
                    element.detachEvent("on"+type,fn);
                }else{
                    element["on"+type]=null;
                }
            };
            addEventListener(myId("btn"),"click",f1);
            addEventListener(myId("btn"),"click",f2);
            myId("clear").onclick=function(){
                removeEventListener(myId("btn"),"click",f1);
            }
        </script>
  • 相关阅读:
    (Java实现) 洛谷 P1603 斯诺登的密码
    (Java实现) 洛谷 P1036 选数
    (Java实现) 洛谷 P1036 选数
    (Java实现) 洛谷 P1012 拼数
    (Java实现) 洛谷 P1012 拼数
    (Java实现) 洛谷 P1028 数的计算
    (Java实现) 洛谷 P1028 数的计算
    (Java实现) 洛谷 P1553 数字反转(升级版)
    8.4 确定两个日期之间的月份数或年数
    (Java实现) 洛谷 P1553 数字反转(升级版)
  • 原文地址:https://www.cnblogs.com/dawnwill/p/9854647.html
Copyright © 2011-2022 走看看