第一种

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. 【Leetcode】二叉树层遍历算法

    需求: 以层遍历一棵二叉树,二叉树的结点结构如下 struct tree_node{ struct tree_node *lc; struct tree_node *rc; int data; }; ...

  2. Web scraping with Python (part II) « Jean, aka Sig(gg)

    Web scraping with Python (part II) « Jean, aka Sig(gg) Web scraping with Python (part II)

  3. #include <boost/regex.hpp>

    boost C++的正则表达式库boost.regex可以应用正则表达式于C++.正则表达式大大减轻了搜索特定模式字符串的负担,在很多语言中都是强大的功能. boost.regex库中两个最重要的类是 ...

  4. 微软已于10月底停止销售预装Windows 7/8.1的电脑

    如果你想买新电脑,但是对Windows 10不感冒,你最好抓紧时间,因为这个月底是Windows7和Windows8.1的最后销售期限.10月31号是你能买到预装这两款操作系统的新电脑的最后一天,微软 ...

  5. 浏览器桌面通知(notifications)

    近期在做公司后台管理系统,当有任务到来时,须要通知当事人,可是 当事人有可能在做别的,浏览器有可能会被最小化,这样就非常难看到通知了.经过查找发现有些浏览器能够使用noitfications.能够在桌 ...

  6. GDAL1.11版本号对SHP文件索引加速測试

    GDAL库中对于矢量数据的读取中能够设置一些过滤器来对矢量图形进行筛选.对于Shapefile格式来说.假设数据量太大,设置这个过滤器时间慢的简直无法忍受.好在GDAL1.10版本号開始支持读取Sha ...

  7. 固定表格行列(expression)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  8. C# 整个网页保存成图片

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  9. C#操作项目配置文件

    前言 对于项目配置文件的读取和修改,.net 提供了ConfigurationManager(位于System.Configuration命名空间) 和WebConfigurationManager( ...

  10. jQuery基础---Ajax基础教程(二)

    jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...