事件
javaScript 与 HTML 之间的交互是通过事件实现的
1.事件流
(1)事件冒泡
IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)
(2)事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件
(3)事件代理
事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件
//监听ul下所有的li的事件
window.onload = function(){
var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert(123);
alert(target.innerHTML);
}
}
}
2.事件处理程序
某个事件的函数就叫做事件处理程序
(1)HTML事件处理程序
(2)DOM0 级事件处理程序
每个元素(包括 window 和 document)都有自己的事件处理程序属性,这些属性通常全部小写,例如 onclick。
(3)DOM2 级事件处理程序
“DOM2 级事件” 定义了两个方法,用于处理指定和删除事件处理程序的操作:
addEventListener()和 removeEventListener()。
//跨浏览器的事件处理程序
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
};
3.事件对象
在触发 DOM 上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如,鼠标操作导致的事件
属性和方法
preventDefault() 取消事件的默认行为
stopPropagation() 取消事件冒泡
4.事件类型
(1)UI事件
load,unLoad,abord,error,select,resize,scroll
(2)焦点事件
blur //在元素失去焦点时触发。这个事件不会冒泡;所有浏览器都支持它。
focus
focusin:在元素获得焦点时触发。这个事件与 HTML 事件 focus 等价,但它冒泡
focusout
(3)鼠标事件
click,dbclick,mousedown,mouseenter,mouseleave,mousemove,mouseout,mouseover,mouseup