Получить идентификатор элемента, который вызывает функцию

Как я могу получить идентификатор элемента, который вызвал функцию JS?

body.jpg - это изображение собаки, когда пользователь наводит указатель мыши на экран в разных частях тела, на экране отображается увеличенное изображение. Идентификатор элемента области идентичен имени файла изображения за вычетом папки и расширения.

<div>
    <img src="images/body.jpg" usemap="#anatomy"/>
</div>

<map name="anatomy">
  <area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom()"/>
</map>

<script type="text/javascript">
function zoom()
{
 document.getElementById("preview").src="images/nose.jpg";
}
</script>

<div>
<img id="preview"/>
</div>

Я провел свое исследование и приехал в Кару в качестве последнего средства. Я предпочитаю решение, которое не связано с JQuery.

Ответ 1

Передайте ссылку на элемент в функцию, когда она вызывается:

<area id="nose" onmouseover="zoom(this);" />

<script>
  function zoom(ele) {
    var id = ele.id;

    console.log('area element id = ' + id);
  }
</script>

Ответ 2

Я удивлен, что никто не упомянул об использовании this в обработчике событий. Он работает автоматически в современных браузерах и может работать в других браузерах. Если вы используете addEventListener или attachEvent для установки обработчика событий, вы можете автоматически присвоить значение this объекту, созданному событием.

Кроме того, пользователь программно установленных обработчиков событий позволяет вам отделить код JavaScript от HTML, который часто считается хорошим.

Вот как вы могли бы сделать это в своем коде в простом javascript:

Удалите onmouseover="zoom()" из своего HTML и установите обработчик событий в свой javascript следующим образом:

// simplified utility function to register an event handler cross-browser
function setEventHandler(obj, name, fn) {
    if (typeof obj == "string") {
        obj = document.getElementById(obj);
    }
    if (obj.addEventListener) {
        return(obj.addEventListener(name, fn));
    } else if (obj.attachEvent) {
        return(obj.attachEvent("on" + name, function() {return(fn.call(obj));}));
    }
}

function zoom() {
    // you can use "this" here to refer to the object that caused the event
    // this here will refer to the calling object (which in this case is the <map>)
    console.log(this.id);
    document.getElementById("preview").src="http://photos.smugmug.com/photos/344290962_h6JjS-Ti.jpg";
}

// register your event handler
setEventHandler("nose", "mouseover", zoom);

Ответ 3

Вы можете использовать 'this' в обработчике событий:

document.getElementById("preview").onmouseover = function() {
    alert(this.id);
}

Или передать объект события обработчику следующим образом:

document.getElementById("preview").onmouseover = function(evt) {
    alert(evt.target.id);
}

Для присоединения событий рекомендуется использовать attachEvent (для IE < 9)/addEventListener (IE9 и другие браузеры). Пример выше для краткости.

function myHandler(evt) {
    alert(evt.target.id);
}

var el = document.getElementById("preview");
if (el.addEventListener){
    el.addEventListener('click', myHandler, false); 
} else if (el.attachEvent){
    el.attachEvent('onclick', myHandler);
}

Ответ 4

Вы можете запрограммировать настройку обработчика следующим образом:

<area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom.call(this)"/>

Тогда this в вашем обработчике будет ссылаться на элемент. Теперь я предоставлю оговорку, что я не уверен на 100%, что происходит, когда у вас есть обработчик в теге <area>, во многом потому, что я не видел тега <area> в течение примерно десятилетия, Я думаю, что это должно дать вам тег изображения, но это может быть неправильно.

edit — да, это неправильно - вы получаете тег <area>, а не <img>. Таким образом, вам придется получить родительский элемент (карту), а затем найти изображение, которое его использует (т.е. <img>, атрибут "usemap" относится к имени карты).

изменить снова — кроме этого не имеет значения, потому что вы хотите область "id" durr. Извините за неправильное чтение.

Ответ 5

Я знаю, что вы не хотите, чтобы решение jQuery, но включающее javascript внутри HTML, было большим, нет.

Я имею в виду, что вы можете это сделать, но есть много причин, почему вы не должны (читайте на ненавязчивом javascript, если хотите подробности).

Итак, в интересах других людей, которые могут видеть этот вопрос, вот решение jQuery:

$(document).ready(function() {
  $('area').mouseover(function(event) {
    $('#preview').attr('src', 'images/' + $(event.srcElement).attr('id'));
  });
});

Главное преимущество заключается в том, что вы не смешиваете javascript-код с HTML. Кроме того, вам нужно только написать один раз, и он будет работать для всех тегов, а не для указания обработчика для каждого отдельно.

Дополнительным преимуществом является то, что каждый обработчик jQuery получает объект события, который содержит много полезных данных - например, источник события, тип события и т.д., что значительно облегчает запись типа кода, который вы используете.

Наконец, поскольку это jQuery, вам не нужно думать о кросс-браузерных материалах - главное преимущество, особенно при работе с событиями.

Ответ 6

Я также хочу, чтобы это произошло, поэтому просто передайте идентификатор элемента в вызываемой функции и используется в моем файле js:

function copy(i,n)
{
 var range = document.createRange();
range.selectNode(document.getElementById(i));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range); 
document.execCommand('copy');
window.getSelection().removeAllRanges();
document.getElementById(n).value = "Copied";
}