Loading

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

1 直接在html标签中绑定

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

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

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

2 用js的对象进行绑定事件

  1. <body>
  2. <buttonid="btn1">点击1</button>
  3. </body>
  4. <script>
  5. window.onload =function(){
  6. console.log("onload事件执行...");
  7. var oBtn = document.getElementById('btn1');
  8. oBtn.onclick =function(){
  9. console.log('btn1的点击事件被触发...');
  10. }
  11. }
  12. </script>

3 用事件监听的方式

  1. <script>
  2. window.onload =function(){
  3. console.log('onload执行...');
  4. var oBtn = document.getElementById('btn1');
  5. oBtn.addEventListener('click',function(){
  6. console.log('btn1的点击监听事件被触发');
  7. })
  8. }
  9. </script>

4 事件监听的捕获和冒泡方式

addEventListener(‘触发事件’,’执行函数’,boolean)，boolean默认为false

添加事件监听的第三个参数，flase:冒泡 ，true：捕获；两者区别在于，冒泡触发是从内向外的，捕获事件是从外向内的，点击事件的顺序是从外到内，在从内到外,给事件设置不同的事件监听方式使他在不同的阶段执行

  1. <div id ='div1'>
  2. <div id="div2">
  3. <button id ='btn1'>点击1</button>
  4. <button id ='btn2'>点击2</button>
  5. </div>
  6. </div>
  7. <script>
  8. window.onload =function(){
  9. console.log('onload执行...');
  10. document.getElementById('btn1').addEventListener('click',function(){
  11. console.log('btn1的点击监听事件被触发');
  12. },false);
  13. document.getElementById('btn2').addEventListener('click',function(){
  14. console.log('btn2的点击监听事件被触发');
  15. },true);
  16. document.getElementById('div1').addEventListener('click',function(){
  17. console.log('div1的点击监听事件被触发');
  18. },false);
  19. document.getElementById('div2').addEventListener('click',function(){
  20. console.log('div2的点击监听事件被触发');
  21. },true);
  22. }
  23. </script>

5 阻止事件冒泡

通过e.stopPropagation();阻止冒泡
  1. document.getElementById('btn1').addEventListener('click',function(e){
  2. e.stopPropagation();
  3. console.log('btn1的点击监听事件被触发');
  4. },false);
posted @ 2019-10-26 10:11  逝zxq  阅读(2084)  评论(0)    收藏  举报