1. 程式人生 > >為元素繫結事件和解綁事件的js相容程式碼

為元素繫結事件和解綁事件的js相容程式碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="按鈕" id="btn1"/>
<input type="button" value="幹掉第一個按鈕的事件" id="btn2"/>
<script src="common.js"></script>
<script>

  //繫結事件的相容
  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,fnName) {
    if(element.removeEventListener){
      element.removeEventListener(type,fnName,false);
    }else if(element.detachEvent){
      element.detachEvent("on"+type,fnName);
    }else{
      element["on"+type]=null;
    }
  }
  function f1() {
    console.log("第一個");
  }
  function f2() {
    console.log("第二個");
  }
  addEventListener(my$("btn1"),"click",f1);
  addEventListener(my$("btn1"),"click",f2);
  my$("btn2").onclick=function () {
    removeEventListener(my$("btn1"),"click",f1);
  };


</script>
</body>
</html>