内容概要：

event对象，事件在多个浏览器中的兼容，事件的传播机制，JS自定义事件，jQuery的自定义事件的绑定与触发

Event对象

Event对象属于HTML DOM对象。Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

标准Event属性

标准Event方法

想要了解更多Envent对象信息，请访问：

http://www.w3school.com.cn/jsref/dom_obj_event.asp

事件在多个浏览器中的兼容：

IE是把event事件对象作为全局对象window的一个属性；可以使用event或window.event来访问；FireFox和Chrome等主流浏览器是通过把【事件对象】作为【事件响应函数】的【参数】进入传入的。当然我们还需要注意Event对象在不同浏览器中的属性和方法会所有不同，需要我们具体使用时注意做兼容。

//兼容性的写法示例：

domElement.onclick = function(e) {

e = e || window.event; //或（||）书写顺序有讲究，不能随意换

}

事件一般可以分为：鼠标事件，键盘时间，接口事件，以及自定义事件

事件的传播机制：

两种模型

以前，Netscape和Microsoft是不同的实现方式。

Netscape中，div先触发，这就叫做事件捕获。

Microsoft中，p先触发，这就叫做事件冒泡。

两种事件处理顺序刚好相反。IE只支持事件冒泡，Mozilla, Opera 7 和 Konqueror两种都支持，旧版本的Opera's 和 iCab两种都不支持 。

事件捕获

当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。

事件冒泡

当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

W3C模型

W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。

ele.addEventListener('click',doSomething2,true)

true=捕获

false=冒泡

传统绑定事件方式

在一个支持W3C DOM的浏览器中，像这样一般的绑定事件方式，是采用的事件冒泡方式。

ele.onclick = doSomething2

IE浏览器

如上面所说，IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。

ele.attachEvent("onclick", doSomething2);

附：事件冒泡（的过程）：事件从发生的目标（event.srcElement||event.target）开始，沿着文档逐层向上冒泡，到document为止。

事件的传播是可以阻止的：

• 在W3c中，使用stopPropagation（）方法

• 在IE下设置cancelBubble = true；

在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~

3.阻止事件的默认行为，例如click <a>后的跳转~

• 在W3c中，使用preventDefault（）方法；

• 在IE下设置window.event.returnValue = false;

不是所有的事件都能冒泡，例如：blur、focus、load、unload

JS自定义事件

谷歌、火狐自定义JavaScript事件

　   1、创建事件；

document.createEvent('HTMLEvents');

　　参数是字符串类型，表示要创建的事件类型。

uievents；

mutationevents；

htmlevents；

　　2、初始化事件；

ev.initEvent('listen', false, false);

　　参数说明：

eventType：事件名称；

canBubble：事件是否冒泡；

cancelable：是否可以用 preventDefault() 方法取消事件；

　　3、监听事件；

document.addEventListener(dataavailable, handler, param3);

　　参数说明：

dataavailable：监听的事件名称；

handler：处理函数；

param3：是否是扑获事件模型；

　　4、触发事件；

document.dispatchEvent(ev);

　　参数说明：

　　ev:第一步所创建的事件对象；

5、移除事件；

移除监听removeEventListener及ev.stopPropagation()

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>javascript自定义事件</title>

<script type="text/javascript">

　　//创建事件

　　var ev = document.createEvent('HTMLEvents');

　　window.onload = function () {

　　　　//初始化事件

　　　　ev.initEvent('listen', false, false);

　　　　//监听事件与绑定处理函数

　　　　document.addEventListener("listen", function (e) {

　　　　　　alert("事件被触发!");

　　　　}, false);

　　}

</script>

</head>

<body>

　　<div>

　　　　<input type="button" value="触发" onclick="document.dispatchEvent(ev);" />

<input type="button" value="移除" onclick='document.removeEventListener("listen", myFun1, false);' />

　　</div>

</body>

</html>

IE自定义JavaScript事件

注意，以上方式只适用于谷歌，如果希望IE也能够兼容，要并上兼容IE的方式。

　　其中谷歌与IE的对应关系为：

谷歌、火狐

IE

createEvent、initEvent

createEventObject

addEventListener

attachEvent

dispatchEvent

fireEvent

　IE自定义事件示例：

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>javascript自定义事件</title>

<script type="text/javascript">

　　//创建事件

