给元素添加事件时，使用js进行实现时产生了疑惑，有关事件浏览器兼容的问题，在此记录如下。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>IFE JavaScript Task 01</title>

 </head>

 <body>

 <label>请输入北京今天空气质量：<input id="aqi-input" type="text"></label>

 <button id="button">确认填写</button>

 <div>您输入的值是：<span id="aqi-display">尚无录入</span></div>

 <script type="text/javascript">

     (function() {

         /*

          在注释下方写下代码

          给按钮button绑定一个点击事件

          在事件处理函数中

          获取aqi-input输入的值，并显示在aqi-display中

          */

         var zhiliang = document.getElementById("aqi-input");

         var button1 = document.getElementById("button");

         var display = document.getElementById("aqi-display");

        addEvent(button1,"click",function(){

            display.childNodes[0].nodeValue=zhiliang.value;

        })

     })();

      function addEvent(elme,type,func){

          if(elme.addEventListener){

              elme.addEventListener(type,func);

          }

          else if(elme.attachEvent){

              elme.attachEvent("on"+type,func)

          }

          else{

              elem["on"+type] = func;

          }

      }

 </script>

 </body>

 </html>

实际处理相关

实例如上。

其实并没有体现为什么要用attachEvent或是addEventListener。

因为我们常用的 obj.onclick = method这样的方式也可达到效果，但是为什么要提出这个呢，因为点击按钮可能要触发多个方法，而此时，method不可以实现，如果去写三个method，结果也只会执最后一个定义的方法。

其实就是看哪个浏览器兼容哪个了，还有参数不一样，大体上是这两个区别，还有其处理程序的作用域不尽相同。

下面介绍 addEventListener( )  事件类型 不加on  ； 触发事件（函数）   ；布尔值，指定事件是否在捕获或冒泡阶段执行；这个没太懂。

兼容性：  firefox、chrome、IE、safari、opera；不兼容IE7、IE8

addEventLinstener添加的事件处理程序是在其依附的元素的作用域中运行。

所以还是这个是值得使用的，另一个就是为了兼容而做的准备。  但是也要注意兼容性，最好还是像代码中所写。

attachEvent   on+事件类型  ； 触发事件；

兼容性： 兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera

attachEvent的事件处理程序会在全局作用域中运行。

如上，js原生触发事件总结~

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 的区别

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

  4. DOM 以及JS中的事件

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  5. 从零开始的JS生活（二）——BOM、DOM与JS中的事件

    上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...

  6. JS中的事件以及DOM 操作

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  7. JS中的事件&对象

    一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...

  8. JS学习五(js中的事件)

    [JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/ ...

  9. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

随机推荐

  1. 百度搜索附近加盟店等基于LBS云搜索功能的实现

    一.注册百度账号,进入开发者平台 创建应用并获取ak 地址如下 http://lbsyun.baidu.com/apiconsole/key/update?app-id=7546025 ok获取到了. ...

  2. .Net类型与JSON的映射关系

    首先谢谢大家的支持和关注.本章主要介绍.Net类型与JSON是如何映射的.我们知道JSON中类型基本上有三种:值类型,数组和对象.而.Net中的类型比较多.到底它们是如何映射的呢? 总体来讲,Json ...

  3. Json.Net介绍及实例

    本系列教程假设读者已经对Json有一定的了解,关于Json在这里不多说.本系列教程希望能对读者开发涉及到Json的.Net项目有一定的帮助.本系列教程是根据官方文档资料和自己项目应用汇总而成.如果觉得 ...

  4. Core Bluetooth 概述 【官方文档翻译】

    Core Bluetooth 框架在Mac和iOS平台,为配备了低功耗蓝牙无线技术的设备提供了进行通信所需要的类.例如,您的应用程序可以发现,探索,和低功耗的外围设备进行交互,如心率监视器.数字温控器 ...

  5. G - Reduced ID Numbers（第二季水）

    Description T. Chur teaches various groups of students at university U. Every U-student has a unique ...

  6. mysql+php+pdo批量添加大数据

    1.使用insert into插入 ini_set('max_execution_time','0');//限制超时时间,因为第一种时间较长,索性设为0不限制 $pdo = new PDO(" ...

  7. mybatis常用jdbcType数据类型

    MyBatis 通过包含的jdbcType类型 BIT         FLOAT      CHAR           TIMESTAMP       OTHER       UNDEFINED ...

  8. FTP配置参数

    格式 vsftpd.conf 的格式非常简单,每行要么是一个注释,要么是一个指令.注释行以#开始并被忽略掉.指令行格式如下: 配置项=参数值 很重要的一点是,这个格式里不存在任何空格. 默认的,每一个 ...

  9. Window10安装TestLink，以及登录mysql数据库的错误处理

    步骤一: 需要安装apache和mysql,但是我们这里仅仅是使用testlink,不关注其他,所以使用Vertrigoserv进行傻瓜式安装,安装完后,下载testlink解压,将解压后的文件放入D ...

  10. Oracle EBS-SQL (INV-7):检查接收中记录数.sql

    select      msi.segment1           物料编码,       msi.description          物料描述,      sum(rs.quantity)  ...