0

如果我有两个会触发相同功能的锚标记（即关闭导航栏的多个按钮），我将如何将这两个元素与事件绑定？没有 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 方法。

4

3 回答 3

4 
var ctlOne = document.getElementById("ctl_one");
var ctlTwo = document.getElementById("ctl_two");

ctlOne.onClick = ctlTwo.onclick = toggleNav;
于 2013-08-20T19:27:38.123 回答
3

你不能在一行中做到这一点，但我看不出是什么阻止你这样做：

ctlOne.onClick = toggleNav;
ctlTwo.onClick = toggleNav;

或者，更干燥：

var both = [ctlOne, ctlTwo];
for (var i=0; i<both.length; i++) {
    both[i].onClick = toggleNav;
}
于 2013-08-20T19:27:42.807 回答
-2

多个项目上的真实事件处理程序

当我创建需要相同功能的列表或网格时，我只使用一个事件处理程序并在该处理程序内部决定要做什么。

增加一个事件处理程序意味着如果您卸载代码，您只需要删除一个处理程序，但也使用更少的资源并且更新代码更简单。

在您的情况下，我必须包含一个长函数（切片调用...）来获取单击的 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>

这个答案的重点不仅仅是处理两个元素，而是处理多个元素

这反映了问题的标题

如何将单个函数附加到多个元素？

或者还有包含多个元素的多个元素。

在这种情况下，您需要像在大网格上一样思考

行是李的

在这个 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>

有循环吗？不。

ps.：我回答了这个问题，因为它已经有了绿旗，所以我只是想帮忙，但我的语言不是英语，所以请随时更正我的文字。但请不要碰我的代码。

于 2013-08-20T20:20:30.410 回答