如何将触发onclick
事件的元素的id传递给事件处理函数.
我正在做这样的事 -
<link onclick="doWithThisElement(id_of_this_element)" />
Run Code Online (Sandbox Code Playgroud)
jbr*_*ver 114
您可以直接传递元素本身,而不是传递ID:
<link onclick="doWithThisElement(this)" />
Run Code Online (Sandbox Code Playgroud)
或者,如果您坚持要传递ID:
<link id="foo" onclick="doWithThisElement(this.id)" />
Run Code Online (Sandbox Code Playgroud)
这是JSFiddle演示:http: //jsfiddle.net/dRkuv/
Fel*_*ing 17
触发事件的元素可能与绑定处理程序的元素不同,因为事件会冒出DOM树.
因此,如果要获取事件处理程序绑定的元素的ID ,可以使用this.id
(this
参考元素)轻松完成.
但是,如果你想获得该事件的元素起源,那么你有访问它event.target
在W3C兼容的浏览器,并event.srcElement
在IE 8及以下.
我会避免在onXXXX
HTML属性中编写大量JavaScript .我只传递event
对象并将代码提取到处理程序中(或在额外函数中)提取元素:
<div onlick="doWithThisElement(event)">
Run Code Online (Sandbox Code Playgroud)
然后处理程序看起来像这样:
function doWithThisElement(event) {
event = event || window.event; // IE
var target = event.target || event.srcElement; // IE
var id = target.id;
//...
}
Run Code Online (Sandbox Code Playgroud)
我建议在quirksmode.org上阅读有关事件处理的优秀文章.
顺便说一句
<link onclick="doWithThisElement(id_of_this_element)" />
Run Code Online (Sandbox Code Playgroud)
几乎没有意义(<link>
是一个只能出现在<head>
,绑定事件处理程序(如果可能的话)将无效的元素).
这是一个非标准但跨浏览器的方法,如果你不想传递任何参数,它可能会很有用: -
HTML:
<div onclick=myHandler() id="my element's id">→ Click Here! ←</div>
Run Code Online (Sandbox Code Playgroud)
脚本:
function myHandler(){
alert(myHandler.caller.arguments[0].target.id)
}
Run Code Online (Sandbox Code Playgroud)
演示:http://codepen.io/mrmoje/pen/ouJtk
归档时间: |
|
查看次数: |
190177 次 |
最近记录: |