1.添加时间监听：

Chrom中：
addEventListener的使用方式：

target.addEventListener(type, listener, useCapture);

target：文档节点、document、window 或 XMLHttpRequest。

type：字符串，事件名称，不含"on"，比如"click"、"mouseover"、"keydown"等。

listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。

useCapture ：是否使用捕捉，看了后面的事件流一节后就明白了，一般用 false 。

事件触发时，会将一个 Event 对象传递给事件处理程序，比如： document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中：

target.attachEvent(type, listener);

target：文档节点、document、window 或 XMLHttpRequest。
type：字符串，事件名称，含"on"，比如"onclick"、"onmouseover"、"onkeydown"等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

两者使用的原理：可对执行的优先级不一样，下面实例讲解如下：
a.attachEvent方法，为某一事件附加其它的处理事件。（不支持Chrome系列）

document.getElementById("btn").onclick = method1;

document.getElementById("btn").onclick = method2;

document.getElementById("btn").onclick = method3;//如果这样写,那么将会只有medhot3被执行

如果写成这样：

var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);

btn1Obj.attachEvent("onclick",method1);

btn1Obj.attachEvent("onclick",method2);

btn1Obj.attachEvent("onclick",method3);//执行顺序为method3->method2->method1

b.addEventListener方法用于 Chrome系列
如果是Chrome系列，并不支持该方法，需要用到addEventListener

var btn1Obj = document.getElementById("btn1");

//element.addEventListener(type,listener,useCapture);

btn1Obj.addEventListener("click",method1,false);

btn1Obj.addEventListener("click",method2,false);

btn1Obj.addEventListener("click",method3,false);//执行顺序为method1->method2->method3

