Javascript:Как заставить элемент управления отправлять сам себя в методе

StackOverflow https://stackoverflow.com/questions/619514

  •  03-07-2019
  •  | 
  •  

Вопрос 

<a href="" id="someId" onclick="SomeMethod(self);"></a>

Где какой-то метод мог бы иметь:

function SomeMethod(item)
{
  item.setAttribute('name', item.id);
}

Вместо того, чтобы:

function SomeMethod(itemId)
{
  var someItem;

  someItem = document.getElementById(itemId);
  someItem .setAttribute('name', someItem .id);

}

Глупый пример, но идея состоит в том, чтобы отправить не сам идентификатор, а фактический элемент управления, вызывающий метод.Я клянусь, что это можно сделать, но поиски не увенчались успехом...отчасти потому, что я даже не уверен, на чем искать.

Я думал, что это self, но self, похоже, не то, что я хочу, когда запускается мой скрипт.

Это было полезно?

Решение

Используйте ключевое слово this . 

<a href="" id="someId" onclick="SomeMethod(this);"></a>

Другие советы

На самом деле вам не нужно передавать this в качестве аргумента своей функции, потому что у вас есть объект события click , к которому вы можете получить доступ. Итак: 

<a href="" id="someId" onclick="clickEventHandler()"></a>
<script>
function clickEventHandler(event) {

    if (!event) {
        event = window.event; // Older versions of IE use 
                              // a global reference 
                              // and not an argument.
    };

    var el = (event.target || event.srcElement); // DOM uses 'target';
                                                 // older versions of 
                                                 // IE use 'srcElement'
    el.setAttribute('name', el.id);

}
</script>

Я склонен использовать этот подход во всех вызовах функций из атрибутов HTML: - 

onclick="SomeMethod.call(this)"

Затем в JavaScript сделайте: - 

function SomeMethod()
{
   this.setAttribute('name', this.id);
}

Это дает явное преимущество, когда вы также можете напрямую назначать свойства обработчика событий в коде Javascript: - 

document.getElementById("someID").onclick = SomeMethod

Если бы SomeMethod взял элемент контекста в качестве параметра, было бы очень неудобно его настроить: - 

function(id) {
   var elem = document.getElementById(id)
   elem.onclick = function() { SomeMethod(elem); }
}("someID");

Хуже того, это будет закрытие утечки памяти.

На данный момент: SomeMethod(this) - this возвращает объект window, поэтому не используйте его.Правильный способ использования this ключевое слово делает его релевантным контексту, поэтому используйте SomeMethod.call(this).

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top