addEventSimple函数，添加事件响应函数的方法

添加事件响应函数的方法

我们可以像这样添加事件响应函数：

<div id="xxx" onclick="alert('x')">

如果要求分离文档结构和行为，我们就用下面的代码

document.getElementById("xxx").onclick = alert('x');

但是如果我们想给某元素的某一个事件添加多个响应函数呢？又或者如果文档不在我们的控制之内呢？

document.getElementById("xxx").onclick = alert('x');
document.getElementById("xxx").onclick = alert('y');

那么，alert('y')将会覆盖前面所有的事件处理函数，也就是说我们将看不到x。

《ppk谈JavaScript》一书很好地给出了一种方法：

function addEventSimple(obj,evt,fn){
	if(obj.addEventListener){
		obj.addEventListener(evt,fn,false);
	}else if(obj.attachEvent){
		obj.attachEvent('on'+evt,fn);
	}
}

其中：

addEventListener是W3C标准中为事件添加响应函数的方法，它接受三个参数，分别是要响应的事件，响应函数、是否冒泡(布尔值)。（FireFox就支持这个函数）

attachEvent是IE中给事件添加响应函数的方法，它接受两个参数，分别是要响应的事件，响应函数。

addEventSimple函数首先检查是否支持addEventListener，支持则使用它给时间添加响应函数；如果不支持，进一步判断浏览器是否支持attachEvent，如果支持则使用它来来添加事件响应函数。这个函数的特点是不会和之前已经存在的事件响应函数发生冲突，这样就可以将JS代码做成独立的小模块，添加到其它站点中不会和已有的代码发生冲突。

下面来看一个使用addEventSimple的简单的例子： 

<script type="text/javascript">
function addEventSimple(obj,evt,fn){
	if(obj.addEventListener){
		obj.addEventListener(evt,fn,false);
	}else if(obj.attachEvent){
		obj.attachEvent('on'+evt,fn);
	}
}
var content = document.getElementById("content");
addEventSimple(content,'dblclick',test);
function test(){
	alert("您双击了本网页的内容区域");
}
</script>

我们在这个网页中为id为content的元素添加了针对“双击”的事件响应函数。可以试着在网页的内容区双击鼠标左键，就可以看到我们定义的响应函数的效果了。

  1. 用javascript修改html元素的class
  2. JavaScript重定向
  3. JavaScript对象当作关联数组
  4. JavaScript弹出窗口以及窗口间的通信
  5. JavaScript显示信息实例
  6. 用JavaScript批量访问HTML元素
  7. 分离JavaScript与HTML
  8. JavaScript计算器实例
  9. JavaScript的Math对象计算器
  10. JavaScript改变HTML元素的位置
  11. JavaScript动画
  12. JavaScript动画函数
  13. JavaScript拖拽
  14. JavaScript拖拽2——多元素、分离JS
  15. JavaScript拖拽3——解决快速拖拽的问题
  16. addEventSimple函数，添加事件响应函数的方法
  17. addEventSimple观察鼠标事件
  18. JavaScript click事件深入
  19. JavaScript事件来源元素
  20. JavaScript修改与访问CSS
  21. JavaScript拖拽4——获得元素的位置
  22. JavaScript拖拽5——性能优化
  23. DOM Scripting相册
  24. DOM Scripting斑马表格
  25. DOM Scripting动画切图
  26. JavaScript颜色渐变
  27. JavaScript拖拽6——修复错误