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中的事件绑定的三种方式的更多相关文章

  1. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  2. JavaScript 中事件绑定的三种方式

    以下是在 JS 中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="uplo ...

  3. JavaScript事件绑定的三种方式

    (一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...

  4. JavaScript中事件绑定的三种方式

    JavaScript使得网页与用户友好交互,在使用 js 进行时间绑定的时候有三种绑定方式. 第一种:初学者以及普通写法 <div id="dom0"> <inp ...

  5. JS事件绑定的三种方式比较

    js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  6. jQuery中的事件绑定的几种方式

    jQuery目前有on(),bind(),delegate(),live()四种绑定方式,但是随着版本的不断更新,有的方式也相应的被淘汰掉 [band()方式绑定] 3.0版本之前的绑定方式比较常用的 ...

  7. [转]javascript指定事件处理程序包括三种方式：

    javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...

  8. 在Tomcat中部署web项目的三种方式

    搬瓦工搭建SS教程 SSR免费节点:http://www.xiaokeli.me 在这里介绍在Tomcat中部署web项目的三种方式: 1.部署解包的webapp目录 2.打包的war文件 3.Man ...

  9. Tomcat中部署web应用的三种方式

    Tomcat中部署web应用的三种方式(静态部署)       第一种,针对war或解压后的war,最为常用的是直接操作webapp目录,将完整的war包或者web应用直接放到webapp目录下.使用 ...

随机推荐

  1. vue3.0的安装使用

    关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vu ...

  2. css3——box-sizing属性

    很多朋友们可能会疑惑,不知道box-sizing属性是有什么作用,自己也很少会用到,但是想必不少人在做网页布局的时候经常遇到一个问题就是我明明设置了父元素设置了假如是宽高500px,5个子元素左浮动设 ...

  3. cocos2d-x 系统学习cocos(1)

    简析HelloWorld场景 以前使用cocos2d-x 3.14的时候,HelloWorld并不是一个场景类,而是一个图层类,当时的HelloWorld::createScene()是长这样的 Sc ...

  4. 1.C&DataStructure引言

    使用过C++ <STD> 库的猿友们应该都觉得 C++中那些已经实现好了的数据类型封装使用让人很是舒服; 例如 vector 支持自动扩充数组,支持模板类,任何数据类型都可以 简单的管理, ...

  5. RAID 10 配置流程

    1.在虚拟机中再添加5块硬盘: 2.fdisk -l 可以查看当前虚拟机中的磁盘情况. 3.使用mdadm命令创建RAID10,名称为”/dev/md0″. -C代表创建操作,-v显示创建过程,-a ...

  6. WPF编程，C#中对话框自动关闭的一种方法(转载)

    本文原文链接:https://blog.csdn.net/qq_43307934/article/details/84933196———————————————— MessageBoxTimeout是 ...

  7. 14.Nginx四层负载均衡

    1.七层负载均衡: 根据url 调度不同的集群 url.cheng.com 10.0.0.5 10.0.0.7 /pass 10.0.0.8 /user 1.web01和web02配置 (只不过代码不 ...

  8. 题解 CF600E 【Lomsat gelral】

    没有多少人用莫队做吗? 蒟蒻水一波莫队 这是一道树上莫队好题. 时间复杂度(\(n\sqrt{n}logn\)) 蒟蒻过菜,不会去掉logn的做法qaq 思路很简单: 1.dfs跑一下树上点的dfs序 ...

  9. ESP8266开发之旅 网络篇⑥ ESP8266WiFiGeneric——基础库

    1. 前言     在前面的博文中,博主介绍到ESP8266WiFi库是包含了很多功能的一个超级库.ESP8266WiFi库不仅仅局限于 ESP8266WiFi.h 和 ESP8266WiFi.cpp ...

  10. Apache常见配置

      一.yum安装与配置 1.1安装: [root@apache ~]# yum install http\* -y [root@apache ~]# echo "test01" ...