内容概要：

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. Python time strptime()与time strftime()

    time strftime()接收时间元组,返回表示时间的字符串. time strptime()把时间字符串,解析成一个时间元组. import time t = time.strftime('%Y ...

  2. 论文笔记——MobileNets(Efficient Convolutional Neural Networks for Mobile Vision Applications)

    论文地址:MobileNets: Efficient Convolutional Neural Networks for Mobile Vision Applications MobileNet由Go ...

  3. php跨域

    <?php header('Content-type:text/html; charset="utf-8"'); $url = 'http://10.32.41.194:80 ...

  4. Unity3D学习笔记（十八）：动画内容补充

    动画系统: 旧动画系统(帧动画系统:关键帧驱动,关键帧记录的数据进行插值移动) 1.添加Animation,添加到父物体上 2.添加动画片段 3.添加关键帧(子物体的坐标是相对于父物体的坐标),帧之间 ...

  5. c语言 快速排序

    #include<stdio.h> #include<stdlib.h> #define BUF_SIZE 10 void display(int array[], int m ...

  6. java23种设计模式之一: 策略模式

    由于最近在研究学习设计模式,我会用自己的理解方式来表述对设计模式的学习和认识,通过最常用.好记的案例来记住和使用设计模式,希望对设计代码方面有所提高和改进. 一.应用背景     在软件开发中常常遇到 ...

  7. Thunder团队Final版爱阅app发布视频

    视频链接:https://www.bilibili.com/video/av17008792/ 视频简介:首先出现的是我们团队的logo,接着是Final版爱阅app的功能展示,紧接着是我们团队的开发 ...

  8. C#中使用Log4记录日志

    具体步骤如下: 从网上下载log4net对应.net版本的dll 在C#项目中引用该dll 创建log4net对应的配置文件 在程序中使用 log4net的配置文件如下: <?xml versi ...

  9. m_Orchestrate learning system---三十四、使用重定义了$的插件的时候最容易出现的问题是什么

    m_Orchestrate learning system---三十四.使用重定义了$的插件的时候最容易出现的问题是什么 一.总结 一句话总结:如下面这段代码,定义了$的值,还是会习惯性的把$当成jQ ...

  10. m_Orchestrate learning system---三十三、公共变量多弄成全局变量

    m_Orchestrate learning system---三十三.公共变量多弄成全局变量 一.总结 一句话总结:比如班级id,小组id,这样省事,而且减少数据库的访问,加快访问速度,而且节约代码 ...