给元素添加事件时，使用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. gauge.js的应用

    最近项目要做个手机端的仪表盘,但是画风太给力,echarts.highcharts.D3等等都不能满足业务的需求,你懂的!开找,找到个gauge.js 下面简单介绍下这个插件官网http://bern ...

  2. ps 网页配图设计

    网站配图设计 蒙太奇 品科软件---网页页面 1橡皮擦来画两图 容合 大橡皮擦擦出来自然 2图放到一个色块中 用剪贴蒙版 3调色阶 装饰下图片  矩形工具  形状  填充 画彩条 超出本框的怎么去掉多 ...

  3. GPS坐标转换

    由于经常涉及到GPS程序的编写,现在貌似这个GPS是越来越火,越来越多的朋友在编写GPS程序,估计是个人都会遇到这个GPS坐标转换的问题,很惭愧的是,作为一个测量专业出身的学生,我还得时不时的要把这些 ...

  4. Yii中常用路径(转)

    调用YII框架中jquery:Yii::app()->clientScript->registerCoreScript('jquery');    framework/web/js/sou ...

  5. ajax全局函数运用

  6. PHP文件缓存类

    <?php /** * @desc 文件缓存 */ class Cache{ const C_FILE = '/Runtime/'; private $dir = ''; const EXT = ...

  7. hdu 2966 In case of failure k-d树

    题目链接 给n个点, 求出每个点到离它最近的点的距离. 直接建k-d树然后查询就可以  感觉十分神奇... 明白了算法原理但是感觉代码还不是很懂... #include <bits/stdc++ ...

  8. knockout简单实用教程3

    在之前的文章里面介绍了一些KO的基本用法.包括基本的绑定方式,基本的ko的绑定语法包括text绑定,html绑定等等(如有不明请参照上两篇文章),下面呢介绍一下关于ko的其他方面的知识.包括比较特殊绑 ...

  9. SQL Server 查看identity值的几种方法。

    方法 1. ident_incr('Table_name');#  增量    identity(A,B) 中的B值 ident_seed('Table_name'); # 种子    identit ...

  10. C# 弗洛伊德(Floyd)算法

    弗洛伊德(Floyd)算法 主要是用于计算图中所有顶点对之间的最短距离长度的算法,如果是要求某一个特定点到图中所有顶点之间的最短距离可以用;        ;    ;    ;            ...