JS实现响应按钮的几种方式
2014-10-02 09:32
369 查看
通过学习按钮的响应方式，可以了解到JS的不同规范写法。
首先，JS在网页中创建有三种方式，一种是外部样式，即在外部创建一个文件，通过<script src="xx.js"><script>来引用；第二种是内嵌样式，即在<head>或<body>中使用<script></script>；第三种就是内联样式，直接在标签中使用，如<input type="button" value="button" onclick="alert("Greetings!")">。
了解完JS的样式后，我们就可以来看一下简单的相应按钮写法：
这是比较基本的写法，直接在按钮中加入点击事件，跳转到相应的函数中。也可以改写成如下形式：
直接通过一个匿名函数来完成对按钮的控制。在jQuery中常常是这种方式：
在上面的JS代码中我们使用了document关键字，这个就是DOM（文档对象模型Document Object Model）。另外还有BOM（浏览器对象类型Browser Object Model），常用的关键字有window等。
而我们可以利用添加事件的方式来继续改写代码：
如果我们使用的是IE浏览器，则需要利用attachEvent来完成上述功能：
可以将上面两个合起来：
首先，JS在网页中创建有三种方式，一种是外部样式，即在外部创建一个文件，通过<script src="xx.js"><script>来引用；第二种是内嵌样式，即在<head>或<body>中使用<script></script>；第三种就是内联样式，直接在标签中使用，如<input type="button" value="button" onclick="alert("Greetings!")">。
了解完JS的样式后，我们就可以来看一下简单的相应按钮写法：
<html>
<body>
<input type="button" value="button" onclick="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.onclick=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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 