第一种

var test=document.getElementById('add');
add.onclick=function(){
alert('1');
}

直接在对象上注册事件

缺点:如果我想给add再加onchange 就会覆盖掉前面的onclick

优点:简单方便明了

第二种

var test=document.getElementById('add');
add.addEventListener('click',eve,false);
function eve(){
alert();
}

通过addEventListener来绑定事件

缺点:IE8搞出了attachEvent有时候要判断

优点:可以绑定多个事件还可以控制冒泡事件和捕捉事件

第三种

<span id="add" onclick='eve()'></span>
function eve(){
alert();
}

html绑定元素 同样是覆盖原则

JS 事件绑定的几种方式 小笔记的更多相关文章

  1. js事件绑定的几种方式与on()、bind()的区别

    版权声明:本文为博主原创文章,未经博主允许不得转载 一直不是很理解几种js事件绑定之间的区别与联系,今天百度了一下,在此做一总结: 1.如果只是简单的绑定一个事件,可以直接写在行内,点击执行一个函数, ...

  2. js事件绑定的几种方式

    在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTM ...

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

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

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

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

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

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

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

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

  7. js实现继承的5种方式 (笔记)

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  8. Javascript事件绑定的几种方式

    Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...

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

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

随机推荐

  1. (转载博文)MFC 窗口句柄获取

    句柄获取方法(获取该窗口的句柄后,即可向该窗口类类发送消息.处理程序):0.获取所在类窗口的句柄: this->m_hwnd 1.主窗口的句柄: 无论在主窗口类内,还是子窗口类内,获取主窗口句柄 ...

  2. PHP - Mysql数据库备份类

    使用方法: require_once("backdata.class.php"); $link =@mysql_connect("localhost",&quo ...

  3. awk(流程控制、内置变量、内置函数、数组)

    摘自:http://bbs.51cto.com/thread-883948-1-1.html awk(流程控制.内置变量.内置函数.数组) ... 参考其他的资料,给大家看看.一.awk流程控制语句 ...

  4. iOS10隐私设置及相应问题

    iOS10新添加了10个隐私设置: NSBluetoothPeripheralUsageDescription="App需要您的同意,才能访问蓝牙"; NSCalendarsUsa ...

  5. 聚类算法初探(六)OPTICS

    最近由于工作需要,对聚类算法做了一些相关的调研.现将搜集到的资料和自己对算法的一些理解整理如下,供大家参考. 另外在算法代码方面,我也做了一些实现(包括串行和并行),欢迎感兴趣的朋友探讨和交流. 第一 ...

  6. Eclipse中更改默认java代码格式【转】

    在写代码时常常有2种代码样式习惯,如下图.由于一直习惯了第一种代码格式,而看第二种代码格式时感觉代码很乱,总找不到“{ }”对称的感觉.Eclipse自动格式化代码的快捷方式是Ctrl+Shift+F ...

  7. Android 四大组件之Activity生命周期

    写这篇博文之前,已经对android有一定的了解和认识.这篇博文主要讲述android的Activity的生命周期,这是android开发者必须掌握的知识.android的Activity组件拥有7个 ...

  8. Oracle的汉字转拼音首字母的函数

    CREATE OR REPLACE FUNCTION F_PINYIN(P_NAME IN VARCHAR2) RETURN VARCHAR2 AS V_COMPARE VARCHAR2(100); ...

  9. androik_sdk 更新慢问题解决办法。

    在windows中更改hosts(找到文件夹C:\Windows\System32\drivers\etc找到里面的hosts文件 )在这里添加74.125.237.1 dl-ssl.google.c ...

  10. IOS支付宝支付出现6002问题的解决办法

    运行支付宝官方demo进行支付测试,会出现6002-网络连接错误,是因为以iOS9 SDK编译的工程会默认以SSL安全协议进行网络传输,即HTTPS,如果依然使用HTTP协议请求网络会报系统异常并中断 ...