事件的委派

在很多需求中，通常元素是动态创建添加到一个父元素中的，这时候我们点击新增的元素是没有反应的

<script type="text/javascript">

    window.onload = function(){

        var u1 = document.getElementById("u1");

        var btn01 = document.getElementById("btn01");

        btn01.onclick = function(){

            var li = document.createElement("li"); //创建一个li

            li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";

            u1.appendChild(li);  //点击按钮以后添加超链接，将li添加到ul中

        };

        /*

         * 为每一个超链接都绑定一个单击响应函数

         * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，

         *     而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定

         */

        //获取所有的a，这样其实后面新增的li点击没效果

        var allA = document.getElementsByTagName("a");

        //遍历

        for(var i=0 ; i<allA.length ; i++){

            allA[i].onclick = function(){

                alert("我是a的单击响应函数！！！");

            };

        }

    };

</script>

</head>

<body>

    <button id="btn01">添加超链接</button>

    <ul id="u1" style="background-color: #bfa;">

        <li>

            <p>我是p元素</p>

        </li>

        <li><a href="javascript:;" class="link">超链接一</a></li>

        <li><a href="javascript:;" class="link">超链接二</a></li>

        <li><a href="javascript:;" class="link">超链接三</a></li>

    </ul>

</body>

点击新建的超链接，不会有任何反应，没有触发到点击事件。这时候我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的

可以尝试将其绑定给元素的共同的祖先元素

指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素（这个就是冒泡的好处），从而通过祖先元素的响应函数来处理事件

事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

<script type="text/javascript">

    window.onload = function(){

        var u1 = document.getElementById("u1");

        var btn01 = document.getElementById("btn01");

        btn01.onclick = function(){

            var li = document.createElement("li"); //创建一个li

            li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";

            u1.appendChild(li);  //点击按钮以后添加超链接，将li添加到ul中

        };

        // 为ul绑定一个单击响应函数

        u1.onclick = function(event){

            event = event || window.event;

            //如果触发事件的对象是我们期望的元素，则执行否则不执行

            if(event.target.className == "link"){

                console.log(this) // this是ul这个元素

                console.log(event.target) // event中的target表示的触发事件的对象

                alert("我是ul的单击响应函数");

            }

        };

    };

</script>

</head>

<body>

    <button id="btn01">添加超链接</button>

    <ul id="u1" style="background-color: #bfa;">

        <li>

            <p>我是p元素</p>

        </li>

        <li><a href="javascript:;" class="link">超链接一</a></li>

        <li><a href="javascript:;" class="link">超链接二</a></li>

        <li><a href="javascript:;" class="link">超链接三</a></li>

    </ul>

</body>

这时候点击新建的超链接就有效果了

事件的绑定

使用 对象.事件 = 函数 的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的

<body>

  <button id="btn01">点我一下</button>

</body>

</html>

<script type="text/javascript">

  window.onload = function(){

    var btn01 = document.getElementById("btn01");

    //为btn01绑定一个单击响应函数

    btn01.onclick = function(){

      alert(1);

    };

    //为btn01绑定第二个响应函数

    btn01.onclick = function(){

      alert(2);

    };

  };

</script>

执行结果第二个绑定的响应函数覆盖了第一个绑定的函数，使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数

这样当事件被触发时，响应函数将会按照函数的绑定顺序执行，addEventListener()，通过这个方法也可以为元素绑定响应函数

参数：第一个参数：事件的字符串，不要on。第二个参数：回调函数，当事件触发时该函数会被调用。第三个参数：是否在捕获阶段触发事件，需要一个布尔值，一般都传false

<body>

  <button id="btn01">点我一下</button>

</body>

</html>

<script type="text/javascript">

  window.onload = function(){

    var btn01 = document.getElementById("btn01");

    btn01.addEventListener("click",function(){

       alert(1);

     },false);

     btn01.addEventListener("click",function(){

       alert(2);

     },false);

  };

</script>

执行结果可以看到，两个绑定的响应函数都触发了，这个方法不支持IE8及以下的浏览器，但可以使用attachEvent()方法

这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反

参数：第一个参数：事件的字符串，要on。第二个参数：回调函数

<body>

  <button id="btn01">点我一下</button>

</body>

</html>

<script type="text/javascript">

  window.onload = function(){

    var btn01 = document.getElementById("btn01");

    btn01.attachEvent("onclick",function(){

      alert(1);

    });

    btn01.attachEvent("onclick",function(){

      alert(2);

    });

    btn01.attachEvent("onclick",function(){

      alert(3);

    });

  };

</script>

执行结果是先执行了第三个绑定的响应函数，依次第二个，第一个。执行顺序和addEventListener()相反

在以上两个方法中，的this指向不一样。addEventListener()中的this，是绑定事件的对象

