为什么html event.currentTarget在您登录时为null

Question

function hide (e){
    console.log(e);//but in the Console click on triangle the currentTarget is null,why?
    console.log(e.currentTarget) //is an object.
}
var ps = document.getElementsByTagName('p');

for(var i = 0; i < ps.length; i++){
    ps[i].addEventListener('click', hide, false);
}

i thought the currentTarget is not 'available' in html for 2 years(i used to be as3 developer).just right now i try to find out why it not 'available',but when i find this reference MDN Event.target ,the e.currentTarget shows a object,that confused me.now with the currentTarget 'available' for me,it make my life easier,but i just want to know why console lie to me

Answer 1

The problem is that the tags are dynamically-generated , so you have to hoist the scope, and attach the event listener to an element that is not dynamically generated .

Here's an example with jQuery, attaching the listener to document :

 $(document).on("click", "p", function(e) { console.log(e.currentTarget); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> One </p> <p> Two </p> <p> Three </p> 

Because document is always available, it will always have the listener attached. It then simply 'waits' for the dynamic elements to be created, before applying their click events.

I've also created a fiddle demonstrating this here .

Hope this helps! :)