第一种

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. ubuntu 命令

    用mount命令加载iso到虚拟光驱 先在/media/目录下新建一个空目录作为加载iso的虚拟光驱名称: sudo mkdir /media/aaaa 再用mount挂载: sudo mount - ...

  2. springMVC在JSP页面取map值

    在springmMVC中.jsp页面取得map值. 在controller层: Map<String, Object> map = new HashMap<String, Objec ...

  3. oracle表空间创建及管理

    一.数据文件和数据库逻辑存储结构: 一个表空间包含一个或多个数据文件,一个表空间包含一个或多个段,一个段包含一个或多个区,一个区包含一个或多个连续的数据库块,一个数据库块包含一个或多个操作系统块.段是 ...

  4. ASP.Net【如何合并DataTable,并且去重复方法】

    虽然DataTable.Merge可以很好的实现,但以下代码写出来更好理解 DataTable DataTable1 = new DataTable(); DataTable DataTable2 = ...

  5. JS删除练习

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. 新炬学院OCM讲师《Oracle核心技术》译作面世

    对于数据库爱好者来讲,Oracle是最值得研究的数据库.学习Oracle数据库时,一本好书的引导和启发是非常必要的,毫无疑问,<Oracle核心技术>就是这样一本好书. <Oracl ...

  7. 全站 HTTPS

    1.HTTPS 基础 HTTPS(Secure Hypertext Transfer Protocol)安全超文本传输协议 它是一个安全通信通道,它基于HTTP开发,用于在客户计算机和服务器之间交换信 ...

  8. winform使用xml作为数据源

    1.新建窗体应用程序 2.拖放DataGridView 3.在bin\Debug中放入XML文件 using System; using System.Collections.Generic; usi ...

  9. mklink修改Chrome缓存目录

    管理员命令打开CMDmklink /D "C:\Users\Administrator\AppData\Local\Google\Chrome\User Data" "C ...

  10. SQL字符型字段按数字型字段排序实现方法(转)

    由于是按字母顺序排列,所以123排在了2的前面,显然不符合我们的要求,那么怎样才能按照我们预想的数字顺序排序呢 ORDER BY `meta_value`   那么按得分排序得到的结果可能是:1101 ...