码迷,mamicode.com
首页 > Web开发 > 详细

js和jQuery中的事件绑定与普通事件

时间:2018-03-02 12:21:30      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:函数   AC   body   gpo   fun   不可   直接   log   elements   

普通事件,是指直接对元素进行事件注册,然后触发

而事件绑定是将事件注册到元素上

两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个)

而事件绑定是可以重复绑定多个事件,而且都可以触发

<html>

    <a class="ack1">点击触发绑定事件</a><br><br>
    <a class="ack2">点击触发普通事件</a>
</html>

<script>
    function foo1(){
        alert(‘触发点击1‘);
    }
    function foo2(){
        alert(‘触发点击2‘);
    }

    var ack1=document.getElementsByClassName("ack1");
    ack1.addEventListener(‘click‘,foo1);
    ack1.addEventListener(‘click‘,foo2);
    //弹出 触发点击1 和 触发点击2

    var ack2 = document.getElementsByClassName("ack2");
    ack2.onclick = foo1;
    ack2.onclick = foo2;
    //只会弹出 触发点击2
</script>

 

而在jQuery中则有点不同,而且jQuery本身允许通过普通事件添加多个触发函数

    function foo1(){
        alert(‘触发点击1‘);
    }
    function foo2(){
        alert(‘触发点击2‘);
    }

    //都会触发两个函数 弹出 触发点击1 触发点击2
    $(".ack1").on(‘click‘,foo1);
    $(".ack1").on(‘click‘,foo2);
    
    $(".ack2").click(foo1);
    $(".ack2").click(foo2);
    //都会触发两个函数 弹出 触发点击1 触发点击2

jQuery中事件绑定是指为动态创建的元素绑定上事件触发,不只是为元素绑定多个事件

注意对元素动态绑定事件,一般需要通过父类元素为其绑定,才会使该子类(刚刚添加的元素)可以被触发

    $(document).on(‘click‘,‘.ack1‘,foo1);
    $(".ack1").click(function(){
        var ele=$(this).clone();
        $(this).after(ele);  //后克隆的元素依旧可以触发foo1事件函数
    });

    $(".ack2").click(foo2);
    $(".ack2").click(function(){
        var ele=$(this).clone();
        $(this).after(ele);  //无法触发foo2事件函数
    });

 

js和jQuery中的事件绑定与普通事件

标签:函数   AC   body   gpo   fun   不可   直接   log   elements   

原文地址:https://www.cnblogs.com/ssyfj/p/8492101.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!