所以要兼容Chrome和IE，要写if判断，举例：(要注意的是div必须放到js前面才行，文件编码为utf-8）

<html>

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <div id="name1" style="border:1px solid red;padding:10px 10px 10px 10px;"

        style="border:1px solid red;padding:10px 10px 10px 10px;">

            <div id="name2" style="border:1px solid green;padding:10px 10px 10px 10px;"

            style="border:1px solid green;padding:10px 10px 10px 10px;">

                点击

            </div>

        </div>

        <div id="info">

        </div>

        <script type="text/javascript">

            var name1 = document.getElementById('name1'); //要注意

            var name2 = document.getElementById('name2'); //要注意

            var info = document.getElementById('info');

            if (name1.attachEvent) { //对于attachEvent前面的target我们一定要保证不为空

                name1.attachEvent('onclick',

                function() {

                    info.innerHTML += "红色" + "<br>";

                });

                name2.attachEvent('onclick',

                function() {

                    info.innerHTML += "绿色" + "<br>";

                });

            } else {

                name1.addEventListener('click',

                function() {

                    info.innerHTML += "红色" + "<br>";

                },

                false);

                name2.addEventListener('click',

                function() {

                    info.innerHTML += "绿色" + "<br>";

                },

                false);

            }

        </script>

    </body>

</html>

那为什么会有含"on"和不含"on"的问题？

答案要从W3C的发展时间轴来看, DOM(Document Object Model)的模型可以分为两种, DOM 0 及 DOM 2. 从数字来看就可以知道DOM 0 当然是比较旧的协议, 我们直接来看DOM2 :

DOM 0&DOM1 协定 Event(Event Name)	DOM 2 Event	Description
onblur()	blur	The element has lost focus (that is, it is not selected by the user).
onchange()	change	The element has either changed (such as by typing into a text field) or the element has lost focus.
onclick()	click	The mouse has been clicked on an element.
ondblclick()	dblclick	The mouse has been double-clicked on an element.
onfocus()	focus	The element has gotten focus.
onkeydown()	keydown	A keyboard key has been pressed down (as opposed to released) while the element has focus.
onkeypress()	keypress	A keyboard key has been pressed while the element has focus.
onkeyup()	keyup	A keyboard key has been released while the element has focus.
onload()	load	The element has loaded (document, frameset, or image).
onmousedown()	mousedown	A mouse button has been pressed.
onmousemove()	mousemove	The mouse has been moved.
onmouseout()	mouseout	The mouse has been moved off of or away from an element.
onmouseover()	mouseover	The mouse has moved over an element.
onmouseup()	mouseup	A mouse button has been released.
onreset()		The form element has been reset, such as when a form reset button is pressed.
onresize()		The window's size has been changed.
onselect()		The text of a form element has been selected.
onsubmit()	submit	The form has been submitted.
onunload()	unload	The document or frameset has been unloaded.

addEventListener()这个函数只支持新的DOM2 ：addEventListener(event,function,capture/bubble);

参数event如上表（DOM 2 Event）所示, function是要执行的函数, capture与bubble分别是W3C制定得两种时间模式,简单来说capture就是从document的开始读到最后一行, 再执行事件, 而bubble则是先寻找指定的位置再执行事件.
capture/bubble的参数是布尔值, True表示用capture, False则是bubble.

Windows Internet Explorer对应的EventHandler, 是 attachEvent(), 格式如下:

window.attachEvent("submit",myFunction());

比较特别的是attachEvent不需要指定capture/bubble的参数, 因为在windows IE环境下都是使用Bubble的模式.这里用个例子来表现事件的用法:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <title>

            Rollover

        </title>

        <script type="text/javascript">

            function moveOver(imgObj) {

                if (typeof window.addEventListener != "undefined") {

                    imgObj.addEventListener("mouseover",

                    function() {

                        imgObj.src = imgObj.id + "_over.png";

                    },

                    false);

                    imgObj.addEventListener("mouseout",

                    function() {

                        imgObj.src = imgObj.id + "_default.png";

                    },

                    false);

                } else {

                    imgObj.attachEvent("onmouseover",

                    function() {

                        imgObj.src = imgObj.id + "_over.png";

                    });

                    imgObj.attachEvent("onmouseout",

                    function() {

                        imgObj.src = imgObj.id + "_default.png";

                    });

                }

            }

            function rollover() {

                var images = document.getElementsByTagName("img");

                var roll = new RegExp("rollover");

                var preload = [];

                for (var i = 0; i < images.length; i++) {

                    if (images[i].id.match(roll)) {

                        preload[i] = new Image();

                        preload[i].src = images[i].id + "_over.png";

                        moveOver(images[i]);

                    }

                }

            }

            if (typeof window.addEventListener != "undefined") {

                window.addEventListener("load", rollover, false);

            } else {

                window.attachEvent("onload", rollover)

            }

        </script>

    </head>

    <body>

        <p>

            <img id="rollover_home" name="img_home" src="rollover_home_default.png"

            alt="Home">

        </p>

        <p>

            <img id="rollover_about" name="img_about" src="rollover_about_default.png"

            alt="About">

        </p>

        <p>

            <img id="rollover_blog" name="img_blog" src="rollover_blog_default.png"

            alt="Blog">

        </p>

        <p>

            <img id="logo" name="img_logo" src="logo.png" alt="Braingia Logo">

        </p>

    </body>

</html>

ps：你需要图片素材下载：[No00006A]图片素材.7z

上述的 typeof window.addEventListener != "undefined" 程序代码可以判断使用者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使用attachEvent.

2.移除事件监听：

W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:

W3C格式:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

[No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】的更多相关文章

addEventListener()及attachEvent()区别分析
Javascript 的addEventListener()及attachEvent()区别分析 Mozilla中: addEventListener的使用方式: target.addEventLis ...
JS常用方法（获取Class、获取元素样式、事件监听、cookie、ajax等）
var Util = {}; Util.byClass = function (oClass) {//全局获取 var tags = document.all ? document.all : doc ...
Javascript添加事件的addEventListener()及attachEvent()区别分析，事件委托
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
Javascript 的addEventListener()及attachEvent()区别分析
大家都知道事件的用法就是当某个事件(状况)被触发了之后就会去执行某个Function, 尤其是Javascript, 在当红AJAX的催化下, 了解Javascript的Event用法更加重要, 在这 ...
ie和火狐事件addEventListener()及attachEvent()区别分析
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
js基础——事件绑定（事件监听）
JavaScript事件一共有三种监听方法分别如下: 1.事件监听一夹杂在html标签内 <div id="box" onClick="alert('HELLO W ...
Ext JS 5的声明式事件监听
在前文<在Ext JS 5使用ViewControllers>中,简单的介绍了Ext JS 5的一项重要改进——声明式事件监听.在本文,将深度探讨如何使用声明式事件监听啦简化应用程序的视图 ...
SpringBoot事件监听机制源码分析(上) SpringBoot源码(九)
SpringBoot中文注释项目Github地址: https://github.com/yuanmabiji/spring-boot-2.1.0.RELEASE 本篇接 SpringApplicat ...
springBoot高级:自动配置分析,事件监听,启动流程分析,监控,部署
知识点梳理课堂讲义 02-SpringBoot自动配置-@Conditional使用 Condition是Spring4.0后引入的条件化配置接口,通过实现Condition接口可以完成有条件的加载 ...

随机推荐

Java开发web的几种开发模式
Java Web开发方案有多种可供选择,这里列举一些经典的开发模式进行横向比较,为Java Web的开发模式选择提供参考.除此之外还有好多方案(如Tapestry和Wicket等等)并不了解,这里就不 ...
mysql errno 150
mysql error Number 1005can't creat table'/test/#sql-640_1.frm'(errno:150)三种可能问题外键和被引用外键类型不一样,比如inte ...
C# out ref 重载
今天看极客学院wiki时候看到了out,ref的介绍,之前对这个知识点没有深刻认识,所以就写了个小测试看了下,瞬间明白了. using System; using System.Collections ...
Disruptor-net 3.3.0
Disruptor 介绍 Disruptor 是LMX开源出来的java编写的一个并发消息处理器,在队列中一边生产者放入消息,另外一边消费者并行取出处理,其核心是根据现代CPU硬件缓存特点发明不同于通 ...
Web(Jsp+ Servlet)开发中如何解决中文乱码问题
1.中文乱码的成因编码的字符集和解码的字符集不一致. 2.web开发过程中可能出现的乱码的位置及解决方案 ①request乱码在向服务器传递数据时,所传递的中文有可能出现乱码. post请求(协议 ...
总结常见的ES6新语法特性
前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数 ...
css（一）
CSS CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一 css的四种引入方式 1.行内式 ...
完美全兼容解决文字两端对齐 justify 中文姓名对齐
text-align:justify; 所有浏览器都支持,text-justify之类的却只有IE支持,就不要考虑了. justify我的理解,使元素内部的子元素两端对齐,子元素当然只能是inline ...
事务隔离级别（IsolationLevel）
事务的特性(ACID)1.原子性(Atomicity) 事物是数据库的逻辑工作单位,事务中的诸多操作要么全做要么全不做2.一致性(Consistency) 事务执行结果必须是使数据库从一个一致性状态变 ...
iOS之数据持久化方案
概论所谓的持久化,就是将数据保存到硬盘中,使得在应用程序或机器重启后可以继续访问之前保存的数据.在iOS开发中,有很多数据持久化的方案,接下来我将尝试着介绍一下5种方案: plist文件(属性列表) ...

[No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】

2.移除事件监听：

[No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】的更多相关文章

随机推荐

热门专题