JavaScript中有哪些事件綁定的方式-創(chuàng)新互聯(lián)
這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)JavaScript中有哪些事件綁定的方式，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)建站長期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為昭化企業(yè)提供專業(yè)的
成都做網(wǎng)站、網(wǎng)站制作，
昭化網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
一、直接在 dom 元素上進行綁定
二、用 on 綁定
兼容性：在IE，F(xiàn)F，Chrome，Safari，Mozilla，Opera下都適用。
// onclick綁定
document.body.onclick = () => {
console.log(111)
}
// 解綁
document.body.onclick = null;但是，同一個 dom 元素上，on 只能綁定一個同類型事件，后者會覆蓋前者，不同類型的事件可以綁定多個。
三、用 addEventListener、attachEvent 綁定
同一個 dom 元素上，用 addEventListener、attachEvent 可以綁定多個同類型事件。
但是，addEventListener 事件執(zhí)行順序按照事件綁定的先后順序執(zhí)行；attachEvent 事件執(zhí)行順序則是隨機的。
addEventListener
// 綁定
document.body.addEventListener('click', bodyClick, false);
// 解綁
document.body.removeEventListener('click', bodyClick, false);注意：removeEventListener 第二個參數(shù)要和 addEventListener 指向同一個函數(shù)才能解綁成功。
addEventListener 的第三個參數(shù)若為 false，函數(shù)在冒泡階段執(zhí)行；若為 true，函數(shù)在捕獲階段執(zhí)行。默認為 false。
box.addEventListener("click", function(){
console.log("box");
}, false);
child.addEventListener("click", function(){
console.log("child");
});
// 執(zhí)行順序為 child boxbox.addEventListener("click", function(){
console.log("box");
}, true);
child.addEventListener("click", function(){
console.log("child");
});
// 執(zhí)行順序為 box child兼容性
Chrome 和 FireFox 只支持 addEventListener；IE 只支持 attachEvent（IE11開始不支持了）。
所以必須對2種方法做兼容處理。原理是先判斷 attachEvent 是否為真，如果為真則用 attachEvent 綁定事件，否則用 addEventListener 綁定事件。
可以封裝一個函數(shù)做兼容性處理：
//dom綁定事件的元素，ev事件名，fn執(zhí)行函數(shù)
function myAddEvent(dom, ev, fn){
if(dom.attachEvent){
dom.attachEvent("on"+ev, fn);
}else {
dom.addEventListener(ev, fn, false);
}
}
myAddEvent(d1, "click", ()=>{
console.log(1111)
});另外
以上三種方式綁定的點擊事件都可以用下面這條語句觸發(fā)
document.getElementById("btn").click();上述就是小編為大家分享的JavaScript中有哪些事件綁定的方式了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
分享文章：JavaScript中有哪些事件綁定的方式-創(chuàng)新互聯(lián)
分享URL：
http://weahome.cn/article/dcogcc.html
重慶分公司
重慶分公司
