第一种

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. Asp.Net MVC3 简单入门第一季(三)详解Controller之Filter

    前言 前面两篇写的比较简单,刚开始写这个系列的时候我面向的对象是刚开始接触Asp.Net MVC的朋友,所以写的尽量简单.所以写的没多少技术含量.把这些技术总结出来,然后一简单的方式让更多的人很好的接 ...

  2. API经济产业

    技术大咖为我们铺好了前进道路,我们为什么还要敬而远之舍近索远呢?充分利用开源,利用API进行App有效整合. 为应用添加日志功能,Loggly; 为应用添加用户管理和身份认证模块,Stormpath; ...

  3. RTNETLINK answers: Operation not permitted

    如果出现:RTNETLINK answers: Operation not permitted,那是因为没有权限. 解决办法:su,输入root密码.

  4. error LNK1104: 无法打开文件“libboost_thread-vc140-mt-gd-1_61.lib”

    error LNK1104: 无法打开文件“libboost_thread-vc140-mt-gd-1_61.lib” 调试->你的项目属性 配置属性->VC++目录 包含目录 D:\bo ...

  5. nodejs面试

    1. PM2相关 1. PM2的主要功能?*答案:在Node.js进程挂掉以后自动重启进程,并且能够方便的实现Node.js的集群模式* 2. 如何查看当前是否适合重启服务?*答案:pm2 monit ...

  6. Altium designer使用技巧集(1)

    1.如何生成PCB 先得新建个PCB文件(File-New-Pcb):然后保存下,在新建的PCB文件下:Design-Import Changes From PCB_PROJECT1.PRJPCB(D ...

  7. UVA - 10574 Counting Rectangles

    Description Problem H Counting Rectangles Input: Standard Input Output:Standard Output Time Limit: 3 ...

  8. 从头开始-03.C语言中数据类型

    基本数据类型 整形: Int 4字节 %d / %i Short 2字节 %hd Long 8字节 %ld Longlong 8字节 %lld Unsigned 4字节 % 浮点型 单精度 Float ...

  9. SQL SERVER 数据类型详解(SQL Server 2008)

    数据类型类别 SQL Server 中的数据类型归纳为下列类别: 数字类型 1.精确数字 2.近似数字 3.日期和时间 字符串类型 4.非Unicode字符串 4.Unicode字符串 5.二进制字符 ...

  10. Hibernate工作原理及为什么要用?(转http://www.cnblogs.com/javaNewegg/archive/2011/08/28/2156521.html)

    原理:1.通过Configuration().configure();读取并解析hibernate.cfg.xml配置文件2.由hibernate.cfg.xml中的<mapping resou ...