标签:font event lis asc enum button fun 事件监听 dde
<button onclick = "show()"></button>
页面全部加载完之后再去解析加载里面的内容。而button的点击事件在解析button的时候没有被定义。
<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>
<script>
window.onload =function(){
console.log(‘onload执行...‘);
var oBtn = document.getElementById(‘btn1‘);
oBtn.addEventListener(‘click‘,function(){
console.log(‘btn1的点击监听事件被触发‘);
})
}
</script>
添加事件监听的第三个参数,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>
document.getElementById(‘btn1‘).addEventListener(‘click‘,function(e){
e.stopPropagation();
console.log(‘btn1的点击监听事件被触发‘);
},false);
标签:font event lis asc enum button fun 事件监听 dde
原文地址:https://www.cnblogs.com/Zxq-zn/p/11691837.html