掌握要點(diǎn):1、理解事件流
2、使用事件處理程序
3熙侍、不同的事件類型
一、事件流
事件流描述的是從頁面中接受事件的順序履磨。
IE的事件流是事件冒泡流蛉抓,而Netscape的事件流是事件捕獲流
1、事件冒泡
事件冒泡蹬耘,即事件最開始由最具體的元素(文檔中嵌套層次最深的那個(gè)節(jié)點(diǎn))接收芝雪,然后逐級向上轉(zhuǎn)播至最不具體的節(jié)點(diǎn)(文檔)减余。
2综苔、事件捕獲
事件捕獲的思想是不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件,而最具體的節(jié)點(diǎn)最后接收到事件位岔。
二如筛、事件處理程序
1、HTML事件處理程序
2抒抬、DOM0級事件處理程序
3杨刨、DOM2級事件處理程序
DOM2級事件定義了兩個(gè)方法:用于處理指定和刪除事件處理程序的操作:addEventListener()和removeEventListener()。它們都接收三個(gè)參數(shù):要處理的事件名擦剑、作為事件處理程序的函數(shù)和一個(gè)布爾值妖胀。
4、IE事件處理程序
attachEvent()添加事件
detachEvent()刪除事件
這兩個(gè)方法接收相同的兩個(gè)參數(shù):事件處理程序名稱與事件處理函數(shù)
5惠勒、跨瀏覽器的事件處理程序
三赚抡、事件對象
事件對象event
1、DOM中的事件對象
(1)纠屋、type:獲取事件類型
(2)涂臣、target:事件目標(biāo)
(3)、stopPropagation() 阻止事件冒泡
(4)售担、preventDefault() 阻止事件的默認(rèn)行為
2赁遗、IE中的事件對象
(1)署辉、type:獲取事件類型
(2)、srcElement:事件目標(biāo)
(3)岩四、cancelBubble=true阻止事件冒泡
(4)哭尝、returnValue=false阻止事件的默認(rèn)行為
代碼
// 瀏覽器兼容事件處理程序
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;
}
},
// 獲取事件
getEvent:function (event) {
return event?event:window.event;
},
// 獲取事件的類型
getType:function (event) {
return event.type;
},
// 獲取事件來自于那個(gè)元素
getElement:function () {
return event.target || event.srcElement;
},
// 阻止事件的默認(rèn)行為
preventDefalut:function (event) {
if (event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
// 阻止事件冒泡
stopPropagation:function (event) {
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
getStyle: function(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj, false)[attr];
}
}
}
四、cache的作用就是第一次請求完畢之后剖煌,如果再次去請求刚夺,可以直接從緩存里面讀取而不是再到服務(wù)器端讀取。
如果使用jquery末捣,可以使用 cache參數(shù)來控制
$.ajax({
url: "test.html",
cache: false, //或者設(shè)置true
success: function(html){
$("#results").append(html);
}
});