首先,很抱歉,如果标题不是最好的标题,我找不到更好的标题.
如何使用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.