给元素添加事件时，使用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. JDBC插入百万数据，不到5秒！

    java自带的批量操作,就可以很好的支持大量数据的处理.相比c#,简单很多.c#要使用oracle提供的ODP.NET,效率才很高,但是代码却很复杂.总之,在这方面,c#没得比.当然,这里的表是没加索 ...

  2. a:hover span 隐藏/显示 问题

    :hover是我们在CSS设计中最常运用的伪类之一,许多绚丽效果的实现离不开伪类:hover,比如我们常见的纯CSS菜单.相册效果等等. 或许用了这么久的伪类:hover,还有部分朋友还不完全了解ho ...

  3. iOS 使用NJKWebViewProgress做webview进度条

    NJKWebViewProgress地址:https://github.com/ninjinkun/NJKWebViewProgress 导入头文件 #import "NJKWebViewP ...

  4. GoEasy实现web实时推送过程中的自动补发功能

    熟悉GoEasy推送的朋友都知道GoEasy推送实现web实时推送并且能够非常准确稳定地将信息推送到客户端.在后台功能中查看接收信息详情时,可有谁注意到有时候在发送记录里有一个红色的R标志?R又代表的 ...

  5. C++程序设计实践指导1.3求任意整数降序数改写要求实现

    改写要求1:动态生成单链表存储 #include <cstdlib> #include <iostream> using namespace std; struct LinkN ...

  6. 从汇编看c++初始化列表初始化成员变量

    简略来说,编译器会对初始化列表按照成员变量的声明顺序重新一一排序,安插到构造函数中进行初始化操作,而且这些初始化操作在构造函数里面用户自己定义的任何代码之前. 下面是c++源码: class X { ...

  7. Android studio GPU Monitor :GPU Profiling needs to be enabled in the device's developer options

    Android studio GPU Monitor 在真机上不能使用,提示:GPU Profiling needs to be enabled in the device's developer o ...

  8. 安装windows7和ubuntu双系统后引导项设置

    win7系统,U盘安装ubuntu,在选择[安装启动引导器的设备]时,1.如果你选择的是/dev/sda,即整个硬盘,他会将启动引导器使用grub进行系统引导,而不再使用windows loader, ...

  9. Java IO流分析整理 .

    Java中的流,可以从不同的角度进行分类. 按照数据流的方向不同可以分为:输入流和输出流. 按照处理数据单位不同可以分为:字节流和字符流. 按照实现功能不同可以分为:节点流和处理流. 输出流: 输入流 ...

  10. php的多线程使用

    PHP 5.3 以上版本,使用pthreads PHP扩展,可以使PHP真正地支持多线程.多线程在处理重复性的循环任务,能够大大缩短程序执行时间. 在liunx下的安装 准备工作: 1.下载Threa ...