你的位置:首页 > Java教程

[Java教程]e.target与事件委托简例


target定义:

    target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。

语法:

    event.target

    event.target.nodeName    //获取事件触发元素标签name(li,p...)

    event.target.id       //获取事件触发元素id

    event.target.className  //获取事件触发元素classname

    event.target.innerHTML  //获取事件触发元素的内容(li)

    等。。。

jquery:this 与 e.target区别

    this会冒泡。e.target不冒泡就是指向事件触发的dom。

事件委托简单例子:

    给ul添加监听click事件,利用冒泡机制具体捕获是ul下的哪一个li触发的click事件

HTML

1 <ul id="ul">2   <li id="li-1">1</li>3   <li id="li-2">2</li>4   <li id="li-3">3</li>5   <li id="li-4">4</li>6   <li id="li-5">5</li>7 </ul>

JS

1 // 给ul添加监听器2 document.getElementById("ul").addEventListener("click",function(e) {3   // e.target是被点击的元素!4   // 筛选触发事件的子元素如果是li执行的事件5   if(e.target && e.target.nodeName == "LI") {6     // 获取到具体事件触发的li,输出其id7     console.log("List item ",e.target.id.replace("post-")," was clicked!");8   }9 });

如有错误,还请指出以便改正。