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

相关文章

相关标签/搜索

三种方式解决

类-三种方法

每日一句

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

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<