1、addEventListener 
适用w3c标准方法addEventListener绑定事件,如下,事件的执行顺序和绑定顺序一致,执行顺序为method1->method2->method3

 
  1. //element.addEventListener(type,listener,useCapture);
  2. btn1Obj.addEventListener("click",method1,false);
  3. btn1Obj.addEventListener("click",method2,false);
  4. btn1Obj.addEventListener("click",method3,false);

2、attachEvent 
在IE8及以下版本中,不支持addEventListener,只能用attachEvent绑定事件,执行顺序是 method3->method2->method1

 
  1. //object.attachEvent(event,function);
  2. btn1Obj.attachEvent("onclick",method1);
  3. btn1Obj.attachEvent("onclick",method2);
  4. btn1Obj.attachEvent("onclick",method3);

3、属性赋值法绑定事件 
适用该方法会使后绑定的方法覆盖前面的方法,要想一次性绑定多个(一次性执行多个操作,可以再一个事件中调用多个方法)

 
  1. obj.onclick=method1;
  2. obj.onclick=method2;
  3. obj.onclick=method3;

一次性绑定多个:

 
    1. obj.onclick=function (){
    2. method1();
    3. method2();
    4. method3();
    5. }

js 添加事件 attachEvent 和 addEventListener 的区别的更多相关文章

  1. js 添加事件 attachEvent 和 addEventListener 的用法

    一般我们在JS中添加事件,是这样子的 ? 1 obj.onclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? ? 1 2 3 obj.onclick=m ...

  2. js添加事件 attachEvent 和addEventListener的用法

    一般我们在JS中添加事件,是这样子的: obj.onclick = method 这种绑定事件的方式,兼容主流浏览器,但是如果一个元素上添加多次同一个事件呢??? obj.onclick = meth ...

  3. js中添加事件 attachEvent 与 addEventListener

    给元素添加事件时,使用js进行实现时产生了疑惑,有关事件浏览器兼容的问题,在此记录如下. <!DOCTYPE html> <html> <head> <met ...

  4. js添加事件通用方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. js添加事件监听的方式与this

    js添加事件监听与this js添加事件监听的方式与this 在标签中调用自定义函数 DOM0级事件处理程序 DOM2级事件处理程序 this 代表谁? js添加事件监听的方式与this <di ...

  6. IE9 添加事件DOMContentLoaded,方法addEventListener

    IE9 新添加 事件DOMContentLoaded,方法addEventListener

  7. js绑定事件方法:addEventListener与attachEvent的不同浏览器的兼容性写法

    js的事件绑定方法中,ie仅仅支持attachEvent,而FF和Chrome仅仅支持addEventListener,所以就必须为这两个方法做兼容处理,原理是先推断attachEvent仅仅否为真( ...

  8. JS添加事件和解绑事件:addEventListener()与removeEventListener()

    作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...

  9. attachEvent与addEventListener的区别 真实例子

    转自:https://www.cnblogs.com/Rosefxd/p/4921330.html 近日遇到attachEvent与addEventListener两个事件,哟,果断研究一下~~ 先普 ...

随机推荐

  1. H5音频处理的一些小知识

      前  言 LiuDaP 十一过后,小编要做一个关于音乐播放器的项目,要用到大量H5音频处理的内容,于是在十月一日国庆黄金周闲暇之际,自己学习了一下H5音频的相关内容.虽然自学的没有那么深入,但是对 ...

  2. 如何科学地蹭热点:用python爬虫获取热门微博评论并进行情感分析

    前言:本文主要涉及知识点包括新浪微博爬虫.python对数据库的简单读写.简单的列表数据去重.简单的自然语言处理(snowNLP模块.机器学习).适合有一定编程基础,并对python有所了解的盆友阅读 ...

  3. MySQL Base

    /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 ---> input pwd /* 数据库存贮引擎 */    InnoDB :        1) ...

  4. HAProxy安装文档

    HAProxy安装文档 [toc][TOC] 一.环境说明 系统环境:CentOS Linux release 7.2.1511 (Core) 系统内核:3.10.0-327.el7.x86_64 软 ...

  5. GRE 协议简介

    1. 协议简介    gre(generic routing encapsulation,通用路由封装)协议是对某些网络层协议(如ip 和ipx)的数据报进行封装,使这些被封装的数据报能够在另一个网络 ...

  6. 使用VLC创建组播流

    vlc既是一个播放器,又可以成为一个流媒体服务器.最近需要做udp组播播放相关的东西,需要先在本地搭建一个udp组播服务器,因为机器上本来就装有vlc,所以就用它了. 第一步: 点击媒体->流 ...

  7. Rx 入门指引 (一)

    自学 Rx 快有一个周了, 它非常适合处理复杂的异步场景.结合自己所学,决定写系列教程. 我认为, Rx 中强大的地方在于两处 管道思想,通过管道,我们订阅了数据的来源,并在数据源更新时响应 . 强大 ...

  8. 全面解读JavaScript入门到进阶,100%基础知识掌握!

    一.JavaScript 简介 1.JavaScript 是 Web 的编程语言,是前端开发必须掌握的三门语言之一,即: HTML   定义了网页的内容 CSS      描述了网页的布局 JavaS ...

  9. servlet 相应头重定向

    package demoservllet; import java.io.IOException;import javax.servlet.ServletException;import javax. ...

  10. SQL server 数据库备份大

    首先简单的介绍一下Sql server 备份的类型有: 1:完整备份(所有的数据文件和部分的事务日志文件) 2:差异备份(最后一次完成备份后数据库改变的部分) 3:文件和文件组备份(对指定的文件和文件 ...