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. Java 基础语法

    一.关键字 定义:被 Java 赋予特殊含义的单词. 特点:基本上都是英文小写. 用于定义数据类型的关键字 基本数据类型 整数型(默认为 int) byte(8 位,1 字节,默认值是 0,最大存储数 ...

  2. poj3468(一维)(区间查询,区间修改)

    A Simple Problem with Integers You have N integers, A1, A2, ... , AN. You need to deal with two kind ...

  3. ORACLE 本地冷迁移

    需求:把oracle数据库的数据文件,redo文件,控制文件迁移到本地的其它目录. 1.测试环境: 操作系统redhat 6.3,数据库oracle 11.2.0.1.0 [root@dbtest1 ...

  4. php使用PHPMailer邮件类发送邮件

    PHPMailer是一个用于发送电子邮件的PHP函数包.它提供的功能包括:*.在发送邮时指定多个收件人,抄送地址,暗送地址和回复地址*.支持多种邮件编码包括:8bit,base64,binary和qu ...

  5. C语言判断电脑的大、小端机

    #include int main() { int x = 0x1234; if (char(x) == 0x34)  {   printf("小端机!\n");  }  else ...

  6. 利用jdbc简单封装一个小框架(类似DBUtils)

    利用jdbc写的一个类似DBUtils的框架 package com.jdbc.orm.dbutils; import java.io.IOException; import java.io.Inpu ...

  7. HttpHelper类使用方法

    HttpHelper http = new HttpHelper(); HttpItem item = new HttpItem() { URL = "http://www.sufeinet ...

  8. 干货|人人都是翻译项目的Master

    在平时的工作中,我们都会经常查阅一些英文文档来解决平时遇到的问题和拓宽视野.看到好的文章或者书籍有没有想要和小伙伴分享的冲动,那么我们一起来翻译吧- 翻译主张 "信 达 雅" .& ...

  9. pm2部署多个nodejs项目配置教程

    实际项目部署中,我们服务器在启动的时候需要自动启动node服务.以前是通过liunx自带的命令启动.但是随着后台微服务越来越多.每次发布新程序.修改脚本太麻烦了.于是换成PM2来做. 1.首先安装pm ...

  10. win10 uwp 列表模板选择器

    本文主要讲ListView等列表可以根据内容不同,使用不同模板的列表模板选择器,DataTemplateSelector. 如果在 UWP 需要定义某些列的显示和其他列不同,或者某些行的显示和其他行不 ...