　　var ev = document.createEventObject();

　　window.onload = function () {

　　　　document.attachEvent('ondataavailable',function () {

　　　　　　alert("IE事件触发!"); //IE

　　　　}

　　　　);

　　}

</script>

</head>

<body>

　　<div>

　　　　<input type="button" value="触发" onclick="document.fireEvent('ondataavailable', ev);" />

　　</div>

</body>

</html>

jQuery的自定义事件的绑定与触发

jQuery绑定与触发自定义事件更加方便，而且兼容性更好。

<!DOCTYPE html>

<html>

<head>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).on("listen",function(event,a,b){

alert(a + " " + b);

});

//第一个是自定义的事件名

//第二个参数是一个数组

//数组中的项会和自定义事件中回调的参数项对应

$(function(){

$('#btn1').click(function(){

$(document).trigger("listen",["aa","bb"])

});

})

</script>

</head>

<body>

<input type="button" id="btn1"  value="触发"  />

</body>

</html>

JavaScript事件漫谈的更多相关文章

  1. Javascript事件模型系列（四）我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  2. JavaScript事件代理和委托（Delegation）

    JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...

  3. JavaScript事件概览

    JavaScript事件 JavaScript是单线程,在同一个时间点,不可能同时运行两个"控制线程". 事件句柄和事件对象 1.注册事件句柄 标准和非标准 var button= ...

  4. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  5. JavaScript 事件

    事件 概念:事件是可以被 JavaScript 侦测到的行为. JavaScript 使我们有能力创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触 ...

  6. JavaScript事件详解-jQuery的事件实现（三）

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  7. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  8. 总结JavaScript事件机制

    JavaScript事件模型 在各种浏览器中存在三种事件模型: 原始事件模型 , DOM2事件模型 , IE事件模型. 其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE ...

  9. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

随机推荐

  1. Ajax 随笔

    例子:实现AJAX效果(投票例子) 后端代码 前端代码 原理是使用HTTP状态码204的特性(请求成功,但是不会返回内容,所以浏览器不会进行跳转) 例子:实现AJAX效果(投票例子2) 前端代码 原理 ...

  2. Ubuntu更新软件源出现GPG error

    原因 在sources.list文件中加入了非ubuntu官方源,所以认为加入源是不可信任的. 解决方法导入该源公钥.E084DAB9为PUBKEY后八位 gpg --keyserver keyser ...

  3. C语言专题－基本数据类和占位符

    C语言中常用的几种基本数据类型有 基本数据类型的长度 unsigned unsigned unsigned unsigned float没有unsigned double没有unsigned 占位符的 ...

  4. 怎么运行cocos2dx 3.x simulator？

    1.simulator的好处是: 快速切换分辨率:F5快速重新启动项目: 这对于脚本语言来说都是很方便快捷的. 2.涉及到显示参数的文件有两个: ①lang,这个是菜单的语言文件,如果没有这个文件的话 ...

  5. ubuntu , 笔记本合上盖子时不关机的方法。

    实测ubuntu 14.04 好使 1) 编辑 /etc/systemd/logind.conf 2) 找到 HandleLidSwitch 设置,去掉行头注释#,然后改成下面这样 HandleLid ...

  6. Illumina Sequence Identifiers 序列标识符 index详解

    大家基本都知道什么是 FASTA 和 FastQ 格式了,但这是不够的. 我们还需要了解世界上最大的测序公司自己定制的 FastQ 格式,因为你可能会经常用到,有时还会亲自去处理它们. 本文主题:Il ...

  7. linux 不解压日志压缩包直接搜索里面的内容

  8. CentOS7 install apache

    1. yum install httpd 2. config /etc/httpd/conf/httpd.conf <VirtualHost *:80>  ServerName www.l ...

  9. python-day52--前端html、css

    一.html需掌握的: 1. img标签 属性:src alt title width height 2. a标签 属性:href target 3. ul 标签及li 标签,二者都是块级标签 ul ...

  10. POJ-3744 Scout YYF I （矩阵优化概率DP）

    题目大意:有n颗地雷分布在一条直线上,有个人的起始位置在1,他每次前进1步的概率为p,前进两步的概率为1-p,问他不碰到地雷的概率. 题目分析:定义状态dp(i)表示到了dp(i)的概率,则状态转移方 ...