addEventListener 到一个元素，元素本身作为参数

addEventListener to an element, with the element itself as parameter(addEventListener 到一个元素，元素本身作为参数)

问题描述

首先，对不起，如果标题不是最好的，我找不到更好的.

First of all, sorry if the title isn't the best one, I couldn't find a better one.

如何使用javascript将函数设置为Div的clickEvent，同时还将函数的参数设置为Div本身?
例如:

How can I set a function as clickEvent for a Div using javascript, and at the same time also set the parameter of the function, to be the Div itself?
For example:

我有一个 HTML 文件，其中包含:

I have a HTML file that has:

<span id='parent'>
    <div class='child'></div>
</span>

还有一个 JS 文件，其中我有以下代码:

And a JS file where I have the following code:

var el = document.getElementById("parent").getElementsByClassName("child")[0];
el.onclick = someFuntion(this);

但问题是，我希望 this 参数引用 div.child，这样当我单击 Div 时，它应该将自身作为参数传递，作为一个 DOM 元素，我可以在 someFuntion(element) 中使用它，就像任何其他 DOM 元素一样:例如，element#id.

But the thing is, I want that the this paramenter refer to the div.child, so that when I click the Div it should pass itself as a parameter, as a DOM element, making me able to use it inside of someFuntion(element) just like any other DOM element: element#id, for example.

尝试过的解决方案:

el.addEventListener("click", someFuntion(event), false);
el.addEventListener("click", someFuntion(this), false);
el.addEventListener("click", someFuntion(el), false);
$("#parent #child").bind("click", someFuntion(this));
el.onclick = someFuntion(divIntoSpan);

解决方案:
el.onclick = someFuntion;

function someFunction(e){
    if(e.target){
        //remember to use "e.target" from here on, instead of only "e"
        //e.id (error: undefined); e.target.id (correct)
    }
}

推荐答案

解决方案

只做 el.addEventListener("click", someFunction); <- 不是 someFunction()

然后使用event.target

function someFunction(e) {
   if(e.target) ...
}

替代解决方案

如果您喜欢@JaromandaX 的解决方案，您可以将其简化为

Alternative solution

If you like @JaromandaX's solution, you could simplify it to

el.addEventListener("click",someFunction.bind(null,el));

请注意，bind 返回功能.这个例子应该澄清它:

Note that bind returns function. This example should clarify it:

function someFunction(el) {
  // if used with bind below, the results are:
  console.log(this); // "This is it!"
  console.log(el); // the clicked element
}

a.addEventListener("click",someFunction.bind("This is it!",a));

建议

• someFunction 是函数本身
• someFunction() 是函数返回的内容

Advice

• someFunction is the function itself
• someFunction() is what the function returns

如果你想成为一名优秀的程序员，你不应该满足于它有效！.值得花一些时间了解它的为什么有效.如果没有这一步，您将无法确定您的代码在某些情况下是否不包含隐藏的错误.

If you want to be a good coder, you shouldn't be satisfied with It works!. It is worthy to spend some time to find out why it works. Without this step you can't be sure if your code doesn't contain hidden bugs in some cases.

您在尝试过的解决方案中拥有的是通过排列编程是一种反模式 - 我强烈推荐阅读这篇很棒的 wiki 关于反模式的文章.

What you have in Solutions tried is Programming by permutation which is an antipattern - I highly recommend reading this great wiki article about antipatterns.

这篇关于addEventListener 到一个元素，元素本身作为参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！