JavaScript事件模型使用技巧

本文介绍了一些关于JavaScript事件模型的使用，这些技巧是通过总结自其它的一些文章，一些关于脚本和DOM模型的文章。

我们的Rashambo应用于有三个链接，分别为rock、paper和scissors的设置的：

<p>Which one will it be?</p>
<div id=”choices”>
<a id=”rock” href=”#”>rock</a>
<a id=”paper” href=”#”>paper</a>
<a id=”scissors” href=”#”>scissors</a>
</div>

这些连接看起来没有链接到具体的内容上，说实话更深入就没有什么内容了。通过使用DOM，我把每一个链接命名为popUpResult JavaScript方法。这个DOM的所有代码引入到前一个例子中，虽然这里可能会做出快速改变，让onclick事件的锚链接调用popUpResult方法：

window.onload = function() {
var element = document.getElementById(‘choices’);
var anchors = element.getElementsByTagName(‘a’);
for (var i=0; i < anchors.length; i++ ) {
anchors[i].onclick = popUpResult;
}
}

Roshambo应用的这一迭代重点在于事件。这可以从两方面看出来，一方面锚链接使他们的onclick事件与popUpResult方法关联；另一方面，重编popUpResult方法，与JavaScript事件模型交互。

首先，你将会注意到popUpResult方法传递给了名为evt的事件对象。然后，从这个evt变量中，我们可以看到哪一个元素离开了事件，以及这一元素的ID属性是什么。这些信息可以告诉我们最终用户是点击了rock, paper还是scissors的链接。

执行一些逻辑条件找出最终用户最后在游戏中是赢了还是输了。一个嵌套的else块使用会更高效，但这三个if语句使代码更容易阅读。

最后，JavaScript代码弹出一个新窗口。这些窗口不会像先前的迭代那样显示现有的HTML页面，但是会创建一个空白窗口，显示出结果。所以，迭代不仅使用了JavaScript事件模型，而且还消除对三个不必要的文件的需求：win.html、lose.html和tie.html。当这一页面运行在浏览器时，结果就如先前的迭代一样。改变只是后台的实现方法。

下面是这一实例的完整代码。
<html>
<head>
<script>
window.onload = function() {
var element = document.getElementById(‘choices’);
var anchors   = element.getElementsByTagName(‘a’);
for (var i=0; i < anchors.length; i++ ) {
anchors[i].onclick = popUpResult;
}
}

popUpResult = function(evt){
var src = evt.srcElement;
var id = src.getAttribute(“id”);
var result;

if (id==’rock’) {
result = “tie”;
}
if (id==’paper’) {
result = “win”;
}
if (id==’scissors’) {
result = “lose”;
}
newWindow = open(“”,””,”top=200,left=200,height=200,width=400″);
newWindow.document.write(“You ” + result + “!”);
}

</script>

</head>
<body>
<p>Which one will it be?</p>
<div id=”choices”>
<a id=”rock” href=”#”>rock</a>
<a id=”paper” href=”#”>paper</a>
<a id=”scissors” href=”#”>scissors</a>
</div>
</body>
</html>