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. opencv之膨胀与腐蚀

    腐蚀和膨胀 Erosion/Dilation erosion/dilation,用白话说,就是让图像亮的区域收缩和扩张. 原理 我们定义一个卷积核矩阵.这个矩阵可以是任何形状的,但通常而言,是矩形或者 ...

  2. Python 爬虫从入门到进阶之路（十）

    之前的文章我们介绍了一下 Python 中正则表达式和 re 模块来做一个案例,爬取<糗事百科>的糗事并存储到本地.本章我们来看一下另一种爬取数据的方式 XPath. 我们在前面爬取< ...

  3. ACM-图论-同余最短路

    https://www.cnblogs.com/31415926535x/p/11692422.html 一种没见过的处理模型,,记录一下,,主要是用来处理一个多元一次方程的解的数量的问题,,数据量小 ...

  4. Integer类型与int的==比较

    前言 Java中有两种类型 基本类型 基本数据类类型存的是数值本身 引用类型 引用类型变量在内存放的是数据的引用 基本类型通过==比较的是他们的值大小,而引用类型比较的是他们的引用地址 正文 在一些特 ...

  5. python如何判断一个对象是否是可迭代的？

    from collections import Iterable test_data = [{"type":1,"keyword":None}, {" ...

  6. vue-cli3 搭建 vue 项目

    vue-cli3 搭建 vue 项目 项目是在mac的环境下配置的 win的同学请移步[https://www.cnblogs.com/zhaomeizi/p/8483597.html] 安装 nod ...

  7. C#+Selenium抓取百度搜索结果前100网址

    需求 爬取百度搜索某个关键字对应的前一百个网址. 实现方式 VS2017 + Chrome .NET Framework + C# + Selenium(浏览器自动化测试框架) 环境准备 创建控制台应 ...

  8. webpack 4 移除 CommonsChunkPlugin，取而代之的是两个新的配置项（optimization.splitChunks 和 optimization.runtimeChunk

    默认方式 webpack模式模式现在已经做了一些通用性优化,适用于多数使用者. 需要注意的是:默认模式只影响按需(on-demand)加载的代码块(chunk),因为改变初始代码块会影响声明在HTML ...

  9. Helm神器，让管理Kubernetes像yum安装包一样简单

    目录 一.什么是Helm 二.安装 1.安装helm客户端 2.安装Tiller 3.创建服务端 4.给Tiller授权 5.为 Tiller 设置帐号 6.验证Tiller是否安装成功 三.Helm ...

  10. java类在何时被加载

    我们接着上一章的代码继续来了解一下java类是在什么时候加载的.在开始验证之前,我们现在IDEA做如下配置. -XX:+TraceClassLoading 监控类的加载 我们新建了一个TestCont ...