如果我有两个会触发相同功能的锚标签（即多个按钮关闭导航栏），我如何将这两个元素与事件绑定？没有JQUERY
HTML：
<a href="#" id="ctl_one">Close Nav</a>
<ul id="nav">
<li>Nav One</li>
<li>Nav Two</li>
<li>Nav Three</li>
</ul>
<a href="#" id="ctl_two">Close Nav</a>
JS：
var ctlOne = document.getElementById("ctl_one");
var ctlTwo = document.getElementById("ctl_two");
var both = ctlOne || ctlTwo //<-- this is what I tried and failed.
both.onClick = function(){
toggleNav();
}
function toggleNav(){
// either close or open nav <UL>
}
同样，我知道如何在jQuery中执行此操作。我正在寻找原生的javascript方法。
答案 0 :(得分：4)
var ctlOne = document.getElementById("ctl_one");
var ctlTwo = document.getElementById("ctl_two");
ctlOne.onClick = ctlTwo.onclick = toggleNav;
答案 1 :(得分：3)
你不能在一行中做到这一点，但我不明白是什么阻止你这样做：
ctlOne.onClick = toggleNav;
ctlTwo.onClick = toggleNav;
或者，更多干：
var both = [ctlOne, ctlTwo];
for (var i=0; i<both.length; i++) {
both[i].onClick = toggleNav;
}
答案 2 :(得分：-2)
多项上的REAL ONE eventHandler
当我创建需要相同功能的列表或网格时，我只使用一个事件处理程序 并在该处理程序内部决定该做什么。
启动一个事件处理程序意味着如果卸载代码，则必须只删除一个处理程序，但也会使用更少的资源，并且更新代码更简单。
在你的情况下，我必须包含一个长函数（切片调用...）来获取被点击的li的索引 并检查我是否应该执行你的toggleNav功能。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
(function(W){
var D;
function init(){
D=W.document;
D.getElementById('ul').addEventListener('click',h,false);
}
function h(e){
var a=e.target,i=Array.prototype.slice.call(a.parentNode.childNodes).indexOf(a);
if(a.parentNode.id=='ul'){
console.log('text: ',a.textContent,' index: ',i,' execute toggleNav: ',i<2);
}
}
W.addEventListener('load',init,false)
})(window)
</script>
</head>
<body>
<ul id="ul"><li>a</li><li>b</li><li>c</li></ul>
</body>
</html>
正如您所看到的，代码很短，没有循环。但最重要的是，你只有一个处理程序!!
这自然只适用于现代浏览器，但有一些更改，它在所有浏览器中都是一样的，我想像e=e||window.event; e.target=e.target||e.srcElement ..
修改
具有长变量名称和白色空间的简单示例，如matt所要求的， 但是使用上面的示例缓存各种元素，即使你扩展它也与外部库兼容。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
function inizializzation () { // Here i inizialize the eventhandler
var TheULElement=window.document.getElementById('ul'); // search
// for the element which id is ul
TheULElement.addEventListener ( 'click' , clickhandler , false )
// here i add an event handler to the element which id is ul
}
function clickhandler ( clickevent ) { // that handler i previously added
if ( clickevent.target.parentNode.id == 'ul' ) { // here i check if the
// parent node id of the element i clicked is ul
console.log( clickevent.target.textContent );
// this writes to the console
//-> rigthclick 'inspect element' (in chrome)
}
}
window.addEventListener ( 'load' , inizializzation , false )
// this is the event handler when the page loads
// which starts the first function called inizializzation
</script>
</head>
<body>
<ul id="ul">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
</ul>
</body>
</html>
这个答案的重点不仅仅是处理2个元素而是处理多个元素
并重新提出问题的标题
如何将单个函数附加到多个元素？
或包含多个元素的多个元素。
在这种情况下，您需要像在大网格上一样思考
行是li的
在这个里面我可以添加按钮跨度或者任何东西，只有那个单一的事件处理程序控制它们。
基于行/列号或您想要提供的任何内容。
使用cols / rows，您的处理程序位于parentNode的prantNode上。
if ( clickevent.target.parentNode.parentNode.id == 'ul' ) {
console.log( clickevent.target.textContent );
}
并且行/列将是
<ul> // whatever (div span) it just has to be a element
<li> // whatever ,best if display:block/flex on all thiselements but
<whatever></whatever> // but with WHITESPACES this does not work
<whatever></whatever> // so it's better you add them with a script
<whatever></whatever> // or learn to write without WHITESPACES
<whatever></whatever> // or new lines.
<whatever></whatever> // because a textnode/newline/whitespace
</li> // in dom is a ELEMENT
<li>
<whatever></whatever>
<whatever></whatever>
<whatever></whatever>
<whatever></whatever>
<whatever></whatever>
</li>
</ul>
有LOOPS吗？ NO。