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

Question

Как я могу получить идентификатор элемента, который вызвал функцию 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>

Я провел свое исследование и пришел к SO в качестве последнего средства.Я предпочитаю решение, которое не включает jQuery.

Answer 1

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

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

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

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

Answer 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);

Answer 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 и другие браузеры) для вложения событий. Пример выше для краткости. </p>

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);
}

Answer 4

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

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

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

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

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

Answer 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, вам не нужно думатьо кросс-браузерных вещах - главное преимущество, особенно при работе с событиями.

Answer 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";
}