不引人注目的Javascript画廊导航

Question

我在我的网站上有一个幻灯片 - 它一切正常 - 但我想改变它的导航是不引人注目的。

我该怎么办？导航是：

<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>

Answer 1

您可以在将事件加载到dom后附加事件。 IE和wc3附加事件的处理方式存在差异，这就像jquery这样的库会因为它们规范化事件模型而闪耀。

adding event listener cross browser http://www.quirksmode.org/js/events_advanced.html

jquery的

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

没有jquery w3c标准

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

for legacy ie

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

Answer 2

这是一个基本的例子。

首先，删除任何内联javascript：

<a id="slideshow_prev" ><span>&lt;prev</span></a>
<a id="slideshow_start" ><span>start</span></a>
<a id="slideshow_view" ><span>view</span></a>
<a id="slideshow_stop" ><span>stop</span></a>
<a id="slideshow_next" ><span>next&gt;</span></a>

获取元素引用：

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

优化/自动化

我创建了一个对象来将id与函数相关联，然后迭代对象的属性以自动化该过程，而不是手动获取每个引用并附加侦听器： Live demo (click). < /强>

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);
}