zoukankan      html  css  js  c++  java
  • 探讨e.target与e.currentTarget

    target与currentTarget两者既有区别,也有联系,那么我们就来探讨下他们的区别吧,一个通俗易懂的例子解释一下两者的区别:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <div id="A">
            <div id="B">
            </div>
        </div>
    </body>
    </html>
    var a = document.getElementById('A'),
          b = document.getElementById('B');    
    function handler (e) {
        console.log(e.target);
        console.log(e.currentTarget);
    }
    a.addEventListener('click', handler, false);

    当点击A时:输出:

    1 <div id="A">...<div>

    2 <div id="A">...<div>

    当点击B时:输出:

    1 <div id="B"></div>

    2 <div id="A">...</div>

    也就是说,currentTarget始终是监听事件者,而target是事件的真正发出者

    由于要兼容IE浏览器,所以一般都在冒泡阶段来处理事件,此时target和currentTarget有些情况下是不一样的。

    如:

    function(e){
        var target = e.target || e.srcElement;//兼容ie7,8
        if(target){
            zIndex = $(target).zIndex();
        }
    }
    
    //往上追查调用处
    enterprise.on(img,'click',enterprise.help.showHelp);

    IE7-8下使用$(target).zIndex();可以获取到 
    IE7-8下使用$(e.currentTarget).zIndex();获取不到,可能是IE下既没有target,也没有currentTarget

    再来证实一下猜测,在IE浏览器下运行以下代码:

    <input type="button" id="btn1" value="我是按钮" />
    <script type="text/javascript"> 
        btn1.attachEvent("onclick",function(e){
            alert(e.currentTarget);//undefined
            alert(e.target);       //undefined
            alert(e.srcElement);   //[object HTMLInputElement]
        });
    </script>

    对象this、currentTarget和target 

    在事件处理程序内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则this、currentTarget和target包含相同的值。来看下面的例子:

     var btn = document.getElementById("myBtn");
     btn.onclick = function (event) {
         alert(event.currentTarget === this); //ture
         alert(event.target === this); //ture
     };

    这个例子检测了currentTarget和target与this的值。由于click事件的目标是按钮,一次这三个值是相等的。如果事件处理程序存在于按钮的父节点中,那么这些值是不相同的。再看下面的例子:

     document.body.onclick = function (event) {
         alert(event.currentTarget === document.body); //ture
         alert(this === document.body); //ture
         alert(event.target === document.getElementById("myBtn")); //ture
     };

    当单击这个例子中的按钮时,this和currentTarget都等于document.body,因为事件处理程序是注册到这个元素的。然而,target元素却等于按钮元素,以为它是click事件真正的目标。由于按钮上并没有注册事件处理程序,结果click事件就冒泡到了document.body,在那里事件才得到了处理。

    在需要通过一个函数处理多个事件时,可以使用type属性。例如:

    var btn = document.getElementById("myBtn");
    var handler = function (event) {
            switch (event.type) {
            case "click":
                alert("Clicked");
                break;
            case "mouseover":
                event.target.style.backgroundColor = "red";
                bread;
            case "mouseout":
                event.target.style.backgroundColor = "";
                break;
            }
        };
    btn.onclick = handler;
    btn.onmouseover = handler;
    btn.onmouseout = handler;

    感谢阅读,希望能帮助到大家!

  • 相关阅读:
    云之家技术文档下载
    原始MAC地址
    如何创建数据中心
    获取金蝶云试用许可
    【分享】工作流支持邮件提醒相关配置
    调试K3网页版需要注意的问题
    excel2010冻结行列
    Delphi 泛型 接口约束的实例 转
    delphi 各新版本特性收集
    Delphi XE Refactor重构功能简单说明 转
  • 原文地址:https://www.cnblogs.com/rakich/p/9790442.html
Copyright © 2011-2022 走看看