javascript事件概述

事件基本概念

事件类型:用来说明发生什么类型事件的字符串,即事件名。
  事件目标:发生事件的对象。当谈论事件时,会同时指明类型和目标。
  事件处理程序:处理或响应事件的函数,即事件监听程序。
  事件对象:与特定事件相关并且包含有关该事件详细信息的对象。事件对象作为参数传递给事件处理程序(IE8之前的浏览器通过Event获取事件对象)。
  事件传播:事件发生时,事件会由window发出,不断经过下一级节点直到目标节点,到达目标节点后,事件会按原路线返回window,事件从目标节点返回window的过程就是事件传播,又称冒泡阶段。在事件传播阶段可以通过事件对象阻止事件传播。
  事件捕获: 事件发生时,事件会由window发出,不断经过下一级节点直到目标节点,这一过程就是事件捕获,又称捕获阶段。在事件捕获阶段可以通过事件对象阻止事件捕获。IE8之前的浏览器不支持事件捕获。

常见事件类型

1.Window事件
  发生在浏览器窗口上的事件,部分事件的事件类型会与文档中的某些事件类型同名,包括文档以及外部资源完全加载时触发的load事件;浏览器窗口文档跳转到新文档时触发unload事件,该事件触发时不影响文档跳转;在文档跳转之前如果需要征得用户同意,可以使用beforeunload事件;浏览器窗口加载文档过程中出错时触发error事件;浏览器窗口尺寸改变时触发resize事件,滚动条滚动时触发scroll事件;浏览器窗口获取焦点或者失去焦点时,分别触发focus事件,blur事件;
  2.DOM事件
  主要有表单事件,鼠标事件,键盘事件,文本事件,文档加载事件。
  表单事件包括提交表单时触发submit事件;重置表单时触发reset事件;表单元素内容修改时触发change事件;得到焦点,失去焦点时触发focus事件,blur事件;表单元素的点击时触发click事件等;
  鼠标事件包括点击鼠标时触发click事件;移动鼠标时触发mousemove事件;按下,释放鼠标按键时触发mousedown事件,mouseup事件;点击右键时触发contextmenu事件,可以用来修改上下文菜单;连续点击两次鼠标按键时触发dblclick事件;鼠标滑到元素上,离开元素时触发mouseover事件,mouseup事件,IE中对应mouseenter事件,mouseleave事件;
  键盘事件包括按下,释放按键时触发的keydown事件,keyup事件;keydown事件与keyup事件之前会触发keypress事件;
  文本事件,使用webkit内核的浏览器支持textInput事件,该事件在产生可打印字符时触发;
  3.HTML5事件
  主要是指HTML5标准化的事件以及新增的事件。

事件传播

一个事件发生时,是事件先从文档根节点流向事件目标,然后在事件目标上触发事件,然后再回溯到文档根节点,即事件传播有三个阶段,从文档根节点流向事件目标是捕获阶段,到达事件目标是目标阶段,然后从事件目标到文档根节点是冒泡阶段(IE8之前的浏览器不支持捕获阶段,所以其事件传播,只有冒泡阶段)。完整流程如下图。

事件流.png

这里有一个Demo形象的模拟了事件传播过程。

事件代理

浏览器都支持冒泡阶段,我们可以利用浏览器的冒泡机制,通过监听父级节点来实现监听子节点的功能,这就是事件代理的概念。
  使用事件代理的好处:
    1.减少事件绑定次数,提高页面性能;
    2.可以监听动态变化的DOM结构,前提是父级节点不是动态变化的,子节点可以动态变化。
  原理是在父级节点绑定相应事件处理程序,当对应事件在子节点触发时通过冒泡阶段把事件传递到父节点,在父节点触发事件处理程序,再根据事件对象的target属性可以获取到是哪个事件目标,然后就可以根据不同的事件目标,来实现不同的业务逻辑。

事件监听(绑定,注册)

主要有以下方式来注册事件处理程序:
  1.通过设置事件目标的事件属性,这些事件属性主要是由“on+事件名”组成。
  例如:
    document.getElementByTagName("a").onclick = function(){console.log("This is a click event");};
通过这种方式注册事件处理程序,同一个事件目标一次只能注册一个事件处理程序。
  2.通过设置标签属性注册事件处理程序。
  例如:
    <a onclick="console.log('This is a click event')"></a>
通过这种方式只需要把函数体赋值给事件属性即可,同样的这种方式一次也只能注册一个事件处理程序。
  3.支持标准事件模型的浏览器(IE8以及IE8之前的浏览器除外)中,事件目标对象中都有一个addEventListener()方法,可以使用这个方法给事件目标注册事件处理程序。使用这个方法一次可以给事件目标注册多个不同的事件处理程序,使用不同的事件处理程序参数多次调用即可,触发时根据注册顺序先后执行事件处理程序。相同的事件处理程序参数多次调用这个方法注册,也只能注册一次。
  这个方法的完整定义:

