我试图在没有jQuery的情况下在我的网站上实现点击事件.
我想针对多个选择器.
在jQuery中,这可以通过简单的逗号分隔项目来完成,如下所示.
jQuery(document).on('click','#test1,#test2',function (event) {
alert($(this).text());
});
如何在普通的javascript中轻松完成？
我已经尝试了下面的工作,但似乎应该有一个更简单的方法,特别是如果我想要点击以上的警报？我想针对多个特定的选择器,而不是所有的div
var test1 = document.getElementById('test1');
var test2 = document.getElementById('test2');
if (test1.addEventListener || test2.addEventListener) {
test1.addEventListener('click',function(event) {
alert(this.innerHTML);
});
test2.addEventListener('click',function(event) {
alert(this.innerHTML);
});
/* this only works when you click on test2
(test1,test2).addEventListener('click',function(event) {
alert(this.innerHTML);
});
*/
/* this only works when you click on test2
(test1.addEventListener),(test2.addEventListener)('click',function(event) {
alert(this.innerHTML);
});
*/
}
var test1 = document.getElementById('test1');
var test2 = document.getElementById('test2');
if (test1.addEventListener || test2.addEventListener) {
test1.addEventListener('click',function(event) {
alert(this.innerHTML);
});
test2.addEventListener('click',function(event) {
alert(this.innerHTML);
});
}
<div id="test1">test1</div> <div id="test2">test2</div>
有没有办法用逗号分隔选择器,或者在运行代码之前设置所有selctors,就像使用jQuery一样？
解决方法
这基本上是等效的代码减去所有浏览器检查：
document.body.addEventListener("click",function(e) { //bind event to the document
var targ = e.target; //get what was clicked on
var id = targ.id; //grab the id
if (["test1","test2"].indexOf(id)!==-1){ //see if it is one of the ids
alert(targ.textContent); //show the text
}
},false);
<div id="test1">test 1</div> <div id="test2">test 2</div> <div id="test3">test 3</div>