事件
如何綁定事件
- ele.onxxx = function(event) { }
- 兼容性好, 但是一個(gè)元素的同一個(gè)事件上只能綁定一個(gè)處理程序
- 基本等同于寫在HTML行間
- obj.addEventListener(type, function( ){ }, flase);
- IE9以下不兼容, 可以為一個(gè)事件綁定多個(gè)處理程序
- obj.attachEvent('on' + type, fn);
- IE獨(dú)有, 一個(gè)事件同樣可以綁定多個(gè)處理程序
事件處理程序的運(yùn)行環(huán)境
- ele.onxxx = function(event) { }
- 程序this指向是dom元素本身
- obj.addEventListener(type, fn, false);
- 程序this指向是dom元素本身
- obj.attachEvent('on' + type, fn);
- 程序this指向window
- 封裝兼容性的addEvent(elem, type, handle);方法
function addEvent(elem, type, handle) {
if(elem.addEventListener) {
elem.addEventListener(type, handle, false);
}else if(elem.attachEvent) {
elem['temp'] = function() {
handle.call(elem);
}
elem.attachEvent('on' + type, elem['temp']);
}else{
elem['on' + type] = handle;
}
}
解決事件處理程序
- ele,.onclick = flase/ ' '/ null;
- ele.removeEventListener(type, fn, false);
- ele.detachEvent('on' + type, fn);
- 注: 若綁定匿名函數(shù), 則無法解除
- 封裝的兼容方法
function removeEvent(elem, type, handle) {
if(elem.removeEventListener) {
elem.removeEventListener(type, handle, false);
}else if(elem.detachEvent) {
elem.detachEvent('on' + type, handle);
}else{
elem['on' + type] = null;
}
}
事件處理模型--事件冒泡 \ 捕獲
事件冒泡
- 結(jié)構(gòu)上(非視覺上)嵌套的元素, 會(huì)存在事件冒泡的功能, 即同一個(gè)事件, 自子元素冒泡向父元素(自底向上)
**Tips: addEventListener中的第三個(gè)參數(shù)false/true, 當(dāng)為true是事件變?yōu)椴东@機(jī)制 , flase時(shí)為冒泡機(jī)制 **
事件捕獲
- 結(jié)構(gòu)上(非視覺上)嵌套關(guān)系的元素, 會(huì)存在事件捕獲的功能, 即同一個(gè)事件, 自父元素捕獲至子元素(事件源元素). (自頂向下)
- IE沒有捕獲事件
EG:
例子
- 當(dāng)為捕獲機(jī)制時(shí): 當(dāng)點(diǎn)擊黃色方塊時(shí)(結(jié)構(gòu)嵌套, 黃色為里面的div, 紅色為父級(jí)), 先出發(fā)的是紅色點(diǎn)擊事件, 之后是綠色, 黃色;
- 當(dāng)為冒泡機(jī)制時(shí), 先觸發(fā)黃色事件, 然后依次向父級(jí)冒泡, 為綠色, 紅色.
即使兩個(gè)都有, 觸發(fā)順序, 先捕獲, 后冒泡
focus(鼠標(biāo)聚焦), blur(鼠標(biāo)失去焦點(diǎn)), change, submit, reset, select等事件不冒泡
取消冒泡和阻止默認(rèn)事件
取消冒泡:
- W3C標(biāo)準(zhǔn)event.stopPropagation( );但不支持ie9以下版本
eg:
var div = document.getElementsBYTagName('div')[0];
div.onClick = function() {
console.log('a');
e.stopPropagation();
}
- IE獨(dú)有event.cancelBubble = true;
- 封裝取消冒泡的函數(shù)
阻止默認(rèn)事件:
- 默認(rèn)事件---表單提交, a標(biāo)簽跳轉(zhuǎn), 右鍵菜單等.
- return flase; 以對(duì)象屬性的方式注冊的事件才生效
- event.preventDefault( ); W3C標(biāo)準(zhǔn), IE9以下不兼容
- event.returnValue = false; 兼容IE
- 封裝阻止默認(rèn)事件的函數(shù)cancelHandler(event);
事件對(duì)象
- event || window.event 用于IE
eg:
div.onclick = function(e) {
var event = e || window.event;
}
- 事件源對(duì)象
- event.target 火狐只有這個(gè)
-
event.srcElement IE只有這個(gè)
eg1:在HTML中有100個(gè)li, 要求點(diǎn)擊任意li, 打印出li中的內(nèi)容
這里寫圖片描述
注意:又稱事件委托!!!!!!!!!
eg2:
var wrapper = document.getElementsByClassName('wrapper')[0];
var content = document.getElementsByClassName('content')[0];
wrapper.onClick = function(e) {
var event = e || window.event;
var target = event.target || event.srcElement//獲取事件源對(duì)象, 就是找到吹泡泡的人
}
- 以上chrome都有
