JavaScript Event

event 事件

浏览器自动触发或者用户手动触发的页面状态的改变;事件通常与函数结合使用，函数不会在事件发生前被执行！

常用事件

onblur： 元素失去焦点时触发；
onfocus： 元素获得焦点时触发；
onchange：域的内容被改变时触发；
onkeydown： 某个键盘按键被按下时触发；
onkeyup： 某个键盘按键被松开时触发；
onclick： 当某个对象被点击时触发；
onmouseover： 鼠标移到某元素之上时触发；
onmouseout： 鼠标从某元素移开时触发；
onmousedown： 鼠标按钮被按下时触发；
onmouseup： 鼠标按键被松开时触发；
onreset： 重置按钮被点击时触发；
onsubmit： 确认按钮被点击时触发；

事件触发

DOM中一个事件的发生分三个阶段：
1.捕获：由外到内，记录各级父元素上绑定的相同的事件；
2.目标触发：首先触发目标元素上的事件处理函数；
3.冒泡：按照捕获顺序，反向执行，由内到外，依次触发各级父元素绑定的事件处理函数。
取消冒泡：DOM标准：e.stopPropagation();IE8：e.cancelBubble = true;
兼容：

if(e.stopPropagation()){
	e.stopPropagation()
}else{
	e.cancelBubble = true;
}

绑定事件

1.在HTML中绑定：
ex:

<div onclick = "alert('Hello World')"></div>

2.为事件属性赋值一个函数：
ex:

document.getElementsByTagName("div")[0].onclick  = function(){
  alert("Hello World");
}

3.addEventListener：
ANY.addEventListener(“事件名”,fun , capture)；

<ul id="list">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<sctipt>
	document.getElementById("list").addEvenListener('click',function (e) {
		if(e.target.nodeName == "LI"){
			alert("我是li" + e.target.innerHTML);
		}
	}
</script>