javascript 事件详解

发表于 | 分类于 |

引言

  • javascript事件是用户在访问页面时执行的操作，事件处理程序用于捕捉用户在页面执行的操作；
  • javascript事件是动态化页面的重要方式；
  • 本文主要总结了重要的javascript事件，以及DOM0和DOM2对事件处理的异同；

事件大全

  • 下面总结了javascript事件，格式：事件名称+浏览器支持+说明

一般事件

  • onclick IE3、N2 鼠标点击时触发此事件
  • ondblclick IE4、N4 鼠标双击时触发此事件
  • onmousedown IE4、N4 按下鼠标时触发此事件
  • onmouseup IE4、N4 鼠标按下后松开鼠标时触发此事件
  • onmouseover IE3、N2 当鼠标移动到某对象范围的上方时触发此事件
  • onmousemove IE4、N4 鼠标移动时触发此事件
  • onmouseout IE4、N3 当鼠标离开某对象范围时触发此事件
  • onkeypress IE4、N4 当键盘上的某个键被按下并且释放时触发此事件.
  • onkeydown IE4、N4 当键盘上某个按键被按下时触发此事件
  • onkeyup IE4、N4 当键盘上某个按键被按放开时触发此事件

页面相关事件

  • onabort IE4、N3 图片在下载时被用户中断
  • onbeforeunload IE4、N 当前页面的内容将要被改变时触发此事件
  • onerror IE4、N3 出现错误时触发此事件
  • onload IE3、N2 页面内容完成时触发此事件
  • onmove IE、N4 浏览器的窗口被移动时触发此事件
  • onresize IE4、N4 当浏览器的窗口大小被改变时触发此事件
  • onscroll IE4、N 浏览器的滚动条位置发生变化时触发此事件
  • onstop IE5、N 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
  • onunload IE3、N2 当前页面将被改变时触发此事件

表单相关事件

  • onblur IE3、N2 当前元素失去焦点时触发此事件
  • onchange IE3、N2 当前元素失去焦点并且元素的内容发生改变而触发此事件
  • onfocus IE3 、N2 当某个元素获得焦点时触发此事件
  • onreset IE4 、N3 当表单中RESET的属性被激发时触发此事件
  • onsubmit IE3 、N2 一个表单被递交时触发此事件

滚动字幕事件

  • onbounce IE4、N 在Marquee内的内容移动至Marquee显示范围之外时触发此事件
  • onfinish IE4、N 当Marquee元素完成需要显示的内容后触发此事件
  • onstart IE4、 N 当Marquee元素开始显示内容时触发此事件

编辑事件

  • onbeforecopy IE5、N 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件
  • onbeforecut IE5、 N 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件
  • onbeforeeditfocus IE5、N 当前元素将要进入编辑状态
  • onbeforepaste IE5、 N 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件
  • onbeforeupdate IE5、 N 当浏览者粘贴系统剪贴板中的内容时通知目标对象
  • oncontextmenu IE5、N 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
  • oncopy IE5、N 当页面当前的被选择内容被复制后触发此事件
  • oncut IE5、N 当页面当前的被选择内容被剪切时触发此事件
  • ondrag IE5、N 当某个对象被拖动时触发此事件 [活动事件]
  • ondragdrop IE、N4 一个外部对象被鼠标拖进当前窗口或者帧
  • ondragend IE5、N 当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了
  • ondragenter IE5、N 当对象被鼠标拖动的对象进入其容器范围内时触发此事件
  • ondragleave IE5、N 当对象被鼠标拖动的对象离开其容器范围内时触发此事件
  • ondragover IE5、N 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
  • ondragstart IE4、N 当某对象将被拖动时触发此事件
  • ondrop IE5、N 在一个拖动过程中，释放鼠标键时触发此事件
  • onlosecapture IE5、N 当元素失去鼠标移动所形成的选择焦点时触发此事件
  • onpaste IE5、N 当内容被粘贴时触发此事件
  • onselect IE4、N 当文本内容被选择时的事件
  • onselectstart IE4、N 当文本内容选择将开始发生时触发的事件

数据绑定

  • onafterupdate IE4、N 当数据完成由数据源到对象的传送时触发此事件
  • oncellchange IE5、N 当数据来源发生变化时
  • ondataavailable IE4、N 当数据接收完成时触发事件
  • ondatasetchanged IE4、N 数据在数据源发生变化时触发的事件
  • ondatasetcomplete IE4、N 当来子数据源的全部有效数据读取完毕时触发此事件
  • onerrorupdate IE4、N 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
  • onrowenter IE5、N 当前数据源的数据发生变化并且有新的有效数据时触发的事件
  • onrowexit IE5、N 当前数据源的数据将要发生变化时触发的事件
  • onrowsdelete IE5、N 当前数据记录将被删除时触发此事件
  • onrowsinserted IE5、N 当前数据源将要插入新数据记录时触发此事件

外部事件

  • onafterprint IE5、N 当文档被打印后触发此事件
  • onbeforeprint IE5、N 当文档即将打印时触发此事件
  • onfilterchange IE4、N 当某个对象的滤镜效果发生变化时触发的事件
  • onhelp IE4、N 当浏览者按下F1或者浏览器的帮助选择时触发此事件
  • onpropertychange IE5、N 当对象的属性之一发生变化时触发此事件
  • onreadystatechange IE4、N 当对象的初始化属性值发生变化时触发此事件

事件的使用

和html内联使用

1
2
3
<button id="btn" type="button" value="button" onclick="alert('aaa')">
		button
