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

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

来源

2013-08-20 peterchon

我想你应该在你的问题中明确指出你想避免冗余！否则，人们会产生这样的印象，即你正在经历一个更基本的问题。 – adarshr

下次我会记得，谢谢。 – peterchon

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

ctlOne.onClick = ctlTwo.onclick = toggleNav;

来源

2013-08-20 19:27:38 Paulpro

所以，没办法做&&或|| ？ – peterchon

@peterchon在一句话：没有。 –

@peterchon不，但是马特·鲍尔建议的循环会很好，如果你最终创建了更多的链接，你想调用toggleNav onclick。 – Paulpro

你不能这样做在同一行，但我看不出有什么阻止你这样做：

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

，或者更干：

var both = [ctlOne, ctlTwo]; 
for (var i=0; i<both.length; i++) { 
    both[i].onClick = toggleNav; 
}

来源

2013-08-20 19:27:42

我选择了Paulpro的答案，仅仅是因为我正在专门寻找非循环方法。 – peterchon

-2

REAL ONE eventHandler on multiple items

当我创建列表或网格需要s ame函数我只使用一个事件处理程序并在处理程序内部决定要执行什么操作。

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

在你的情况下，我不得不包括一个长函数（切片调用...）来获得点击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个元素，但多元素

和reflets的titleof问题

如何附上一个单一功能到多元件？

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

在你需要考虑像大格这种情况下

行是这里面里的我可以添加按钮跨越或什么，并再次只与单一事件处理控制他们所有的李时珍

。

根据行/列号或任何您imggination必须提供。

cols/rows您的处理程序位于parentNode的prantNode上。

if (clickevent.target.parentNode.parentNode.id == 'ul') { 
console.log(clickevent.target.textContent); 
}

，行/ colums将

<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-20 20:20:30 cocco

这是令人难以置信的代码。是短变量名称和缺乏空白空间应该使其加载或运行速度更快？ –

没有只有一个EVENTHANDLER，所以1000比你可以有一个事件处理程序VS添加每个链接一个函数引用创建更多的内存问题，一个处理程序......但显然你不能读代码。 – cocco

现在好点马特？ – cocco

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

回答

相关问题