给元素添加事件时，使用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. 【Java基础】几种简单的调用关系与方法

    直接上代码吧. class lesson4AB //同一个类下的public修饰的方法A,B可以相互调用 { public void A() { B();//等价于this.B(); } public ...

  2. 完美实现同时分享图片和文字（Intent.ACTION_SEND）

    private void share(String content, Uri uri){ Intent shareIntent = new Intent(Intent.ACTION_SEND); if ...

  3. sql相关操作

    1.两个不同数据库对应字段相应操作 //操作模版:insert into data2.table2(字段1,字段2,字段) select 字段j,字段k,字段m from data1.table1举例 ...

  4. Oracle11g客户端安装及plsql配置

    1,项目使用的是oracle11g数据库,安装个客户端访问服务器. 到oracle官方下载: http://www.oracle.com/technology/global/cn/software/t ...

  5. javascript EcmaScript5 新增对象之Object.freeze

    我们都知道在js里对象是很容易改变的 var obj1 ={ a:'111' } obj1.a = '222'; console.log( obj.a ) //output 222 对象的属性发生了变 ...

  6. crontab指令详解

    引用:http://www.cnblogs.com/xiaoluo501395377/archive/2013/04/06/3002602.html 具体指令请参考文章:linux指令. 详细版推荐原 ...

  7. cocos2d.js

    1.节点是Cocos2d最基础的东西 2.坐标与普通数学坐标一致 3.children属性表示节点的孩子,父节点位置变化,它包含的子节点也会跟着变化,以整体的形势移动 4.层(layer), 新建层: ...

  8. 诺基亚 Lumia 1020的价格

       大部分的中国人心中,都有一个诺基亚情节.经典的1110,耐摔程度强得惊人,相信很多人都知道它的厉害.    虽说这些年诺基亚由于没有跟上Android这一波智能机的浪潮,在智能机时代被三星苹果等 ...

  9. 深入研究 Win32 结构化异常处理（作者博客有许多SEH的研究文章）

    摘要 就像人们常说的那样,Win32 结构化异常处理(SEH)是一个操作系统提供的服务.你能找到的所有关于 SEH 的文档讲的都是针对某个特定编译器的.建立在操作系统层之上的封装库.我将从 SEH 的 ...

  10. GetModuleHandle，AfxGetInstanceHandle使用区别

    当一个文件被映射到调用进程的地址空间时,GetModuleHandle函数得到其中某一模块的句柄. 使用GetModuleHandle函数格式:HMODULE GetModuleHandle( LPC ...