JS---DOM---爲元素綁定事件的引入，爲元素綁定多個代碼，兼容代碼

時間 2019-12-09

原文原文鏈接

1. 爲元素綁定事件的引入：

用src直接綁定多個，只實現最後一個（programmer2.js）html

<input type="button" value="按鈕" id="btn"/>
<script src="common.js"></script>
<script src="programmer1.js"></script>
<script src="programmer2.js"></script>
<script>


  my$("btn").onclick=function () {
    console.log("小楊好帥哦");
  };
</script>

2. 爲元素綁定多個事件

爲元素綁定事件(DOM) :一種, 可是不兼容, 因此仍是有兩種瀏覽器

1. 對象.addEventListener("事件類型", 事件處理函數, false); ----->谷歌和火狐支持, IE8不支持

2. 對象.attachEvent("有on的事件類型", 事件處理函數) ----->谷歌不支持, 火狐不支持, IE8支持

2.1 對象.addEventListener("事件類型", 事件處理函數, false); ----->谷歌和火狐支持, IE8不支持

案例：爲按鈕綁定點擊事件

參數1:事件的類型---事件的名字,沒有on
參數2:事件處理函數---函數(命名函數,匿名函數)
參數3:布爾類型,目前就寫false

    //爲同一個元素綁定多個相同的事件--
    my$("btn").addEventListener("click", function () {
      console.log("小蘇猥瑣啊");
    }, false);
    my$("btn").addEventListener("click", function () {
      console.log("小蘇齷齪啊");
    }, false);
    my$("btn").addEventListener("click", function () {
      console.log("小蘇邪惡啊");
    }, false);
    my$("btn").addEventListener("click", function () {
      console.log("小蘇下流啊");
    }, false);

2.2 對象.attachEvent("有on的事件類型", 事件處理函數) ----->谷歌不支持, 火狐不支持, IE8支持

參數1:事件類型---事件名字，有on
參數2:事件處理函數---函數(命名函數,匿名函數)

    my$("btn").attachEvent("onclick", function () {
      console.log("小楊好帥哦1");
    });

    my$("btn").attachEvent("onclick", function () {
      console.log("小楊好帥哦2");
    });

    my$("btn").attachEvent("onclick", function () {
      console.log("小楊好帥哦3");
    });

3. 爲元素綁定事件的兼容代碼

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

</head>
<body>
<input type="button" value="按鈕" id="btn"/>
<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;
    }
  }

  addEventListener(my$("btn"),"click",function () {
    console.log("哦1");
  });
  addEventListener(my$("btn"),"click",function () {
    console.log("哦2");
  });
  addEventListener(my$("btn"),"click",function () {
    console.log("哦3");
  });


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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。