通过学习按钮的响应方式,可以了解到JS的不同规范写法。
首先,JS在网页中创建有三种方式,一种是外部样式,即在外部创建一个文件,通过<script src="xx.js"><script>来引用;第二种是内嵌样式,即在<head>或<body>中使用<script></script>;第三种就是内联样式,直接在标签中使用,如<input type="button" value="button" οnclick="alert("Greetings!")">。
了解完JS的样式后,我们就可以来看一下简单的相应按钮写法:
<html>
<body>
<input type="button" value="button" οnclick="greet()">
<script type="text/javascript">
function greet(){
alert("Greetings!");
}
</script>
</body>
</html>
这是比较基本的写法,直接在按钮中加入点击事件,跳转到相应的函数中。也可以改写成如下形式:
<html>
<body>
<input type="button" value="button" id="button">
<script type="text/javascript">
var greet=document.getElementById("button");
greet.οnclick=function(){
alert("Greetings!");
}
</script>
</body>
</html>
直接通过一个匿名函数来完成对按钮的控制。在jQuery中常常是这种方式:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function(){
alert("Greetings!");
});
});
</script>
</head>
<body>
<input type="button" value="button" id="button">
</body>
</html>
在上面的JS代码中我们使用了document关键字,这个就是DOM(文档对象模型Document Object Model)。另外还有BOM(浏览器对象类型Browser Object Model),常用的关键字有window等。
而我们可以利用添加事件的方式来继续改写代码:
<html>
<body>
<input type="button" value="button" id="button">
<script type="text/javascript">
var greet=document.getElementById("button");
greet.addEventListener("click",function(){alert("Greetings!");},true);
</script>
</body>
</html>
如果我们使用的是IE浏览器,则需要利用attachEvent来完成上述功能:
<html>
<body>
<input type="button" value="button" id="button">
<script type="text/javascript">
var greet=document.getElementById("button");
greet.attachEvent("click",function(){alert("Greetings!");});
</script>
</body>
</html>
可以将上面两个合起来:
<html>
<body>
<input type="button" value="button" id="button">
<script type="text/javascript">
var greet=document.getElementById("button");
if (document.attachEvent) {
greet.attachEvent("click",function(){alert("Greetings!");});
}
else if (document.addEventListener) {
greet.addEventListener("click",function(){alert("Greetings!");},true);
}
</script>
</body>
</html>