addEventSimple观察鼠标事件

上一个例子我们提到使用addEventSimple函数可以和原JS代码无冲突地给元素添加事件响应函数。那么这节我们就用addEventSimple来制作一个小模块，来测试发生在某个元素上的事件。我们首先来制作一个测试用的DIV元素，一个观察用的DIV元素。

HTML代码如下：

<div id="testElement">
<p>我是测试div。</p>
<p>我的鼠标事件都有响应函数。</p>
</div>
<div id="watchScreen" style="height:15em;overflow:auto;border:1px solid #333;">
我是黑板。
</div>

我们再用一段JS代码来响应发生在这个元素上的所有鼠标事件。

JavaScript代码

<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);
	}
}
addEventSimple(window,'load',init);
function init(){
	var testElement = document.getElementById("testElement");
	addEventSimple(testElement,'click',clickFunc);
	addEventSimple(testElement,'mouseover',overFunc);
	addEventSimple(testElement,'mouseout',outFunc);
	addEventSimple(testElement,'mousedown',downFunc);
	addEventSimple(testElement,'mouseup',upFunc);
	addEventSimple(testElement,'dblclick',dblclickFunc);
	addEventSimple(testElement,'mousemove',moveFunc);
}
function clickFunc(){
	var watchScreen = document.getElementById("watchScreen");
	watchScreen.innerHTML += "<br />click事件发生！"
}
function overFunc(){
	var watchScreen = document.getElementById("watchScreen");
	watchScreen.innerHTML += "<br />mouseover事件发生！"
}
function outFunc(){
	var watchScreen = document.getElementById("watchScreen");
	watchScreen.innerHTML += "<br />mouseout事件发生！"
}
function downFunc(){
	var watchScreen = document.getElementById("watchScreen");
	watchScreen.innerHTML += "<br />mousedown事件发生！"
}
function upFunc(){
	var watchScreen = document.getElementById("watchScreen");
	watchScreen.innerHTML += "<br />mouseup事件发生！"
}
function dblclickFunc(){
	var watchScreen = document.getElementById("watchScreen");
	watchScreen.innerHTML += "<br />dblclick事件发生！"
}
function moveFunc(){
	var watchScreen = document.getElementById("watchScreen");
	watchScreen.innerHTML += "<br />mousemove事件发生！"
}
</script>

实际效果如下。注意，在测试div上发生的任何鼠标事件都会被记录并且显示在id为watchScreen的“黑板DIV”里。可以试着在测试DIV上面单击、双击来观察“黑板DIV”里记录的信息。同时可以发现发生最频繁的就是mousemove事件。

我是测试div。

我的鼠标事件都有响应函数。

我是黑板。

以上仅仅是一个测试鼠标事件的简单实例，我们还可以利用addEventSimple制作更复杂，显示信息更多的模块。

  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——修复错误