1. 程式人生 > >移動端和pc端事件綁定方式以及取消瀏覽器默認樣式和取消冒泡

移動端和pc端事件綁定方式以及取消瀏覽器默認樣式和取消冒泡

一次 註意 倒序 bind 註冊 all fun top 綁定

### 兩種綁定方式
(DOM0)1.obj.onclick = fn;

(DOM2)2.
ie:obj.attachEvent(事件名稱,事件函數);
1.沒有捕獲(非標準的ie 標準的ie底下有 ie6到10)
2.事件名稱有on
3.事件函數執行的順序:標準ie-》正序 非標準ie-》倒序
4.this指向window
標準:obj.addEventListener(事件名稱,事件函數,是否捕獲);
1.有捕獲
2.事件名稱沒有on
3.事件執行的順序是正序
4.this觸發該事件的對象


document.attachEvent(‘onclick‘, fn2);
document.attachEvent(‘onclick‘, function() {
fn1.call(document);
});

是否捕獲 : 默認是false false:冒泡 true:捕獲

document.addEventListener(‘click‘, fn1, false);
document.addEventListener(‘click‘, fn2, false);

註意
ie代表了:非標準ie 和 標準ie
標準代表了:標準ie 和 chrome Firefox等....

### 同步this
function bind(obj, evname, fn) {
if (obj.addEventListener) {//除ie低版本外都可以進入
obj.addEventListener(evname, fn, false);
} else {
obj.attachEvent(‘on‘ + evname, function() {
fn.call(obj);
});
}
}

bind(document, ‘click‘, fn1);

### 兩種綁定方式的區別
取消冒泡的手段:event.cancelBubble = true;(不推薦使用)
event.stopPropagation();

第一種:默認冒泡,
第一種:一個元素上只能綁定一個同類事件,如果繼續綁定的話,第二個事件函數會覆蓋第一個


第二種:
attachEvent
默認冒泡
addEventListener
是否捕獲 : 默認是false
第三個參數: false:冒泡
true:捕獲
第二種:一個元素上可以綁定多個同類事件,它們都會被執行


### 事件解綁
DOM0:想解除事件就相當簡單了,只需要再註冊一次事件,把值設成null
原理就是最後註冊的事件要覆蓋之前的,最後一次註冊事件設置成null,
也就解除了事件綁定。

DOM2:removeEventListener
解除事件語法:btn.removeEventListener("事件名稱", "事件回調", "捕獲/冒泡");
detachEvent(ie)


### 總結
onclick形式:冒泡
attachEvent:冒泡
addEventListener:第三個參數(false:冒泡;true:捕獲)

移動端和pc端事件綁定方式以及取消瀏覽器默認樣式和取消冒泡