【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>Documenttitle>
    <script>
        window.onload = function () {
            /**
             * 实现效果:
             * 点击按钮增加一行li
             * 点击li都可以弹出提示框
             */

            //点击按钮新增加li
            var btn = document.getElementById("btn")
            var u1 = document.getElementById("u1")

            btn.onclick = function () {
                var li = document.createElement("li")
                li.innerHTML = "
  • 我是新创建的li
  • "
    u1.appendChild(li) } //为每一个超链接添加点击事件,弹出新窗口 //这种写法存在一个问题,点击新增的li不会有弹框 //需要给ul绑定事件才行 // var li1 = document.getElementsByTagName("li") // for(var i=0; i // li1[i].onclick = function(){ // alert("点击li弹出的窗口") // } // } /** * 事件委派 * - 将事件统一绑定给元素共同的祖先元素,当后代元素上的事件触发时,会一直冒泡到祖先元素 * 从而通过祖先元素的响应函数来处理事件 * * - 事件委派利用了冒泡,通过委派可以减少事件绑定次数,提高程序性能 * */ //给ul绑定事件,事件委派 u1.onclick = function (event) { //怎么知道我点了谁,使用event.target event = event || window.event console.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">点我新增libutton> <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 元素绑定_第1张图片

    你可能感兴趣的:(js,javascript)