Question

我有一个关于使用HTML调用函数并获取此对象的问题。让我用一些代码澄清我的问题。

首先我得到了这个Javascript：

function Example() {
    var x_val = arguments[0];
    var y_val = arguments[1];
    var z_val = arguments[2];    
    console.log(x_val,y_val,z_val);
}

我通过以下HTML调用此Javascript：

<a id="test" href="#" onmouseover="Example(100,200,400)">test</a>
<a id="test2" href="#" onmouseover="Example(400,600,700)">test</a>
<a id="test3" href="#" onmouseover="Example(400,500,900)">test</a>

我想要的是当我调用函数时我想知道哪个对象调用了函数并返回整个对象。

因此，如果我使用以下超链接调用Example（）函数：

<a id="test2" href="#" onmouseover="Example(400,600,700)">test</a>

我想得到以下结果：

outerHTML: <a id="test2" href="#" onmouseover="Example(400,600,700)">test</a>

这可能吗？（JSFiddle：https://jsfiddle.net/kny5jj8h/）

Answer 1

只需将此参数发送到函数并输出outerHtml：

<a id="test" href="#" onmouseover="Example(this,100,200,400)">test</a>


function Example(elem) {
    var x_val = arguments[1];
    var y_val = arguments[2];
    var z_val = arguments[3];    
    console.log(x_val,y_val,z_val);
    return elem.outerHTML;
}

Answer 2

传递this，如

<a id="test" href="#" onmouseover="Example(this,100,200,400)">test</a>

function Example() {
    var elem = arguments[0];
    var x_val = arguments[1];
    var y_val = arguments[2];
    var z_val = arguments[3];    
    console.log(x_val,y_val,z_val,elem.outerHTML);
}

更好的方法是做

<a id="test" class="coordtest" href="#" data-coord="100,200,400">test</a>

并在头脑中

window.onload=function() {
  var coordlinks = document.querySelectorAll(".coordtest");
  for (var i=0;i<coordlinks.length;i++) {
    coordlinks[i].onmouseover=function(e) {
      var coords = this.getAttribute("data-coord").split(",");
      var x_val = coords[0];
      var y_val = coords[1];
      var z_val = coords[2];
      console.log(this,x_val,y_val,z_val);
    }
  }
}

或在jQuery中：

$(function() {
  $(".coordtest").on("mouseover",function(e) {
    var coords = $(this).data("coord").split(",");
    var x_val = coords[0];
    var y_val = coords[1];
    var z_val = coords[2];
    console.log($(this),x_val,y_val,z_val);
  });
});

Answer 3

将'this'作为参数传递并不适用于所有情况。使用window.event获取事件的目标。在一些较旧的浏览器中，没有定义event.target，在这种情况下，event.srcElement通常是。

function Example() {
    var target = window.event.target || window.event.srcElement;
    alert(target.id);

    var x_val = arguments[0];
    var y_val = arguments[1];
    var z_val = arguments[2];    
    console.log(x_val,y_val,z_val);
}

Answer 4

你可以明确地传递this，就像Example( this, 100, 200,300 )一样，但它会改变传递的参数数量，你需要修改这个并不总是最好的功能（例如，应用程序的其他部分调用相同的函数并依赖于当前的参数顺序。）

您还可以使用.call传递对节点的引用：

<span onmouseover="Example.call(this, 10,20,30)">span</span>

这样就可以像以前一样传递参数，但this绑定到span元素：

function Example() {
    var x_val = arguments[0];
    var y_val = arguments[1];
    var z_val = arguments[2];    
    console.log(this, x_val,y_val,z_val);
}

http://jsfiddle.net/8govrcLy/2/

获取调用该函数的对象

4 个答案: