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

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

但事实是,我想的是,thisparamenter参考div.child,所以,当我点击的股利应本身作为参数传递,作为一个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);

解:
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

解

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

然后使用 event.target

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

替代方案

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

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

请注意,bind返回函数.这个例子应该澄清一下:

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

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

您在解决方案中尝试的是通过排列编程这是一个反模式 - 我强烈建议您阅读这篇关于反模式的伟大维基文章.