javascript事件学习小结
2010-03-27 11:34
323 查看
再次学习了一下js的事件，把一些值得记住的要点写下来，方便日后查询。
首先要说一下typeof这个关键词，此次才发现它是多么的有用。它主要用于测试一个变量的类型，比如是string,number,function等等，但我说它好用还有另外的方面，就是它能够测试一个对象，一个对象的变量等是否存在，如果不存在则会返回"undefined"，则可以让我们处理一些浏览器的兼容性问题。下面将会用到它。
由于有时我们想对某个事件添加两个处理函数，但是如果直接用类似如下方式是不行的。document.getElementById(“test”).onclick=function(){}，如果有多个这样的行为则最后一个会覆盖前面的。解决此类方法可以用w3c标准方法addEventListener,但是ie却不支持此方法，ie的替换方案是使用attachEvent,举个例子。
<html>
<head>
<title>javascript事件测试</title>
<script type="text/javascript">
window.onload = function(){
var target = document.getElementById("link");
if(typeof target.addEventListener != "undefined"){
target.addEventListener("click",function(){
alert("new a click");},false);
}else if(typeof target.attachEvent != "undefined"){
target.attachEvent("onclick",function(){
alert("new a click");});
}
}
</script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body onclick="alert('body click...')">
<div onclick="alert('div click')">
<a href="#" id="link" onclick="alert('a click');">点我</a>
</div>
</body>
</html>
上面的代码不管是在ie还是在firefox下当你点击链接时都会弹出四次窗口来。能够增加监听处理函数，势必就可以减少，addEventListener对应的是removeEventListener，而attachEvent对应的是detachEvent,这里不再举例。
如果细心观察便会发现上边的addEventListener多了最后一个boolean参数，当该值为true时，表示处于capture状态，为false时表示处理bubble状态。有何区别呢？capture状态下，事件的传递方向是父节点>子节点传递的，而bubble则是子节点->父节点传递的。（我在ie6和firefox3.6中发现capture都没效）如果你想取消这种传递的话，那么也是有办法的。W3c模型中，可以用stopPropagation()函数，而ie中可以用cancelBubble=true;再看如下代码
<html>
<head>
<title>javascript事件测试</title>
<script type="text/javascript">
window.onload = function(){
var target = document.getElementById("link");
if(typeof target.addEventListener != "undefined"){
target.addEventListener("click",function(event){
alert("new a click");
event.stopPropagation();
},false);
}else if(typeof target.attachEvent != "undefined"){
target.attachEvent("onclick",function(){
alert("new a click");
window.event.cancelBubble = true;});
}
}
</script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body onclick="alert('body click...')">
<div onclick="alert('div click')">
<a href="#" id="link" onclick="alert('a click');">点我</a>
</div>
</body>
</html>
现在当点击的时候，只会弹出两个单击事件了，因为取消了传递性。
关于上面的例子，还有一个要说明的是event的由来。如果是ie的话那么event统一为window.event,也就是说不用传参数给处理函数，而比如firefox则是通过参数方式直接传给处理函数。
通过监听器方式添加处理函数，默认情况下，尽管你编写了自己的处理函数，但是还会有其它默认的行为发生，比如，你用监听方式给一个表单添加了处理事件，尽管最后返回false该表单还是会照着action的路径提交的，想要阻止这种行为也是可以实现的。
在ie中，可以通过event.returnValue = false来实现，而firefox一类的浏览器可以通过执行event.preventDefault();来实现。看个例子
<html>
<head>
<title>javascript事件测试</title>
<script type="text/javascript">
window.onload = function(){
var myform = document.forms[0];
if(typeof myform.addEventListener != "undefined"){
myform.addEventListener("submit",function(event){
alert("submit");
event.preventDefault();
},false);
}else if(typeof myform.attachEvent != "undefined"){
myform.attachEvent("onclick",function(){
alert("submit");
window.event.returnValue = false;});
}
}
</script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<input type="submit" value="提交" />
</form>
</body>
</html>
上面的代码在点击按钮后是不会进行提交的，如果想测试提交情况的话，可以把returnValue变为true(针对ie),或者去掉event.preventDefault();这行代码。(针对firefox)
关于事件还有好多需要注意的地方，不过只记一下比较基本的东西。
最后总结一下：
1. Typeof ；检查对象或方法等是否存在，用”undefined”进行判断
firefox类 vs ie类
2.addEventListener vs attachEvent ；添加处理函数
3. removeEventListener vs detachEvent ；移除处理函数
4. event.stopPropagation() vs cancelBubble=true ；取消事件传递
5. event.preventDefault() vs event.returnValue = false ；取消本事件的默认行为
首先要说一下typeof这个关键词，此次才发现它是多么的有用。它主要用于测试一个变量的类型，比如是string,number,function等等，但我说它好用还有另外的方面，就是它能够测试一个对象，一个对象的变量等是否存在，如果不存在则会返回"undefined"，则可以让我们处理一些浏览器的兼容性问题。下面将会用到它。
由于有时我们想对某个事件添加两个处理函数，但是如果直接用类似如下方式是不行的。document.getElementById(“test”).onclick=function(){}，如果有多个这样的行为则最后一个会覆盖前面的。解决此类方法可以用w3c标准方法addEventListener,但是ie却不支持此方法，ie的替换方案是使用attachEvent,举个例子。
<html>
<head>
<title>javascript事件测试</title>
<script type="text/javascript">
window.onload = function(){
var target = document.getElementById("link");
if(typeof target.addEventListener != "undefined"){
target.addEventListener("click",function(){
alert("new a click");},false);
}else if(typeof target.attachEvent != "undefined"){
target.attachEvent("onclick",function(){
alert("new a click");});
}
}
</script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body onclick="alert('body click...')">
<div onclick="alert('div click')">
<a href="#" id="link" onclick="alert('a click');">点我</a>
</div>
</body>
</html>
上面的代码不管是在ie还是在firefox下当你点击链接时都会弹出四次窗口来。能够增加监听处理函数，势必就可以减少，addEventListener对应的是removeEventListener，而attachEvent对应的是detachEvent,这里不再举例。
如果细心观察便会发现上边的addEventListener多了最后一个boolean参数，当该值为true时，表示处于capture状态，为false时表示处理bubble状态。有何区别呢？capture状态下，事件的传递方向是父节点>子节点传递的，而bubble则是子节点->父节点传递的。（我在ie6和firefox3.6中发现capture都没效）如果你想取消这种传递的话，那么也是有办法的。W3c模型中，可以用stopPropagation()函数，而ie中可以用cancelBubble=true;再看如下代码
<html>
<head>
<title>javascript事件测试</title>
<script type="text/javascript">
window.onload = function(){
var target = document.getElementById("link");
if(typeof target.addEventListener != "undefined"){
target.addEventListener("click",function(event){
alert("new a click");
event.stopPropagation();
},false);
}else if(typeof target.attachEvent != "undefined"){
target.attachEvent("onclick",function(){
alert("new a click");
window.event.cancelBubble = true;});
}
}
</script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body onclick="alert('body click...')">
<div onclick="alert('div click')">
<a href="#" id="link" onclick="alert('a click');">点我</a>
</div>
</body>
</html>
现在当点击的时候，只会弹出两个单击事件了，因为取消了传递性。
关于上面的例子，还有一个要说明的是event的由来。如果是ie的话那么event统一为window.event,也就是说不用传参数给处理函数，而比如firefox则是通过参数方式直接传给处理函数。
通过监听器方式添加处理函数，默认情况下，尽管你编写了自己的处理函数，但是还会有其它默认的行为发生，比如，你用监听方式给一个表单添加了处理事件，尽管最后返回false该表单还是会照着action的路径提交的，想要阻止这种行为也是可以实现的。
在ie中，可以通过event.returnValue = false来实现，而firefox一类的浏览器可以通过执行event.preventDefault();来实现。看个例子
<html>
<head>
<title>javascript事件测试</title>
<script type="text/javascript">
window.onload = function(){
var myform = document.forms[0];
if(typeof myform.addEventListener != "undefined"){
myform.addEventListener("submit",function(event){
alert("submit");
event.preventDefault();
},false);
}else if(typeof myform.attachEvent != "undefined"){
myform.attachEvent("onclick",function(){
alert("submit");
window.event.returnValue = false;});
}
}
</script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<input type="submit" value="提交" />
</form>
</body>
</html>
上面的代码在点击按钮后是不会进行提交的，如果想测试提交情况的话，可以把returnValue变为true(针对ie),或者去掉event.preventDefault();这行代码。(针对firefox)
关于事件还有好多需要注意的地方，不过只记一下比较基本的东西。
最后总结一下：
1. Typeof ；检查对象或方法等是否存在，用”undefined”进行判断
firefox类 vs ie类
2.addEventListener vs attachEvent ；添加处理函数
3. removeEventListener vs detachEvent ；移除处理函数
4. event.stopPropagation() vs cancelBubble=true ；取消事件传递
5. event.preventDefault() vs event.returnValue = false ；取消本事件的默认行为
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript事件学习小结（三）js事件对象
- javaScript事件学习小结（四）event的公共成员（属性和方法）
- JavaScript事件学习小结(五）js中事件类型之鼠标事件
- JavaScript事件学习小结（一）事件流
- JavaScript事件学习小结(二)js事件处理程序
- javascript校验学习小结
- JavaScript Event学习第六章 事件的访问
- JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)
- Javascript 浏览器事件小结
- 每天一篇javascript学习小结（Date对象）
- JavaScript 学习笔记【二】——事件侦听兼容写法
- Javascript学习指南（第2版）笔记(四) 表单、表单事件及校验
- JavaScript学习手记3事件详解
- javascript事件学习
- JavaScript中利用jQuery绑定事件的几种方式小结
- 每天一篇javascript学习小结（Array数组）
- JavaScript Event学习第四章 传统的事件注册模型
- JavaScript学习笔记——事件（转自：http://www.blogjava.net/amigoxie/archive/2007/08/27/139711.html）
- JavaScript学习笔记（十）——学习心得与经验小结
- javascript学习总结之(事件，函数等)