webAPI中的事件

一，为元素绑定事件
1.对象.addEventlistener(“事件的类型”,“事件的处理函数”,“false”)
参数1：事件的类型—>事件的名字没有on
参数2：事件的处理函数----->匿名函数/命名函数
参数3：布尔值目前写false 默认的就是false，可写可不写

为同一个元素绑定多个事件

 my$("btn").addEventListener("click",function () {
		   		 console.log("hehe")；
		 },false);
 my$("btn").addEventListener("click",function () {
     		   console.log("haha")；
    	 },false);

2.对象.attachEvent(“有on的事件类型”，事件的处理函数)

 my$("btn").attachEvent("onclick",function () {
    	        console.log("lalalala")
    	    })
    	    my$("btn").attachEvent("onclick",function () {
    	        console.log("balabala")
    	    })

二，关于事件的监听

定义一个 为任意元素绑定的任意事件---->参数：元素，事件，函数
    function addEvent(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;
        }
    }
    //测试
    addEvent(my$("btn"),"click",function () {
        console.log("hehe")
    })
    addEvent(my$("btn"),"click",function () {
        console.log("haha")
    })

三，解绑事件
先给静态页面两个input标签

<body>
<input type="button" value="点击" id="btn">
<input type="button" value="干掉第一个按钮的事件" id="btn2">
</body>

在项目中新建一个名为comment.js文件，并定义一个通过id选择器获取元素的方法。

function my$(id){
    return document.getElementById(id);
}

将comment.js文件引入当前页面中，在此页面中通过id获取元素就可以不用写document.getElementById(“元素id名”)，直接调用my$(“元素id名”)的方法

<script src="comment.js"></script>

接下来就开始写js部分了

  my$("btn").onclick=function () {
         console.log("hehe");
    }
    点击第二个按钮解绑第一个事件
     my$("btn2").onclick=function () {
        my$("btn").onclick=null;
     }


    function f1(){
        console.log("log");
    }
     my$("btn").addEventListener("click",f1,false)
     my$("btn").addEventListener("click",function () {
         console.log("he,women");
     },false)
   解绑第一个事件
     my$("btn2").onclick=function(){
   解绑的方法    被解绑的对象.removeEventListener("要解绑的事件","要解绑的函数",布尔值)
         my$("btn").removeEventListener("click",f1,false)
     }

解决浏览器绑定事件的兼容问题

 function addEvent(element,type,fn) {
        //判断浏览器是否支持这个方法
        if (element.addEventListener) {
        //支持  就调用当前方法
            element.addEventListener(type,fn,false);
        }
        else if (element.attachEvent){
        //IE浏览器的解决方法
            element.attachEvent("on"+type,fn)
        }
        else {
        //其他浏览器的解决方法
            element["on"+type]=fn;
        }
    }
    //测试
    addEvent(my$("btn"),"click",f1)
    addEvent(my$("btn"),"click",function () {
        console.log("haha")
    })

猜你喜欢