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);
上一篇:js 编码、解码与asp.net 编码、解码


下一篇:web 打开子窗口提交数据或其他操作后 关闭子窗口且刷新父窗口实现