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


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

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

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

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

    <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事件函数
        });

     事件委托:

    $("要绑定标签的上级标签").on("click","要绑定的标签",function)
    
    $("要绑定标签的上级标签").delegate("要绑定的标签","click",function)
  • 相关阅读:
    windows下安装mysql-5.7.11-winx64
    memset库函数
    [转]全面解析《嵌入式程序员应该知道的16个问题》
    Cent OS 7 下 Redis 5.0.5 安装与配置
    SVN+TortoiseSVN的Windows版安装和配置
    工具和环境--目录(随时更新)
    Linux安装和配置Nodejs和NPM
    Windows10命令提示符窗口大小导致执行效率不同问题
    Windows安装Nodejs和npm以及创建项目
    WebStorm 2019.3.2安装与配置
  • 原文地址:https://www.cnblogs.com/ssyfj/p/8492101.html
Copyright © 2020-2023  润新知