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

首先,很抱歉,如果标题不是最好的标题,我找不到更好的标题.

如何使用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);

但问题是,我希望此参数引用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);

解:
    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的解决方案,可以将其简化为

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

如果您想成为一名优秀的编码员,则不应该对它起作用感到满意!值得花一些时间来找出它为什么起作用.如果没有此步骤,您将无法确定代码在某些情况下是否不包含隐藏的错误.

您在解决方案中尝试使用的是Programming by permutation,这是一种反模式-我强烈建议您阅读此出色的Wiki article about antipatterns.

上一篇:javascript-多个元素的AddEventListener不适用于“焦点”事件


下一篇:javascript – 未捕获TypeError:对象#没有方法’addEventListener’