第一种

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. .NET设计模式系列文章

    原文地址:http://terrylee.cnblogs.com/archive/2006/06/01/334911.html 最初写探索设计模式系列的时候,我只是想把它作为自己学习设计模式的读书笔记 ...

  2. Java报表开发组件DynamicReports

    DynamicReports 是一个基于 JasperReports 进行扩展的 Java 报表库,可用它来快速创建报表而无需可视化报表设计工具. From :  http://www.oschina ...

  3. poj 1458 Common Subsequence_最长公共子串

    题意:略 求最长公共子串 #include<iostream> #include<cstdio> #include<string> using namespace ...

  4. Linux启动新进程的几种方法及比较

    有时候,我们需要在自己的程序(进程)中启动另一个程序(进程)来帮助我们完成一些工作,那么我们需要怎么才能在自己的进程中启动其他的进程呢?在Linux中提供了不少的方法来实现这一点,下面就来介绍一个这些 ...

  5. MAC中在eclipse luna上搭建移动平台自己主动化測试框架(UIAutomator/Appium/Robotium/MonkeyRunner)关键点记录

    这几天由于原来在用的hp laptop的电池坏掉了,机器一不小心就断电.所以仅仅能花时间在自己的mackbook pro上又一次搭建整套环境.大家都知道搭建好开发环境是个非常琐碎须要耐心的事情,特别是 ...

  6. golang基础数据结构

    一.概述: 这里主要讨论四种类型---数组.slice.map和结构体 数组和结构体是聚合类型:它们的值都是由很多个元素或者成员字段的值组成.数组是有同构元素组成--每个数组的元素的类型相同:结构体为 ...

  7. inline函数

    C语言中的inline函数并不是单纯的用函数块内容来替换,也可能存在局部变量啥的.另外,使用inline定义的函数只是建议编译器作为内联函数处理,但并不一定真会这样处理.inline一般直接在头文件中 ...

  8. 子级Repeater获取 父级Repeater

    第一种方法,子级Repeater中绑定父级的某个字段: <%# DataBinder.Eval((Container.NamingContainer.NamingContainer as Rep ...

  9. asp.net实现UNIX 时间戳

    //1 将系统时间转换成UNIX时间戳    DateTime dtStart = TimeZone.CurrentTimeZone.ToLocalTime(new DateTime(1970,1,1 ...

  10. HTTP Status 404 - No result defined for action com.hebky.oa.classEntity.action.EntitysAction and result input

    在开发中总遇到这个问题,No result defined for action:原因:Action中的属性值为空的时候,Struts2的默认拦截器会报错,但是又找不到input的Result,不能够 ...