zoukankan      html  css  js  c++  java
  • 事件委托


        <!-- div标签中有两个子级标签,需要给两个子级标签,添加不同的点击事件 -->
        <div>
            <span id="span1">我是第一个</span>
            <span id="span2">我是第二个</span>
        </div>

        <script>
            // 事件的委托

            // 事件委托,大部分是对于动态生成的标签对象使用的
            // 例如 table表格 凡是通过数据生成的标签对象,都是动态生成的标签对象
            //      如果需要添加事件最好写成事件委托形式
            // 1,父级标签对象是一直存在的标签对象,不会因为执行顺序获取不到
            // 2,只是给父级标签对象添加事件,不需要通过循环遍历,给所有的标签添加事件
            //   执行效率就高
            // 3,操作灵活,可以通过各种方式区分触发事件的标签对象,不用一个一个获取标签对象了
            

            // 事件不是写给当前标签的,事件绑定给父级标签
            // 通过父级标签触发事件,然后通过判断触发事件的对象,来判断需要执行的不同代码
            // 应该绑定给当前标签的事件,绑定给父级标签,通过判断触发事件的对象,来执行程序

            // 绑定给父级标签对象的事件,触发时,有可能是不同的标签对象,触发的事件
            // 可以通过 事件对象 e 中,JavaScript自动存储的数据信息中,看到不同的触发事件的对象

            // 事件的委托 事件的传播 是有本质的区别的
            // 事件的委托为什么能执行:
            //     子级标签没有绑定事件,因为是父级标签的一部分,点击子级也算是点击父级,因为也会触发父级的事件
            // 事件的传播为什么能执行:
            //     子级标签,父级标签,都要写事件,并且事件类型相同,点击子级,触发事件,并且触发父级相同事件

            // 总结 : 
            //    事件的传播: 子级父级都要绑定事件  事件类型必须相同  点击子级,触发子级事件,同时触发父级相同类型事件
            //               触发对象是相同的标签对象
            //    事件的委托: 只有父级需要绑定事件  点击子级,子级也算是父级的一部分,会触发父级绑定的事件,只是触发对象不同
            //               触发对象是不同的标签对象

            // 方法1:
            // 可以直接给两个标签绑定事件

            // var oSpan1 = document.querySelector('#span1');
            // var oSpan2 = document.querySelector('#span2');

            // oSpan1.addEventListener('click' , function(){
            //     console.log('我是span1');
            // });

            // oSpan2.addEventListener('click' , function(){
            //     console.log('我是span2');
            // });

            // 事件委托
            var oDiv = document.querySelector('div');

            oDiv.addEventListener('click' , function(e){
                e = e || window.event;
                console.log(e);
            })

        </script>
     
     // 通过事件委托,实现点击不同标签对象,执行不同程序
            // e.target 中 存储的是 触发事件的标签对象,相关信息
            // 可以通过 e.target 中 存储的 触发事件的标签对象的相关信息,区分标签对象
            // id,className,属性属性值
            //    有些属性可以直接使用 或者 可以使用通用方法 标签.getAttribute() 获取属性的数据
            // e.target.nodeName e.target.tagName  是触发事件的标签对象的名称,都是大写英文字母

            // 获取父级标签对象
            var oDiv = document.querySelector('div');

            // 给父级标签对象绑定事件
            oDiv.addEventListener('click' , function(e){
                // 1,兼容事件对象e
                e = e || window.event;

                // 2,e.target中 存储点击对象的信息
                console.dir(e.target);

                if(e.target.id === 'span1' ){
                    console.log('我是点击span1触发的');
                }else if (e.target.id === 'span2'){
                    console.log('我是点击span2触发的');
                }
            } )
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    js 与 jquery 事件对象 比较(转)
    orcle blob转换
    谷歌浏览器和IE下new Date()注意的一个小地方
    让网页在IE下淡入淡出 共17种效果
    SqlHelper的编写
    最授用的数据库连接语句 ado.net
    .NET C#获取当前网页地址信息
    JS设为首页加入收藏代码大全
    CSS进度条
    Convert.ToInt32()与int.Parse()的区别
  • 原文地址:https://www.cnblogs.com/ht955/p/14083622.html
Copyright © 2011-2022 走看看