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呢?
相关分类