Могу ли я узнать из метода Javascript, кто \, который элемент DOM назвал меня?

<a onclick ="foo()" href="bar.html" >Link </a>

<script>

...
function foo(){
  //I want to know the href property of whoever called me.
  //something like this.caller.href ??
}

</script>

Я предполагаю, что могу просто назначить все идентификаторы элементов, а затем передать свой собственный ID в метод JS, который я вызываю, но я искал лучший способ.

Ответ 1

Когда браузер вызывает функцию в результате события DOM, JavaScript передает объект этой функции, которая содержит информацию о событии. Но в IE он работает несколько иначе, чем другие. Чтобы работать во всех браузерах, foo() должен принять аргумент * (я использую e):

function foo(e) {
  var sender = (e && e.target) || (window.event && window.event.srcElement);
  //sender is the DOM element which was clicked
  alert(sender.href); //assumes the clicked element was an <a>
}

Первая строка назначит "отправитель" значение элемента, инициировавшего событие во всех браузерах.

Теперь, если ваш <a> содержит дочерние элементы (например, изображение), и один из них был нажатым фактическим элементом, тогда этот элемент станет "отправителем". Если это возможно, вам нужно пройти DOM от отправителя до тех пор, пока вы не найдете свою ссылку:

function foo(e) {
  var sender = (e && e.target) || (window.event && window.event.srcElement);
  //sender is the DOM element which was clicked

  var myEle = sender;

  //find the parent node until we hit the <a>
  while(myEle.tagName.toUpperCase() != 'A') {
    myEle = myEle.parentNode;
  }

  //myEle is now the <a>. sender is still the originator.
  alert(myEle.href);
}

* Вы также можете получить доступ к любым аргументам, переданным функции, даже если они не объявлены, с помощью массива arguments[].

Ответ 2

<a onclick="foo(this)" href="bar.html">Link</a>

Тогда ваш JavaScript будет выглядеть следующим образом:

function foo(ob) {
    alert(ob.href); //or whatever you want to happen preferably pass an id 
}

Используйте селектор "this", если вы хотите передать сам объект функции.

Ответ 3

Соглашение состоит в том, что это относится к элементу DOM, к которому применяется обработчик. Поэтому, если вы хотите узнать href ссылки:

function foo () {
   // Inside foo this will refer to the DOM element if called as an event handler
   var href = this.href
}

Это должно сделать трюк.

EDIT: Если foo вызывается из onclick-обработчика явно в DOM, то есть

<a [...] onclick="foo()">

тогда исходный контекст этого будет потерян внутри foo. Чтобы исправить это, можно связать вызов функции с исходным контекстом:

<a [...] onclick="foo.call(this)">

Ответ 4

Вы можете передать значение атрибута href функции при ее вызове:

<a href="http://www.example.com" onclick="foo(this.href)">link</a>

Ответ 5

Как передать аргумент?

foo(id);

Ответ 6

вам не нужно передавать элемент в качестве аргумента вашей функции. вы можете использовать

var a = event.srcElement;
alert(a.href);