JavaScript事件流、事件类型、事件对象和事件委托

JavaScript事件流

事件流描述的是在页面中接受事件的顺序，分为事件冒泡和事件捕获。

事件冒泡指事件一级一级的往上触发，一直到根元素为止

事件捕获指事件从根元素开始触发，一直到触发元素的事件为止

事件绑定
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
DOM0级事件	直接在元素上绑定，绑定多个后面会覆盖前面
			例如：
			wrap.onclick=function(){
				alert("a");
			}
			wrap.onclick=function(){
				alert("b");//仅仅会弹出b，因为覆盖前面
			}
			
DOM2级事件	可以多次绑定

	addEventListener(type,fn,bol);		绑定事件
	removeEventListener(type,fn,bol);	解除事件
		type：事件类型
		fn：  事件语句，必须是对应的非匿名函数
		bol： 事件触发机制  false事件冒泡 true事件捕获
		解除检测某个事件语句，type、fn、bol都必须对应相同
		
	attachEvent(type,fn);	IE上的DOM2级绑定事件
	detachEvent(type,fn);	IE上的DOM2级解除事件
	
	wrap.addEventListener("click",function(e){
		//匿名函数的匿名参数，表示触发的事件对象
		//为了兼容IE低版本，需要使用window.event
		var e=e||window.event;
		console.log(e.currentTarget);
	},false)

函数不添加()，就是执行代码块；添加()，就是执行结果

event对象

event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

event方法

event.initEvent();初始化新创建的event对象的属性

event.preventDefault();阻止默认事件

event.stopPropagation();阻止事件继续派发

事件类型

UI事件：当用户与页面上的元素交互时触发

load事件：当页面加载完毕之后触发

resize事件：当浏览器窗口改变大小时候触发

scroll事件：当用户滚动一个带滚动条的元素时触发

鼠标事件：通过鼠标在页面上执行操作

contextmenu事件：弹出右键菜单

click事件：对象被点击时发生（在同一元素发生鼠标按下事件后又发生鼠标放开事件时才发生的）

mousedown事件：鼠标被按下时触发

mousemove事件：在鼠标指针移动时触发

mouseup事件：在鼠标按键松开时触发

mouseover事件：鼠标指针移动到指定的对象上时触发（鼠标指针穿过任何子元素，同样会触发事件）

mouseenter事件：当鼠标指针进入（穿过）指定元素时触发（只有鼠标指针穿过被选元素时才会触发）

mouseout事件：无论鼠标指针离开被选元素还是任何子元素都会触发mouseout事件（鼠标指针离开任何子元素，同样会触发事件）

mouseleave事件：只有在鼠标指针离开被选元素时，才会触发mouseleave事件（只有在鼠标指针离开被选元素时，才会触发）

mousewheel事件：非火狐滚轮事件

DOMMouseScroll事件：火狐滚轮事件

键盘事件：通过键盘在页面上执行操作

keydown事件：某个键盘按键被按下触发

keyup事件：某个键盘按键被松开触发

keypress事件：某个键盘被按下并松开触发

表单事件

focus事件：在对象获得焦点时发生

blur事件：在对象失去焦点时发生

change事件：当元素的值发生改变时在元素失去焦点时发生（可以作用于<input><textarea><keygen><select>元素）

input事件：当元素的值发生改变时立即发生（可以作用于<input><textara>元素）

触屏事件

touch事件：在用户触摸屏幕（页面）时触发

事件对象

clientX 当事件被触发时，鼠标指针的水平坐标。相对于可视区域

clientY 当事件被触发时，鼠标指针的竖直坐标。相对于可视区域

layerX 鼠标相对于定位父级border左上角的起始位置（包括border）

layerY 鼠标相对于定位父级border左上角的起始位置（包括border）

offsetX 鼠标相对于触发事件元素的位置，从内容区域的左上角开始定位（不包括border）

offsetY 鼠标相对于触发事件元素的位置，从内容区域的左上角开始定位（不包括border）

pageX 鼠标在页面上的位置，从页面左上角开始定位。相对于整个页面

pageY 鼠标在页面上的位置，从页面左上角开始定位。相对于整个页面

screenX 鼠标在显示屏幕上的坐标，相对于屏幕

screenY 鼠标在显示屏幕上的坐标，相对于屏幕

movementX 鼠标的移动距离 mousemove事件特有

movementY 鼠标的移动距离 mousemove事件特有

X 在IE里独有，跟layerX一个效果

Y 在IE里独有，跟layerY一个效果

alrKey 返回当事件被触发时，”ALT”是否被按下

button 当事件被触发时，哪个鼠标按钮被点击（0鼠标左键，1鼠标中键，2鼠标右键）IE（1鼠标左键，4鼠标中键，2鼠标右键）

bubbles 表明事件是否冒泡，是则返回true；否则返回false

cancelable 表明事件是否拥有可取消的默认动作

ctrlKey 当事件触发时，”CTRL”键是否被按下

currentTarget 返回其监听器触发的节点，即当前处理该事件的元素、文档或窗口。也就是事件绑定的元素，和this是一样的（在捕获和气泡阶段非常有用，在这两个节点不同于target属性）

defaultPrevented 是否阻止了默认事件

detail 判断滚轮向上或向下 火狐浏览器 正值表示页面向下滑动

wheelDelta 判断滚轮向上或向下 非火狐浏览器 负值表示页面向下滑动

eventPhase 返回事件传播的当前阶段。分别为捕获阶段、正常事件派发和气泡阶段

formElement 对于mouseover和mouseout事件，fromElement引用移出鼠标的元素

isTrusted 表明当前事件是否由用户行为触发

metaKey 当事件被触发时，”meta”键是否被按下

path 层级关系

relatedTarget 返回与事件的目标节点相关的节点。对于mouseover事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。对于mouseout事件来说，该属性是离开目标时，鼠标指针进入的节点。对于其他类型的事件来说，这个属性没有用。

returnValue IE属性，它的值比事件句柄的返回值优先级高。把这个属性设置为false，可以取消发生事件的源元素的默认动作。

shiftKey 事件被触发时，”SHIFT”键是否被按下

srcElement IE属性，对于生成事件的window对象、document对象或element对象的引用

target 返回触发此事件的元素（事件的目标节点）

timeStamp 返回一个时间戳，距离页面打开的毫秒数

toElement 对于mouseover和mouseout事件，该属性引用移入鼠标的元素

type 当前event对象表示的事件的名称（如：”click”、”submit”、”load”等）

view 根元素

which 返回哪个键被按下了

事件委托

利用冒泡原理，把事件加到父级上，触发执行效果。

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
<style>
	.btntarget{
		width:150px;
		height:40px;
		background-color:gray;
		border:none;
		font-size:20px;
		border-radius:10px;
	}
</style>
<button class="btntarget">增加一个li</button>
<ul class="ultarget">
	<li>我是li1</li>
	<li>我是li2</li>
	<li>我是li3</li>
</ul>
<script>
	var btnli=document.querySelector(".btntarget");
	var ul=document.querySelector(".ultarget");
	var lis=ul.getElementsByTagName("li");
	var num=4;
	btnli.addEventListener("click",function(){
		var newLi=document.createElement("li");
		newLi.innerHTML="我是li"+num;
		ul.appendChild(newLi);
		num++;
	},false)
	ul.onclick=function(){
		var e=e||window.event;
		var targets=e.target||e.srcElement;
		for(var i=0;i<lis.length;i++){
			if(targets==lis[i]){
				alert(i);
			}
		}
	}
</script>
    
    
    
  • 我是li1
  • 我是li2
  • 我是li3