Как передать идентификатор элемента, который запускает событие `onclick` для функции обработки событий

Как передать идентификатор элемента, который запускает событие onclick для функции обработки событий.

Я делаю что-то вроде этого -

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

Ответ 1

Вместо передачи идентификатора вы можете просто передать сам элемент:

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

Или, если вы настаиваете на передаче идентификатора:

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

Здесь JSFiddle Demo: http://jsfiddle.net/dRkuv/

Ответ 2

Элемент, вызвавший событие, может отличаться от того, с которым вы связали обработчик, потому что события создают пузырь в дереве DOM.

Итак, если вы хотите получить идентификатор элемента, к которому привязан обработчик событий, вы можете сделать это легко с помощью this.id (this относится к элементу).

Но если вы хотите получить элемент, в котором произошло событие, вам нужно получить к нему доступ с помощью event.target в браузерах, совместимых с W3C, и event.srcElement в IE 8 и ниже.

Я бы не писал много JavaScript в атрибутах onXXXX HTML. Я бы передал только объект 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>, привязка обработчика события (если вообще возможно) не будет иметь эффекта).

Ответ 3

Здесь нестандартный, но кросс-браузер метод, который может быть полезен, если вы не хотите передавать какие-либо аргументы: -

Html:

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

Script:

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

Демо: http://codepen.io/mrmoje/pen/ouJtk

Ответ 4

Я бы предложил использовать jquery mate.

С помощью jQuery вы сможете получить идентификатор этого элемента

$(это).attr( 'ID');

без jquery, если я правильно помню, мы использовали для доступа к id с

this.id

Надеюсь, что помогает:)

Ответ 5

Используйте это:

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

В контексте JavaScript onclick этот относится к текущему элементу (который в этом случае является целым HTML-элементом link).

Ответ 6

<!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>