Question

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

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

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

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

还有一个 JS 文件，其中包含以下代码：

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

但问题是，我希望this参数引用div.child，这样当我点击Div时它应该将自身作为参数传递，作为DOM元素，让我能够在someFuntion(element)内部使用它就像任何其他DOM元素一样：element#id。

尝试解决方案：

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);

SOLUTION：
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)
    }
}

Answer 1

解决方案

只需执行eval＆lt; - not el.addEventListener("click", someFunction);

然后使用someFunction()

event.target

替代解决方案

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

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

请注意bind返回功能。这个例子应该澄清一下：

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

建议

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是函数返回的内容

如果你想成为一名优秀的程序员，你不应该满意它有效！。值得花一些时间来找出为什么它的工作原理。如果没有这一步，您无法确定您的代码在某些情况下是否包含隐藏的错误。

你在尝试的解决方案中的内容是Programming by permutation这是一个反模式 - 我强烈建议你阅读这个伟大的wiki article about antipatterns。

Answer 2

如果由于某种原因你必须按照你想要的方式进行

el.addEventListener('click', function(e) { 
    someFunction(e.target);
}, false);

但JanTotoň给出的答案是首选方式

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

2 个答案:

解决方案

替代解决方案

建议