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. ADB命令无法导出文件到物理机上处理办法

    因为想查看一下脚本生成的sqlite文件.就想导出文件,,结果导出adb pull命令一直报错.使用su也是错误的..最后发现adb pull 不能再adb的命令状态下执行.需要退出adb命令.然后直 ...

  2. ASP.NET Web API 2系列(一)：初识Web API及手动搭建基本框架

    1.导言 随着Web技术的发展,现在各种框架,前端的,后端的,数不胜数.全栈工程师的压力越来越大. PC端,pad端,移动端App(安卓/IOS)的发展,使得前后端一体的开发模式十分笨重.因此,前后端 ...

  3. 利用js种的正则删除html标签

    public static string NoHTML(string Htmlstring) { //删除脚本 Htmlstring = Regex.Replace(Htmlstring, @&quo ...

  4. 记录一次jvm内存泄露的问题

    前些天,运维告诉我刚上线的java服务占用CPU过高. 以下是发现解决问题的具体流程. 1:通过#top命令查看,我的java服务确实把CPU几乎占满了,如图 可看到18400这个进程CPU占用达到了 ...

  5. Anrlr4 生成C++版本的语法解析器

    一. 写在前面 我最早是在2005年,首次在实际开发中实现语法解析器,当时调研了Yacc&Lex,觉得风格不是太好,关键当时yacc对多线程也支持的不太好,接着就又学习了Bison&F ...

  6. mvc请求管道（一）

    一.前言 在平常做后台开发的时候,经常会说到请求管道,很多开发者都知道这个,也能说几句,可能没法详细的去介绍,今天就来详细的说一下这个. 二.到达IIS之前 请看下面这个流程图.从用户打开浏览器到请求 ...

  7. python-Flask模版注入攻击SSTI(python沙盒逃逸)

    一篇以python Flask 模版渲染为例子的SSTI注入教学~ 0x01 Flask使用和渲染 这里简化了flask使用和渲染的教程 只把在安全中我们需要关注的部分写出来 来一段最简单的FLASK ...

  8. 部署在本服务器上，Jenkins无法启动Tomcat

    今天在部署Jenkins的过程中,有一个需要部署在本服务器上的Web服务,而且Jenkins给我的反馈也是成功的部署了,且Tomcat启动起来了,但是实际打开项目发现其实并没有启动起来 在查看日志的时 ...

  9. 三、DockerFile 定制属于自己的专属镜像

    前言 上篇文章我们知道了怎么操作镜像和容器,到基础都是从已经存在的镜像开始的,那我们自己怎样搭建一个镜像并使用它呢?接下来就让我们学习使用dockerfile 创建属于自己的镜像吧. dockerfi ...

  10. Unity C#数据持久化与xml

    最近工作需要用到数据持久化,所以在此分享一下,通过查阅资料,数据持久化大体都是通过xml或者json来进行的.unity为我们自定义了数据持久化方法,但是比较局限,还需要自己来完成数据持久化方法. ( ...