Javascript Event Listener on click not working as

I'm trying to create one event listener to handle all my "clicks" by putting it on the body and doing some event delegation. A simple example of what i'm trying to do is this:

<html>
 <body> 
  <div id = "div1">
   <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
   <ul>
  </div>
   <script>
    document.body.addEventListener('click', function(e){
     if(e.target.id == "div1"){alert("hi")}
    })
   </script>
 </body>
</html>

What I expect from the code above is that when I click on the "li" elements, the alert would fire since it is nested within the parent div. I thought that the event would propagate to the parent and fire. However, it doesn't seem to be working at all if I click on the li elements. Can someone help explain what's happening? Thank you!

If i was to do it the normal way by adding the eventListener directly to the div id, it would then work.

标签： javascript html events addeventlistener

5条回答

男人必须洒脱

2楼-- · 2020-04-13 03:49

Here's with jquery for reference:

  $("li").on('click', function(){
      var y = this.parentElement.parentElement.id;
      if (y === 'div1')
        alert(y);
  })

This event is attached to all <li> elements within the Dom. You can follow the tree towards the root with parentElement to access the <li> containing <div> element's id property.

Alternatively:

$("div").on('click', function(){
  var y = this.id;
  if (y === 'div1')
    alert(y);
})

However, this fires on every click within any <div> element.

0人赞添加讨论(0) 举报

唯我独甜

3楼-- · 2020-04-13 03:50

You should use e.target.parentNode.parentNode.id =='div1' See the demo:

document.body.addEventListener('click', function(e) {
  if (e.target.parentNode.parentNode.id == "div1") {
    alert("hi")
  }
})

<div id="div1">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <ul>

0人赞添加讨论(0) 举报

爱情/是我丢掉的垃圾

4楼-- · 2020-04-13 03:52

There are two elements associated with an event:

event.currentTarget, which is the element that is actually calling the listener (i.e. the on which the listener has been attached), and
event.target, which is the element on which the event actually occurred

These can be the same element, parent and child, or ancestor and descendant (which is the case here).

So a click on an LI makes it the target, and since the body's click handler calls the listener, it's the currentTarget, the DIV is neither. If you put the listener on the DIV, it will then become the currentTarget.

Originally, nodes other than elements could be event targets, but in recent implementations only elements are targets.

Some links:

Note that that target and eventTarget are specified as (host) objects, they aren't necessarily elements though that is how they are mostly implemented in current browsers.

0人赞添加讨论(0) 举报

相关推荐>>

5楼-- · 2020-04-13 03:56

If you click li ,you are current 2 step childnodes from parentNode div#div1

div#div1 > ul > li[current target] //back parentNode to 2 times

<script>
    document.body.addEventListener('click', function(e){
     if(e.target.parentNode.parentNode.id == "div1"){alert("hi")}
    })
</script>

0人赞添加讨论(0) 举报

劳资没心，怎么记你

6楼-- · 2020-04-13 04:04

If you want all the LI's in your body to be clicked, you can check against the nodeName.

Here is the fiddle: https://jsfiddle.net/swaprks/f3crax1q/

Javascript:

document.body.addEventListener('click', function(e){
     if(e.target.nodeName == "LI"){alert("hi")}
})

0人赞添加讨论(0) 举报

Javascript Event Listener on click not working as

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间