我可以从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>

I guess I could just assign all element IDs and then pass my own ID to the JS method I'm calling, but I was looking for a better way.

我想我可以只分配所有元素ID,然后将我自己的ID传递给我正在调用的JS方法,但我一直在寻找更好的方法。

6 个解决方案

#1

When the browser calls a function as the result of a DOM event, JavaScript passes an object to that function which contains information about the event. But it works a little differently in IE than others. To work in all browsers, foo() should take an argument* (I use e):

当浏览器调用函数作为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>
}

The first line will assign "sender" the value of the element which originated the event in all browsers.

第一行将为“sender”分配在所有浏览器中生成事件的元素的值。

Now, if your <a> contains child elements (for example, an image) and one of those was the actual element clicked, then that element will become the "sender". If this is a possibility, you need to walk up the DOM from the sender until you find your link:

现在,如果你的包含子元素(例如,一个图像),其中一个是点击的实际元素,那么该元素将成为“发送者”。如果有可能,您需要从发件人处走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);
}

*You can also access any arguments passed to the function, even if they are not declared, by using the arguments[] array.

*您也可以使用arguments []数组访问传递给函数的任何参数,即使它们未被声明。

#2

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

Then your JavaScript would be:

然后你的JavaScript将是:

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

Use the "this" selector if you want to pass the object itself to the function.

如果要将对象本身传递给函数,请使用“this”选择器。

#3

The convention here is that this refers to the DOM element that the handler is invoked on. So if you want to know the href of the link:

这里的约定是,这指的是调用处理程序的DOM元素。所以如果你想知道链接的href:

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

That should do the trick.

这应该够了吧。

EDIT: If foo is called from an onclick-handler explicitly in the DOM, i.e.

编辑:如果在DOM中显式地从onclick处理程序调用foo,即

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

then the original context of this will be lost inside of foo. To fix this one can bind the function call to the original context:

然后原始的上下文将在foo中丢失。要修复此问题,可以将函数调用绑定到原始上下文:

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

#4

You could pass the value of the href attribute to the function when it is called:

您可以在调用时将href属性的值传递给函数:

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

#5

How about passing an argument?

通过论证怎么样?

foo(id);

#6

you don't need to pass in the element as an argument to your function. you can use

您不需要将元素作为参数传递给函数。您可以使用

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

#1

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