<body>

  <button id="btn01">点我一下</button>

</body>

</html>

<script type="text/javascript">

  window.onload = function(){

    var btn01 = document.getElementById("btn01");

    btn01.addEventListener("click",function(){

      console.log(this); // this是绑定事件的对象：<button id="btn01">点我一下</button>

    },false);

  };

</script>

attachEvent()中的this，是window

<body>

  <button id="btn01">点我一下</button>

</body>

</html>

<script type="text/javascript">

  window.onload = function(){

    var btn01 = document.getElementById("btn01");

    btn01.attachEvent("onclick",function(){

      console.log(this); //this是window

    });

  };

</script>

那么我们可以写一个方法来兼容这两种方法：先判断是否支持addEventListener方法，如果支持就执行这种方式，如果不支持就执行attachEvent方法，并且统一this的指向

<body>

  <button id="btn01">点我一下</button>

</body>

</html>

<script type="text/javascript">

  window.onload = function(){

    var btn01 = document.getElementById("btn01");

    bind(btn01 , "click" , function(){

      console.log(this);

    });

  };

  /*

   * 参数：

   *     obj 要绑定事件的对象

   *     eventStr 事件的字符串(不要on)

   *  callback 回调函数

   */

  function bind(obj , eventStr , callback){

    if(obj.addEventListener){

      //大部分浏览器兼容的方式

      obj.addEventListener(eventStr , callback , false);

    }else{

      /*

       * this是谁由调用方式决定

       * callback.call(obj)

       */

      //IE8及以下

      obj.attachEvent("on"+eventStr , function(){

        // 在匿名函数中调用回调函数

        callback.call(obj);

      });

    }

  }

</script>

JavaScript事件的委派与事件的绑定的更多相关文章

  1. javascript闭包传参和事件的循环绑定

    今天看到一个javascript的题目,按常理循环绑定事件,但是得到的结果却不是想要的. <a href="#">text</a><br>< ...

  2. javascript事件委托和jQuery事件绑定on、off 和one

    一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...

  3. javascript 事件委托 和jQuery事件绑定on、off 和one

    一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...

  4. javaScript事件机制深入学习(事件冒泡，事件捕获，事件绑定方式，移除事件方式，阻止浏览器默认行为，事件委托，模拟浏览器事件，自定义事件)

    前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...

  5. 前端（十五）—— JavaScript事件：绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...

  6. javascript事件委托和jQuery事件绑定on、off 和one以及on绑定多个事件(重要)

    一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...

  7. javaScript事件（一）事件流

    一.事件 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.事件是javaScript和DOM之间的桥梁.你若触发,我便执行——事件发生,调用它的处理函数 ...

  8. javascript和jquey的自定义事件小结

    “通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...

  9. JS 中的事件绑定、事件监听、事件委托

    事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...

随机推荐

  1. git 切换 远程仓库

    $ git remote rm origin $ git remote add origin '仓库地址.git' $ git branch --set-upstream-to=origin/mast ...

  2. HandlerInterceptor与MethodInterceptor

    HandlerInterceptor是springMVC项目中的拦截器,它拦截的目标是请求的地址,比MethodInterceptor先执行.实现一个HandlerInterceptor拦截器可以直接 ...

  3. [译]用R语言做挖掘数据《七》

    时间序列与数据挖掘 一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou,密码shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环境,实验中会用 ...

  4. UVA 562(01背包)

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=114&page=s ...

  5. csharp:datagridview enter Half Width and Full Width characters

    /// <summary> /// 全角 /// </summary> /// <param name="unicodeString">< ...

  6. ionic--分模块

    1. app.js var app=angular.module("myApp",["ionic","myController"," ...

  7. gulp & webpack整合

    为什么需要前端工程化? 前端工程化的意义在于让前端这个行业由野蛮时代进化为正规军时代,近年来很多相关的工具和概念诞生.好奇心日报在进行前端工程化的过程中,主要的挑战在于解决如下问题:✦ 如何管理多个项 ...

  8. bootstrap 的模态框的宽与高设置

    1,改变bootstrap 的宽与高, 将style=“height:900px”放在<div class = "modal-dialog">或者更外层上,整个模态框的 ...

  9. iOS中基于WebView的HTML网页离线访问技术的实现

    其实就是MVC模式,视图在在线.离线时可以共用,控制器在在线时是由服务器端实现的,而离线时则是由本地Obj-C代码实现.具体实现方式为采用Mongoose实现. 代码为: mongoose.h mon ...

  10. No toolchains found in the NDK toolchains folder for ABI with prefix: arm-linux-androideabi

    产生背景最近把Android Studio更新到3.0,更新之后出现了build错误:No toolchains found in the NDK toolchains folder for ABI ...