js中的事件绑定的三种方式

2023-08-19 12:42:52

1 直接在html标签中绑定

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

注意当你引用的js代码是包裹在window.onload中的形式的时候，show()是会报没有定义的错误，原因在于window.onload是在

页面全部加载完之后再去解析加载里面的内容。而button的点击事件在解析button的时候没有被定义。

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：捕获；两者区别在于，冒泡触发是从内向外的，捕获事件是从外向内的，点击事件的顺序是从外到内，在从内到外,给事件设置不同的事件监听方式使他在不同的阶段执行

<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);