低调的Javascript库导航

我有一个幻灯片在我的网站上-它的所有工作，因为它应该-但我想改变导航，它是不引人注目的

我该怎么做？导航是：

<a href="javascript:slideshow.previous()" id="slideshow_prev" ><span>&lt;prev</span></a>
<a href="javascript:slideshow.slideshow.play()" id="slideshow_start" ><span>start</span></a>
<a href="javascript:slideshow.hotlink()" id="slideshow_view" ><span>view</span></a>
<a href="javascript:slideshow.pause()" id="slideshow_stop" ><span>stop</span></a>
<a href="javascript:slideshow.next()" id="slideshow_next" ><span>next&gt;</span></a>

---

您可以在事件加载到dom中后附加事件。IE和wc3 attach事件的处理方式存在差异，这就是像jquery这样的库之所以大放异彩的地方，因为它们规范化了事件模型

jquery

$('#slideshow_prev').click(slideshow.previous);

没有jqueryw3c标准

document.getElementById("slideshow_prev").addEventListener("click", slideshow.previous);

对于传统ie

document.getElementById("slideshow_prev").attachEvent('onclick',slideshow.previous)

---

这里有一个基本的例子

首先，删除任何内联javascript： 将事件侦听器附加到每个元素： 优化/自动化 我没有手动获取每个引用并附加侦听器，而是创建了一个对象来将id与函数相关联，然后迭代对象的属性以自动化该过程：

var x = { 
  slideshow_prev: slideshow.previous,
  slideshow_start: slideshow.slideshow.play,
  slideshow_view: slideshow.hotlink,
  slideshow_stop: slideshow.pause,
  slideshow_next: slideshow.next
};

for (var prop in x) {
  var elem = document.getElementById(prop);
  var clickFunc = x[prop];
  elem.addEventListener('click', clickFunc);
}

使用和，并确保它在没有javascript的情况下可用。

var prev = document.getElementById('slideshow_prev');
var start = document.getElementById('slideshow_start');
//etc

prev.addEventListener('click', slideshow.previous);
start.addEventListener('click', slideshow.slideshow.play);
//etc

var x = { 
  slideshow_prev: slideshow.previous,
  slideshow_start: slideshow.slideshow.play,
  slideshow_view: slideshow.hotlink,
  slideshow_stop: slideshow.pause,
  slideshow_next: slideshow.next
};

for (var prop in x) {
  var elem = document.getElementById(prop);
  var clickFunc = x[prop];
  elem.addEventListener('click', clickFunc);
}