给元素添加事件时，使用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. Linux下重要日志文件及查看方式

    http://os.51cto.com/art/201108/282184_all.htm   1.Linux下重要日志文件介绍 /var/log/boot.log 该文件记录了系统在引导过程中发生的 ...

  2. PHP学习笔记十二【数组排序】

    <?php $arr=array(0,5,-1); $temp=0; for($i=0;$i<count($arr)-1;$i++) { for($j=0;$j<count($arr ...

  3. 在windows中使用VMWare安装Mac OS 10.7

    请参考http://www.cnblogs.com/huwlnew/archive/2011/11/15/2250342.html http://unmi.cc/vmware9-install-mac ...

  4. Android系统五大布局详解Layout

    我们知道Android系统应用程序一般是由多个Activity组成,而这些Activity以视图的形式展现在我们面前, 视图都是由一个一个的组件构成的.组件就是我们常见的Button.TextEdit ...

  5. HDU 5729 - Rigid Frameworks

    题意:    对于一个由n*m个1*1的菱形组成可任意扭曲的矩形(姑且这么说),求添加斜线*(两种)让菱形变成正方形,使得整个矩形固定且无法扭曲的方案数. 分析:    n*m的矩形有如下性质:( 平 ...

  6. Velocity中避免null引起的数据问题

    请先看下面一段代码: #foreach($id in [1..50]) #set($user = $User.Get($id)) $id : ${user.name} #end 上面这段代码中,假设只 ...

  7. 移动网页版Meta 标签

    viewport 大部分移动浏览器都接受,比如 Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox 最基本的例子,在 ...

  8. shonc项目中的设计资讯模块 php 字符串操作与正则表达式 strip_tags preg_match

    问题:当description 内容要求description的值选用资讯内容的前50个汉字.资讯内容可能有图片. 此时需要对输出的内容进行处理 php 正则表达式处理,编辑器输出的内容 只取图片: ...

  9. Canvas的补充

    一.Canvas.save()作用:让后续的操作就好像在一个新图层上. 二.Canvas.restore():让之前save()产生的图层全部合并. 三.Canvas.translate():将原点( ...

  10. hdu 4906 3-idiots fft

    题目链接 n个火柴棍取3个, 问能组成三角形的概率是多少. kuangbin大神的博客写的很详细了..http://www.cnblogs.com/kuangbin/archive/2013/07/2 ...