绑定"/>
【js】event.target event.cuurenttarget 元素绑定
event.target event.cuurenttarget
event.target：事件触发的源头，这个元素有可能是子元素，有可能是父元素，主要是看执行事件的实际触发者。
Event.currentTarget 事件所绑定的元素。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.onload = function () {/*** 实现效果：* 点击按钮增加一行li* 点击li都可以弹出提示框*///点击按钮新增加livar btn = document.getElementById("btn")var u1 = document.getElementById("u1")btn.onclick = function () {var li = document.createElement("li")li.innerHTML = "<li><a href='javascript:;' class='link'>我是新创建的li</a></li>"u1.appendChild(li)}//为每一个超链接添加点击事件，弹出新窗口//这种写法存在一个问题，点击新增的li不会有弹框//需要给ul绑定事件才行// var li1 = document.getElementsByTagName("li")// for(var i=0; i<li1.length; i++){// li1[i].onclick = function(){// alert("点击li弹出的窗口")// }// }/*** 事件委派* - 将事件统一绑定给元素共同的祖先元素，当后代元素上的事件触发时，会一直冒泡到祖先元素* 从而通过祖先元素的响应函数来处理事件* * - 事件委派利用了冒泡，通过委派可以减少事件绑定次数，提高程序性能* *///给ul绑定事件，事件委派u1.onclick = function (event) {//怎么知道我点了谁，使用event.targetevent = event || window.eventconsole.log('event', event)console.log('event.target', event.target)console.log('event.curenttarget', event.currentTarget)//实际运用中应该是：当点击到class = link的a上面才响应弹出事件//不做判断的话，点击ul的任何地方都会响应事件alert("点击ul的单击响应窗口")//event.target.className == "link"做条件判断，只有点击到a链接上才响应弹出事件// if (event.target.className == "link") {// alert("点击ul的单击响应窗口")// }}}</script>
</head><body><button id="btn">点我新增li</button><ul id="u1" style="background-color: gainsboro;"><li><a href="javascript:;" class="link">超链接一</a></li><li><a href="javascript:;" class="link">超链接二</a></li><li><a href="javascript:;" class="link">超链接三</a></li></ul>
</body></html>
更多推荐
【js】event.target event.cuurenttarget 元素绑定
发布评论