</button>
1
2
3
4
5
6
7
8
<body>
	<button onclick="demo()">button</button>
	<script>
		function demo(){
			alert("aaa");
		}
	</script>
</body>

外部js使用

1
2
3
document.getElementById("txt").onchange = function(){
	alert("change");
}

取消事件绑定

1
2
3
4
5
btn.onclick = function(e){
   alert("ok");
 };
 
 btn.onclick = null;  //取消绑定

DOM2事件详解

DOM2事件的特点

  • DOM2支持同一dom元素注册多个同种事件；
  • DOM2新增了捕获和冒泡的概念；
  • DOM2事件通过addEventListener和removeEventListener管理；

注册事件(addEventListener)

  • 参数一：事件名称，比上面DOM0的事件去掉”on”；
  • 参数二：事件内容，fucntion中；
  • 事件三：布尔型，true代表捕获事件，false代表冒泡事件；
1
2
3
outer.addEventListener('click',function(e){
			alert("outer");   
		},false);

捕获和冒泡事件

  • 如果外层和内层的多层DOM结构中，不同的层都注册有事件，先执行谁呢?
  • 从外到内执行叫做捕获类型事件，从内到外执行叫做冒泡类型事件；
  • 捕获类型事件总是比冒泡类型事件先执行；
  • 如果两种类型的事件集中在了同一个元素身上，就不分这两种类型了，此时，哪个事件注册在前（在js中写在前面），他就先执行；
  • 对于一个页面元素来说，他的身上如果集中了多个相同的事件，不会覆盖,都会执行，且定义在前的先执行；
  • 如果普通事件和DOM2事件同时作用于一个元素，则不会出现后注册的覆盖先注册的，都执行，而且定义在前的先执行；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
	<div id="outer" style="width:300px;height:300px;">
		<div id="inner">
			<button id="btn" type="button" value="button" onclick="alert('aaa')">
				button
			</button>
		</div>
	</div>
	
	<script>
		var outer = document.getElementById("outer");
		var inner = document.getElementById("inner");
		var btn = document.getElementById("btn");
		
		outer.addEventListener('click',function(e){
			alert("outer");   //先执行
		},true);

		inner.addEventListener('click',function(e){
			alert("inner");   //最后执行
		},false);

		btn.addEventListener('click',function(e){
			alert("btn");   //再执行
		},false);
	</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
	<div id="outer" style="width:300px;height:300px;">
		<div id="inner">
			<button id="btn" type="button" value="button" onclick="alert('aaa')">
				button
			</button>
		</div>
	</div>
	
	<script>
		var outer = document.getElementById("outer");
		var inner = document.getElementById("inner");
		var btn = document.getElementById("btn");

		inner.addEventListener('click',function(e){
			alert("inner1");   //先执行
		},false);

		inner.addEventListener('click',function(e){
			alert("inner2");   //后执行
		},true);
	</script>
</body>

stopPropagation阻止冒泡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
	<div id="outer" style="width:300px;height:300px;">
		<div id="inner">
			<button id="btn" type="button" value="button" onclick="alert('aaa')">
				button
			</button>
		</div>
	</div>
	<script>
		var outer = document.getElementById("outer");
		var inner = document.getElementById("inner");
		var btn = document.getElementById("btn");

		outer.addEventListener('click',function(e){
			alert("outer");   //不执行
		},false);

		inner.addEventListener('click',function(e){
			e.stopPropagation();  //阻止冒泡
			alert("inner");   //执行
		},false);
	</script>
</body>

removeEventListener解除事件绑定

1
2
3
4
5
6
7
var btn = document.getElementById("btn");
var fn = function(e){
	alert("aa");
}

btn.addEventListener("click",fn,false); //绑定
btn.removeEventListener("click",fn,false); //解绑

IE8及之前版本浏览器的DOM2事件

說明

  • IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()；
  • 相应的，IE定义了类似的方法attachEvent()和detachEvent()；
  • attachEvent()和detachEvent()要求只有两个参数：事件类型（前面带上”on”）和事件处理函数，默认冒泡，不支持捕获；
  • 同一个元素定义的同种类型的事件，都会执行，不会覆盖，且定义在后的先执行；
  • stopPropagation()不起作用；

####示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style>
		#outter{
			width: 300px;
			height: 300px;
			background-color: #f00;
		}
		#inner{
			width: 200px;
			height: 200px;
			background-color: #0f0;
		}
		#in{
			width: 100px;
			height: 100px;
			background-color: #00f;
		}
	</style>
</head>
<body>
	<div id="outter">
		<div id="inner">
			<div id="in">
				
			</div>
		</div>
	</div>
	<script>
		document.getElementById("outter").attachEvent('onclick',function(){
			alert("outter");  //最后執行
		});
		document.getElementById("inner").attachEvent('onclick',function(){
			alert("inner");  //再执行
		});

		function test(){
			alert("in1");
		}
		document.getElementById("in").attachEvent('onclick',test);  //先执行
	</script>
	<script type="text/javascript" src="app.js"></script>
</body>
</html>

兼容性说明

  • 添加事件的兼容性：需要先做判断浏览器支持哪种事件处理机制；
1
2
3
4
5
if(div1.addEventListener){
    div1.addEventListener('click', div1Fun, false);
}else if(div1.attachEvent){
    div1.attachEvent('onclick', div1Fun);
}
  • 访问事件对象的兼容性：
1
2
3
4
5
6
 function myFun(event){
    event = event || window.event;
    var target = event.target || event.srcElement;
    console.log(event.type);
    console.log(target);
}
您的支持是对我最大的鼓励！