master

分支 (2)

管理

管理

master

Devlop

java-script-notes
/
115.事件的绑定.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    window.onload = function () {
      let btn01 = document.getElementById("btn01");
      /*
				 1. 使用 对象.事件 = 函数 的形式绑定响应函数，
				 * 	它只能同时为一个元素的一个事件绑定一个响应函数，
				 * 	不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
				 */
      /* btn01.onclick=function (){
         alert(1);
       }

       btn01.onclick=function (){
         alert(2);
       }*/

      /*
				 2. addEventListener()
				 * 	- 通过这个方法也可以为元素绑定响应函数
				 *  - 参数：
				 * 		1.事件的字符串，不要on
				 * 		2.回调函数，当事件触发时该函数会被调用
				 * 		3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
				 *
				 * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
				 * 	这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
				 *
				 * 这个方法不支持IE8及以下的浏览器
				 */
      /*btn01.addEventListener("click",function (){
        alert(1);
      },false);

      btn01.addEventListener("click",function (){
        alert(2);
      },false);

      btn01.addEventListener("click",function (){
        alert(3);
      },false);
    };*/

      /*
           3. attachEvent()
           * 	- 在IE8中可以使用attachEvent()来绑定事件
           *  - 参数：
           * 		1.事件的字符串，要on
           * 		2.回调函数
           *
           *  - 这个方法也可以同时为一个事件绑定多个处理函数，
           * 		不同的是它是后绑定先执行，执行顺序和addEventListener()相反
           */
      bind(btn01, "click", function () {
        alert(1);
      })

      //4. 定义一个函数，用来为指定元素绑定响应函数
      /*
       * addEventListener()中的this，是绑定事件的对象
       * attachEvent()中的this，是window
       *  需要统一两个方法this
       */

      /*
       * 参数：
       * 	obj 要绑定事件的对象
       * 	eventStr 事件的字符串(不要on)
       *  callback 回调函数
       */
      function bind(obj, eventStr, callback) {
        if (obj.addEventListener) {
          //正常浏览器的方法
          obj.addEventListener(eventStr, callback, false);
        } else {
          //ie8及以下浏览器
          obj.attachEvent("on" + eventStr, callback);
        }


      }
  </script>
</head>
<body>
<button id="btn01">
  点我一下
</button>
</body>
</html>