Event.target和Event.currentTarget的區別

時間 2019-11-20

標籤 event.target event target event.currenttarget currenttarget 區別简体版

原文原文鏈接

 <style>
    * {
        margin:0;
        padding:0;
        list-style:none;
    }
    #ul {
        width:400px;
        height:250px;
        margin:0 auto;
    }
    
  </style>
 </head>
 <body>
    <ul id='ul' style='border:1px solid black'>UL
        <li>LI<a href=''>a</a></li>
        <li>LI<a href=''>a</a></li>
        <li>LI<a href=''>a</a></li>
        <li>LI<a href=''>a</a></li>
    </ul>
 <script>
    var EventUtil = {
        addHandler : function(element,type,handler){
            if (element.addEventListener)//標準
            {
                element.addEventListener(type,handler,false);
            }else if (element.attachEvent)//老IE
            {    //handler,必須保證this指向調用的對象，由於在IE下指向window
                element.attachEvent('on'+type,handler);
            }else {
                element['on'+type] = handler;
            }
        },
        removeHandler : function(element,type,handler){
            if (element.removeEventListener)
            {
                element.removeEventListener(type,handler,false);
            }else if (element.detachEvent)
            {
                element.detachEvent('on'+type,handler);
            }else {
                element['on'+type] = null;
            }
        },
        init: function(arr){
            for (var i=0;i<arr.length ;i++ )
            {
                arr[i].style.height = 50+'px';
                if (i%2 == 0)
                {
                    arr[i].style.background = 'red';
                }else {
                    arr[i].style.background = 'blue';
                }
            }
        },
        fn: function(event){
            var bar = event.target;//返回真正的點擊的元素
            var tar = bar.nodeName.toLowerCase();
            console.log('你點擊了：'+tar);
            event.preventDefault();
        }
    },
    oUl = document.getElementById('ul'),
    aLi = oUl.getElementsByTagName('li');
    EventUtil.init(aLi);
    EventUtil.addHandler(oUl,'click',EventUtil.fn);
 </script>
 </body>

target返回的是真正的點擊的元素node

 <style>
    * {
        margin:0;
        padding:0;
        list-style:none;
    }
    #ul {
        width:400px;
        height:250px;
        margin:0 auto;
    }
    
  </style>
 </head>
 <body>
    <ul id='ul' style='border:1px solid black'>UL
        <li>LI<a href=''>a</a></li>
        <li>LI<a href=''>a</a></li>
        <li>LI<a href=''>a</a></li>
        <li>LI<a href=''>a</a></li>
    </ul>
 <script>
    var EventUtil = {
        addHandler : function(element,type,handler){
            if (element.addEventListener)//標準
            {
                element.addEventListener(type,handler,false);
            }else if (element.attachEvent)//老IE
            {    //handler,必須保證this指向調用的對象，由於在IE下指向window
                element.attachEvent('on'+type,handler);
            }else {
                element['on'+type] = handler;
            }
        },
        removeHandler : function(element,type,handler){
            if (element.removeEventListener)
            {
                element.removeEventListener(type,handler,false);
            }else if (element.detachEvent)
            {
                element.detachEvent('on'+type,handler);
            }else {
                element['on'+type] = null;
            }
        },
        init: function(arr){
            for (var i=0;i<arr.length ;i++ )
            {
                arr[i].style.height = 50+'px';
                if (i%2 == 0)
                {
                    arr[i].style.background = 'red';
                }else {
                    arr[i].style.background = 'blue';
                }
            }
        },
        fn: function(event){
            var bar = event.currentTarget;//返回真正的點擊的元素
            var tar = bar.nodeName.toLowerCase();
            console.log('你點擊了：'+tar);
            event.preventDefault();
        }
    },
    oUl = document.getElementById('ul'),
    aLi = oUl.getElementsByTagName('li');
    EventUtil.init(aLi);
    EventUtil.addHandler(oUl,'click',EventUtil.fn);
 </script>
 </body>

返回的是綁定的事件的對象和this同樣this

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。