js中的事件绑定的三种方式
Posted 逝zxq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js中的事件绑定的三种方式相关的知识，希望对你有一定的参考价值。
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);
以上是关于js中的事件绑定的三种方式的主要内容，如果未能解决你的问题，请参考以下文章