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>