内容概要：

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. guulp配置编译ES6

    下面是gulp的配置文件,gulp具体使用点击查看 首先全局安装下 cnpm install gulp -g gulpfile.js  gulp配置文件 var gulp = require(&quo ...

  2. [JVM] - 继10进制的java.lang.Object查看之后

    cmd清除命令:cls 之后查阅了其它博客,发现这位大神同样也在做JVM,并且我很希望用它的10进制转16进制类来测试一下该解析的10进制是否对应着Object的16进制呢? 这位大神的10进制转16 ...

  3. hadoop项目实战--ETL--（三）实现mysql表到HIVE表的全量导入与增量导入

    一 在HIVE中创建ETL数据库 ->create database etl; 二 在工程目录下新建MysqlToHive.py 和conf文件夹 在conf文件夹下新建如下文件,最后的工程目录 ...

  4. 关于iBatis配置xml文件时出现中文注释出错的一个问题（很坑爹.）

    才开始我没有使用SqlMap.properties来配置连接信息.所以直接用ctrl + shift + C然后往里面添加的中文注释 例: <!-- 注释--> 运行的时候报: Error ...

  5. python 字符串输出转义{}

    >>> print ("{} 对应的位置是 {{0}}".format("runoob")) runoob 对应的位置是 {}

  6. Django部署生产环境，静态文件不能访问404，以及图片不能访问403

    部署环境的搭建请看此博客https://blog.csdn.net/anifans9350/article/details/80145535 查看nginx.conf 文件, nginx文件(etc/ ...

  7. 20170814xlVBA部分代号收盘价转置

    原始数据: 转置效果: Sub TransformData() Dim Rng As Range Dim Arr As Variant Dim Dic As Object Dim dCode As O ...

  8. codeforces 993c//Careful Maneuvering// Codeforces Round #488 by NEAR (Div. 1)

    题意:x轴-100和+100的有敌人飞船,纵坐标由输入数据给出,我方有2飞船在x轴0,y坐标待定.0时刻时敌人同时向我方2飞船发出光线,光线会穿透飞船打到敌人自己,问2飞船放在哪敌人损失最大? 假如- ...

  9. 把Java Web工程转换为基于Maven的Web工程

    有一个之前的工程,在使用了基于Maven的Web开发后,发现这种方式很便利,于是就想把之前老的传统的J2EE Web Project转为Maven Web Project. 转换的思路如下: 1.新建 ...

  10. 看起来很懵的java内存加载面试题

    源代码如下,求结果 public class MemoryAnalyse { public static int k = 0; public static MemoryAnalyse t1 = new ...