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>
  • 相关阅读:
    在Fragment中保存WebView状态
    Code First下迁移数据库更改
    脚本解决.NET MVC按钮重复提交问题
    1.1C++入门 未完待续。。。
    0.0C语言重点问题回顾
    12F:数字变换
    12G:忍者道具
    12D:迷阵
    12C:未名冰场
    12B:要变多少次
  • 原文地址:https://www.cnblogs.com/dawnwill/p/9854647.html
Copyright © 2011-2022 走看看