js中的事件綁定的三種方式

時間 2019-11-08

標籤事件綁定三種方式欄目 JavaScript 简体版

原文原文鏈接

1 直接在html標籤中綁定

<button onclick = "show()"></button>javascript

注意當你引用的js代碼是包裹在window.onload中的形式的時候，show()是會報沒有定義的錯誤，緣由在於window.onload是在

頁面所有加載完以後再去解析加載裏面的內容。而button的點擊事件在解析button的時候沒有被定義。html

2 用js的對象進行綁定事件

<body>
<buttonid="btn1">點擊1</button>
</body>
<script>
window.onload =function(){
console.log("onload事件執行...");
var oBtn = document.getElementById('btn1');
oBtn.onclick =function(){
console.log('btn1的點擊事件被觸發...');
}
}
</script>

3 用事件監聽的方式

<script>
window.onload =function(){
console.log('onload執行...');
var oBtn = document.getElementById('btn1');
oBtn.addEventListener('click',function(){
console.log('btn1的點擊監聽事件被觸發');
})
}
</script>

4 事件監聽的捕獲和冒泡方式

addEventListener(‘觸發事件’,’執行函數’,boolean)，boolean默認爲false

添加事件監聽的第三個參數，flase:冒泡，true：捕獲；二者區別在於，冒泡觸發是從內向外的，捕獲事件是從外向內的，點擊事件的順序是從外到內，在從內到外,給事件設置不一樣的事件監聽方式使他在不一樣的階段執行java

<div id ='div1'>
<div id="div2">
<button id ='btn1'>點擊1</button>
<button id ='btn2'>點擊2</button>
</div>
</div>
<script>
window.onload =function(){
console.log('onload執行...');
document.getElementById('btn1').addEventListener('click',function(){
console.log('btn1的點擊監聽事件被觸發');
},false);
document.getElementById('btn2').addEventListener('click',function(){
console.log('btn2的點擊監聽事件被觸發');
},true);
document.getElementById('div1').addEventListener('click',function(){
console.log('div1的點擊監聽事件被觸發');
},false);
document.getElementById('div2').addEventListener('click',function(){
console.log('div2的點擊監聽事件被觸發');
},true);
}
</script>

5 阻止事件冒泡

經過e.stopPropagation();阻止冒泡

document.getElementById('btn1').addEventListener('click',function(e){
e.stopPropagation();
console.log('btn1的點擊監聽事件被觸發');
},false);

相關文章

相關標籤/搜索

三種方式解決

類-三種方法

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<