element.addEventListener(event, function, useCapture)
event  必传参数      指定事件名
function    必传参数      事件处理程序
userCapture   可选参数      默认为false,指定事件处理程序在冒泡阶段执行;ture,指定事件处理程序在捕获阶段执行

4.不支持标准事件模型的浏览器(IE8以及IE8之前的浏览器)中,事件目标可以使用attachEvent()方法来注册事件处理程序。相同的事件处理程序使用这个方法可以被注册多次。
  这个方法的完整定义:

element.attachEvent(event, function, useCapture)                   
event  必传参数      指定 "on"+事件名
function    必传参数      事件处理程序

由于IE8以及IE8之前浏览器不支持事件捕获,所以这个方法只有两个参数。

注意:IE9,IE10即支持addEventListener()方法又支持attachEvent()方法来注册事件处理程序,但是IE8,IE7,IE6,IE5浏览器只支持attachEvent()方法注册事件处理程序。

事件调用顺序

1.通过方式1,2注册的事件处理程序优先执行。
  2.通过方式3注册的事件处理程序按照注册顺序执行。
  3.通过方式4注册的事件处理程序执行顺序不定,(测试发现IE9,IE10按照注册顺序正序执行,IE8按照注册顺序倒序执行)。

事件解绑,注销

通过方式1,2注册的事件无法解绑。
  通过方式3注册的事件处理程序可以通过 removeEventListener()方法解绑, removeEventListener()方法有三个参数,第一个参数与addEventListener()方法一样,需要传事件名;第二个参数需要传 用addEventListener()方法注册的事件处理程序函数名,即想要解绑addEventListener()方法注册的事件处理程序,那么在注册时必须用事先声明好的函数,不能用匿名函数注册;第三个参数与addEventListener()方法的第三个参数一样。
  通过方式4注册的事件处理程序可以通过detachEvent()方法解绑,detachEvent()方法参数与attachEvent()方法参数一样,使用时和 removeEventListener()方法类似。

事件取消

1.取消发生该事件时浏览器的默认操作
    通过方式1,2注册的事件处理程序,可以直接返回false来告诉浏览器不要执行事件相关的默认操作。
    通过方式3注册的事件处理程序,可以直接调用事件对象的preventDefault()方法来告诉浏览器不要执行事件相关的默认操作。
    通过方式4注册的事件处理程序,可以通过设置事件对象的returnValue属性为false来告诉浏览器不要执行事件相关的默认操作。
  2.取消事件传播
    通过方式1,2注册的事件处理程序,不能取消事件传播
    通过方式3注册的事件处理程序,可以直接调用事件对象的stopPropagation()方法来阻止事件传播。
    通过方式4注册的事件处理程序,可以直接设置事件对象的cancelBubble属性为true来阻止事件传播。

自定义事件

对于支持标准事件模型的浏览器可以通过以下方式实现自定义事件
初始化事件类型
var event = new Event('myEvent');
或者

var event = document.createEvent('Event');
event.initEvent('myEvent',true,true);

绑定事件
element.addEventListener('myEvent',function(){});
解绑事件
element.removeEventListener('myEvent',funcName);
触发事件
element.dispatchEvent(event);
  针对支持标准事件模型的浏览器处理事件时大体流程相似,主要的区别有两点,自定义事件需要初始化事件类型,以及使用dispatchEvent方法触发事件

IE浏览器注册自定义事件可以通过IE浏览器的私有的事件属性propertychange实现,具体参考漫谈js自定义事件、DOM/伪DOM自定义事件

如果引用了jquery,使用自定义事件就比较简单了
绑定事件
element.on("myEvent",function(){});
解绑事件
element.off("myEvent");
触发事件
element.trigger("myEvent");

自定义事件与内置事件的区别关注点不一样,自定义事件关注的是执行事件的标签,触发时机由程序控制;而内置事件关注的是触发事件的标签,触发时机由浏览器控制。自定义事件详细可以参考 Introducing custom events

资料来源

1.js权威指南
2.http://blog.jobbole.com/52430/
3.http://www.admin10000.com/document/6089.html
4.http://learn.jquery.com/events/introduction-to-custom-events/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 148,637评论 1 318
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 63,443评论 1 266
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 99,164评论 0 218
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,075评论 0 188
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,080评论 1 266
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,365评论 1 184
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,901评论 2 283
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,649评论 0 176
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,122评论 0 223
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,734评论 2 225
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,093评论 1 236
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,548评论 2 222
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,028评论 3 216
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,765评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,291评论 0 178
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,162评论 2 239
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,293评论 2 242

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,036评论 18 139
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,221评论 3 11
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,710评论 0 8
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,159评论 0 5
  • 节后总是会产生惰性,工作不在状态,参加的活动也不在状态,错漏百出。 自己想象中的效果与实际遇到的效果好想差了十万八...
    諪諪_0c2f阅读 176评论 0 0