event.target
返回: Element
event.target
描述:初始化该事件的DOM元素。
加入于: 1.0
event.targettarget
属性可以注册事件的元素,或者是它的后代元素。它通常用来对event.target
和this
作比较,以确定事件是否是因为事件冒泡而受处理的。当事件冒泡的时候,这个属性可以用在事件委托上。
示例
显示所点击的标签名
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>event.target demo</title> <style> span, strong, p { padding: 8px; display: block; border: 1px solid #999; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div id="log"></div> <div> <p> <strong><span>click</span></strong> </p> </div> <script> $( "body" ).click(function( event ) { $( "#log" ).html( "clicked: " + event.target.nodeName ); }); </script> </body> </html>
演示结果
实现一个简单的事件委托:在一个无序列表上添加点击事件处理函数,该列表的子元素<li>的子元素都被隐藏。点击任一个<li;>会切换它的子元素的显示和隐藏(参见.toggle()
)。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>event.target demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <ul> <li>item 1 <ul> <li>sub item 1-a</li> <li>sub item 1-b</li> </ul> </li> <li>item 2 <ul> <li>sub item 2-a</li> <li>sub item 2-b</li> </ul> </li> </ul> <script> function handler( event ) { var target = $( event.target ); if ( target.is( "li" ) ) { target.children().toggle(); } } $( "ul" ).click( handler ).find( "ul" ).hide(); </script> </body> </html>
演示结果