querySelectorAll委托事件目标的子级也给绑定事件了

Question

html

    <ul class="parent">
        <li class="nodeChild1">
        按钮1
            <a href="javascript:void(0)">子级</a>
        </li>
        <li class="nodeChild2">按钮2</li>
        <li class="nodeChild3">按钮3</li>
        <li class="nodeChild4">按钮4</li>
    </ul>

script

    var show = function (e) {
        var pDiv = e.target,
            cDiv = document.createElement('div');
        pDiv.appendChild(cDiv);
        cDiv.innerText = 'hhhhhhhhh';
    }
    var unboundForEach = Array.prototype.forEach,
        forEach = Function.prototype.call.bind(unboundForEach);
    forEach(document.querySelectorAll('.parent li'), function (el) {
        el.addEventListener('click', function (e) {
            show.call(this,e)
            console.log(e)
        });

    });

当我点击className‘nodeChild1’里面的a标签时，a标签也执行了show()函数，并且在a标签里面创建了div，请问这是冒泡的原理吗？点击a标签的时候怎么让show()方法的指针指向他的父级li在其里面创建div呢？

Answer 1

在你代码上改了两处，结果看看是不是你想要的

var show = function () {

  var pDiv = this,  //第一处
    cDiv = document.createElement('div');
  pDiv.appendChild(cDiv);
  cDiv.innerText = 'hhhhhhhhh';
}
var unboundForEach = Array.prototype.forEach,
  forEach = Function.prototype.call.bind(unboundForEach);
forEach(document.querySelectorAll('.parent li'), function (el) {
  el.addEventListener('click', function (e) {
    show.call(el, e)  //第二处
    console.log(e)
  });

});

Answer 2

要判断target的nodeName，不是li的话就找他的parent