JavaScript三种绑定事件的方式:

  1. <div id="btn" onclick="clickone()"></div> //直接在DOM里绑定事件

    <script>

     function clickone(){ alert("hello"); }

    </script>

  2. <div id="btn"></div>

    <script>

     document.getElementById("btn").onclick = function(){ alert("hello"); } //脚本里面绑定

    </script>

  3. <div id="btn"></div>

    <script>

     document.getElementById("btn").addeventlistener("click",clickone,false); //通过侦听事件处理相应的函数

     function clickone(){ alert("hello"); }

    </script>

那么问题来了,1 和 2 的方式是我们经常用到的,那么既然已经有两种绑定事件的方法为什么还要有第三种呢?答案是这样的:

用 "addeventlistener" 可以绑定多次同一个事件,且都会执行,而在DOM结构如果绑定两个 "onclick" 事件,只会执行第一个;在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

  1. <div id="btn" onclick="clickone()" onclick="clicktwo()"></div>

    <script>

     function clickone(){ alert("hello"); } //执行这个

     function clicktwo(){ alert("world!"); }

    </script>

  2. <div id="btn"></div>

    <script>

     document.getElementById("btn").onclick = function(){ alert("hello"); }

     document.getElementById("btn").onclick = function(){ alert("world"); } //执行这个

    </script>

  3. <div id="btn"></div>

    <script>

     document.getElementById("btn").addeventlistener("click",clickone,false);

     function clickone(){ alert("hello"); } //先执行

     document.getElementById("btn").addeventlistener("click",clicktwo,false);

     function clicktwo(){ alert("world"); } //后执行

    </script>

以上;可根据场景灵活选择。

JavaScript 三种绑定事件方式之间的区别的更多相关文章

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

    JavaScript三种绑定事件的方式: 1. <div id="btn" onclick="clickone()"></div> // ...

  2. java设计模式---三种工厂模式之间的区别

    简单工厂,工厂方法,抽象工厂都属于设计模式中的创建型模式.其主要功能都是帮助我们把对象的实例化部分抽取了出来,优化了系统的架构,并且增强了系统的扩展性. 本文是本人对这三种模式学习后的一个小结以及对他 ...

  3. Binding 中 Elementname,Source,RelativeSource 三种绑定的方式

    在WPF应用的开发过程中Binding是一个非常重要的部分. 在实际开发过程中Binding的不同种写法达到的效果相同但事实是存在很大区别的. 这里将实际中碰到过的问题做下汇总记录和理解. 1. so ...

  4. js this详解,事件的三种绑定方式

    this,当前触发事件的标签 在绑定事件中的三种用法: a. 直接HTML中的标签里绑定 onclick="fun1()"; b. 先获取Dom对象,然后利用dom对象在js里绑定 ...

  5. java Data、String、Long三种日期类型之间的相互转换

    java Data.String.Long三种日期类型之间的相互转换      // date类型转换为String类型   // formatType格式为yyyy-MM-dd HH:mm:ss// ...

  6. v-bind绑定属性样式——class的三种绑定方式

    1.布尔值的绑定方式 <div id="demo"> <span v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB ...

  7. Dom事件的三种绑定方式

    1.事件 2.  onclick, onblur, onfocus, 需求:请写出一个行为,样式,结构,相分离的页面.   JS,   CSS,  HTML, 示例1,行为结构样式粘到一起的页面: & ...

  8. spring boot:thymeleaf模板中insert/include/replace三种引用fragment方式的区别(spring boot 2.3.3)

    一,thymeleaf模板中insert/include/replace三种引用fragment方式的区别 insert: 把整个fragment(包括fragment的节点tag)插入到当前节点内部 ...

  9. JavaScript中的三种弹出框的区别与使用

    JavaScript中有三种原生的弹出框,分别是alert.confirm.prompt.分别表示弹出框.确认框.信息框. 以下是示例代码: <!DOCTYPE html> <htm ...

随机推荐

  1. Linux下的进程管理

    在操作系统系统中,进程是一个非常重要的概念. 一.Linux中进程的相关知识 1.什么是进程呢? 通俗的来说进程是运行起来的程序.唯一标示进程的是进程描述符(PID),在linux内核中是通过task ...

  2. 在JS和.NET中使用JSON (以及使用Linq to JSON定制JSON数据)

    转载原地址: http://www.cnblogs.com/mcgrady/archive/2013/06/08/3127781.html 阅读目录 JSON的两种结构 认识JSON字符串 在JS中如 ...

  3. Codeforces Round #349 (Div. 2) D. World Tour (最短路)

    题目链接:http://codeforces.com/contest/667/problem/D 给你一个有向图,dis[i][j]表示i到j的最短路,让你求dis[u][i] + dis[i][j] ...

  4. lib 和 dll 的区别、生成以及使用详解

    首先介绍一下静态库(静态链接库).动态库(动态链接库)的概念,首先两者都是代码共享的方式. 静态库:在链接步骤中,连接器将从库文件取得所需的代码,复制到生成的可执行文件中,这种库称为静态库,其特点是可 ...

  5. Unity3D之ScriptableObject学习笔记

    不同与C#提供的Serializable序列化功能,ScriptableObject是Unity3D提供的一个数据存储类,我们接下来学习一下这个类的功能. 官方文档 http://docs.unity ...

  6. I/O流的学习

    一.I/O流 1.判定是输入还是输出我们应该站在程序的立场: 2.判断传输的是字节还是字符,从而决定管道的大小,字节传递是根本,可以传递所有的数据类型,字符传递专门用来传递文本数据,字节主要用来传递二 ...

  7. ibatis 搭建总结

    一.搭建ibatis环境 1.导入ibatis的jar包,已及数据库驱动jar包ibatis-2.3.0.677.jar ibatis-dao-2.jar ibatis-sqlmap-2.jar ib ...

  8. 一个非常标准的Java连接Oracle数据库的示例代码

    最基本的Oracle数据库连接代码(只针对Oracle11g): 1.右键项目->构建路径->配置构建路径,选择第三项“库”,然后点击“添加外部Jar”,选择“D:\Oracle\app\ ...

  9. Struts2内建校验器(基于校验框架的文件校验)

    位于xwork-2.0.4.jar压缩包中( com.opensymphony.xwork2.validator.validators)有个文件default.xml ,该文件中定义了Struts2框 ...

  10. Java Nio 多线程网络下载

    --> 默认最多50个线程 同一文件下载失败延迟超过30秒就结束下载 --> 下载5分钟超时时间,假设5分钟内未下载完就结束下载 --> 依赖 commons-httpclient ...