javascript - 如何將觸發 `onclick` 事件的元素的標識傳遞給事件處理函數

  显示原文与译文双语对照的内容
0 0

如何將觸發 onclick 事件的元素的標識傳遞給事件處理函數。

我正在做這樣的事情-

<link onclick="doWithThisElement(id_of_this_element)"/>
时间:原作者:6个回答

0 0

你只需傳遞元素本身,而不傳遞標識:

<link onclick="doWithThisElement(this)"/>

或者,如果你堅持傳遞標識:

<link onclick="doWithThisElement(this.id)"/>

下面是JSFiddle演示:http://jsfiddle.net/dRkuv/

原作者:
0 0

觸發事件的元素與你綁定處理程序的元素不同,因為事件 將DOM樹的 bubble冒泡。

如果你想要得到的id元素事件處理程序被綁定,你可以很容易與 this.id ( this 引用元素) 。

但是如果你想要得到元素事件源自哪裡,那麼你必須訪問它在w3c兼容的瀏覽器和 event.srcElementevent.target IE 8下面。

我將避免在 onXXXX HTML屬性中編寫大量 JavaScript 。 我只傳遞 event 對象並將代碼放入處理程序( 或者在一個額外的函數中) 中提取元素:

<div onlick="doWithThisElement(event)">

然後處理程序將如下所示:

function doWithThisElement(event) {
 event = event || window.event;//IE
 var target = event.target || event.srcElement;//IE
 var id = target.id;
//...
}

我建議閱讀關於 quirksmode.org的事件處理程序的優秀文章。


BTW

<link onclick="doWithThisElement(id_of_this_element)"/>

幾乎沒有意義( <link> 是一個只能出現在 <head> 中的元素( 如果可能的話) ) 將不起作用。

原作者:
0 0

下面是一個 non-standard,但 跨瀏覽器 方法可能有用,如果你不想傳遞任何參數:

html :

<div onclick=myHandler() id="my element's id">&rarr; Click Here! &larr;</div>

腳本:

function myHandler(){
 alert(myHandler.caller.arguments[0].target.id)
}

演示:http://codepen.io/mrmoje/pen/ouJtk

原作者:
0 0

我建議使用jquery助手。

使用 jQuery,你就可以獲得這裡元素的標識

$(this).attr('id');

沒有 jquery,如果我記得正確的話,我們使用的是

this.id

希望有幫助:

原作者:
0 0

用戶這個:

<link onclick='doWithThisElement(this.attributes["id"].value)'/>

在 onclick JavaScript的上下文中,它引用當前元素。

原作者:
0 0
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src="jquery-2.1.0.js"></script> 
<script type="text/javascript"> 
function openOnImageClick(event)
{
//alert("Jai Sh Raam");
//document.getElementById("images").src ="fruits.jpg";
var target = event.target || event.srcElement;//IE
console.log(target);
console.log(target.id);
 var img = document.createElement('img');
 img.setAttribute('src', target.src);
 img.setAttribute('width', '200');
 img.setAttribute('height', '150');
 document.getElementById("images").appendChild(img);
}
</script>
</head>
<body>
<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>
<div id="images"> 
</div>
<img id="muID1" src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)"/>
<img id="myID2" src="sabaLogo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)"/>
</body>
</html> 
原作者:
...