javascript原生事件总结

　　javascript原生的事件，总结了一下，包括事件流、处理函数、事件对象这几样东西。而在兼容性方面，主要是老牌ie8以及以下和现代浏览器的差异，也就是ie和DOM事件标准的差异。

事件流
这个事件流ie4和Netscape4提出来的，但是两个公司提出的事件流确实刚好相反的。ie的是事件冒泡，Netscape的是事件捕获。
ie会从触发事件的元素一直往上冒泡直到document元素。如图ie8以下包括ie8的

Netscape则是从document元素开始往下传播一直到触发事件的元素。如图

而DOM标准则建议，将事件流分成三个过程：
首先捕获阶段：像Netscape那样往下捕获，但是捕获阶段目标元素不会接收到事件。
然后是目标阶段：就是触发目标元素的事件。
最后是冒泡阶段：就是想ie那样子的冒泡。
如图：

但是ie9+，以及别的浏览器所实现的DOM事件流却和标准有点不同。主要是事件流的最顶端延长到window。并且，在捕获阶段目标元素也会接受到一次事件。如图：

也就是说，目标元素的事件会两次触发。

事件处理程序
有三种方式给元素绑定事件处理函数。
a、HTML属性
<a onclick="alert('click')"></a>
这样使用在函数里面直接可以调用event，this指向当前元素。但是这种方式一般不适用。

b、js中元素属性
这种方式的兼容性好，所有浏览器都支持。但是有一个兼容性问题。那就是ie8-的事件对象是作为window的属性而不是作为参数传进去的。所以要像下面这样写。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <a href="##" id="a" style="display:block;width:100px;height:100px;background-color: #ccc;"></a>

    <script>

        document.getElementById('a').onclick = function(event){

            event = event || window.event;

            alert(event);

        }

    </script>

</body>

</html>

c、DOM2事件绑定
主要指的是元素的addEventListener（）和removeEventListener（）。前者绑定，后者删除。
这两个函数都有三个参数，
第一个是事件类型，有click，focus，blur等
第二个是事件处理函数。
第三个是个布尔值，true代表在捕获阶段调用处理函数，false代表在冒泡阶段调用处理函数。
要绑定事件：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <a href="##" id="a" style="display:block;width:100px;height:100px;background-color: #ccc;"></a>

    <script>

        document.getElementById('a').addEventListener('click',function(event){

            alert(event);

        },false)

    </script>

</body>

</html>

假如想解除绑定，有人可能会这样：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <a href="##" id="a" style="display:block;width:100px;height:100px;background-color: #ccc;"></a>

    <script>

        document.getElementById('a').addEventListener('click',function(event){

            alert(event);

        },false)

        document.getElementById('a').removeEventListener('click',function(event){

            alert(event);

        },false)

    </script>

</body>

</html>

但是这样是不会成功的。因为函数是一个对象，两个匿名函数是不同的对象，不相等。所以匿名函数是没办法解绑的。只能想下面这个，个函数一个名号。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <a href="##" id="a" style="display:block;width:100px;height:100px;background-color: #ccc;"></a>

    <script>

        var handler = function(event){

            alert(event);

        }

        document.getElementById('a').addEventListener('click',handler,false)

        document.getElementById('a').removeEventListener('click',handler,false)

    </script>

</body>

</html>

ie8-的浏览器不支持DOM2级事件，但是有类似的方法attachEvent（）和detachEvent（）；用法上是一样的，只是因为ie8-只有冒泡过程所以就没有第三个参数。还有第一个参数要加个‘on’，比如click事件是‘onclick'。另外，函数内this指向window。

事件对象

在js中所有的事件对象都继承自Event。在chrome（左）和firefox（右）中Event对象的样子。　　　　

　　　　可以看到在浏览器中Event对象还是有点区别的。但是下面的属性和方法是公用的。

bubbles	是否冒泡
cancelable	是否可以取消默认行为
currentTarget	目前元素
target	目标元素
defaultPrevented	是否已被阻止默认行为
type	事件类型
eventPhase	事件流哪个阶段1捕获 2目标 3冒泡
detail	一些信息
trusted	js创建的为false，浏览器创建为true
view	等同于window
preventDefault()	阻止默认行为
stopPropagation()	阻止冒泡和捕获
stopImmediatePropagation()	立即阻止冒泡和捕获

　　　　在ie8—中事件对象，是这个样子：

cancelBubble	是否取消冒泡，为true先顶一下stopPropagation（）
returnValue	返回值，为false相当于preventDefault（）
srcElement	目标元素，相当于target
type	事件类型

UI事件
load：页面加载完、img图像加载完、所有框架加载完、嵌入内容加载完在object元素触发。在ie9+浏览器中，<script>元素也会触发该事件。
注意：页面加载完表示，所有的外部css，js，图像等都下载完。
　　img元素，一旦加了src属性就开始下载。
　　script元素一定要插入文档才开始下载。
这个事件的事件对象不会包含什么信息，除了在兼容dom的浏览器中有target信息。
　　在ie8之前没有加进文档的图像不会生成event对象。
unload：文档被完全卸载后触发。
resize：浏览器窗口被调整大小时。
注意：ie8前event不提供任何属性。
　　兼容DOM的浏览器会提供target=document。
　　Firefox老版本会在停止改变之后才触发，现在所有浏览器都是每变一个像素都会触发一次。
scroll：在window对象发生，表示的是文档被滚动。可以通过body元素的scrollLeft和scrollTop来监控。
注意：经过测试现在chrome，safari支持body上的这两个属性，ie11，firefox支持documentElement上的这两个属性。所以要这样写scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

焦点事件
focus,focusin 会在得到焦点的元素上触发，focus不冒泡，focusin冒泡。
blur，focusout在失去焦点的元素上触发，blur不冒泡，focuout冒泡。

鼠标和滚轮事件
click：可以通过鼠标或键盘触发，冒泡。
dblclick:通过双击鼠标主按钮触发（有些浏览器中键和右键也可以）。冒泡。
　　触发dbclick的过程：mousedown--mouseup--click--mousedown--mouseup--click--dblclick
　　但是ie8及以前的浏览器中有bug：mousedown--mouseup--click--mouseup--dblclick
mousedown/mouseup:按下任意的鼠标键/释放。冒泡。
　　注意：当在一个元素按下会触发这个元素的mousedown，如果不释放移动到另一个元素在释放，就会触发后一个元素的mouseup。

mouseenter：从元素外部进入元素内部触发。不冒泡。进入后代元素不触发。ie、Firefox9+、Opera支持。
mouseleave：从元素内部移出元素是触发。不冒泡。进入后代元素不触发。ie、Firefox9+、Opera支持。

mouseover：进入元素内部时触发。冒泡。
mouseout：移出元素时触发。冒泡。移进后代元素也触发。

mousemove：在元素内部移动的时候。冒泡。

在这些事件中，event事件对象会有一些新增的属性。
在DOM标准中。

clientX、clientY
which	1、左　　2、右　　3、中
detail	单击次数
ctrlKey
altKey
metaKey
shiftKey
pageX、pageY
screenX、screenY

在ie8以及以前的浏览器

clientX、clientY
button	0：没按下，1：主鼠标，2：次鼠标，3：同时按下主次按钮，4：中间按钮，5：主和中间按钮，6：按下次和右鼠标，7：三个都按下
offsetX、offsetY
ctrlKey
altKey
metaKey
shiftKey
fromElement	mouseover
toElement	mouseout

jquery中对统一用which来代替button和which。

if ( !event.which && button !== undefined ) {

                event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) );

            }

用位与运算，把button的1、3、5、7修正为1；2,6修正为2；

键盘与文本事件
keydown：按下键盘任意键触发，按着不放会重复触发。
keyup：释放键盘按键是触发。
　　上面的事件都有一个keyCode，表示按下键的键码。数字字母是ASCII中的数字和小写字母的编码。charCode为0.
在Firefox和Opera中，按下分号keyCode为ASCII的59；ie，Safari和chreome中为键码186.
keypress：按下字符键是触发。ie9+的浏览器，charCode等于ASCII码。此时的keyCode不确定，不同浏览器可能是0，键码或ASCII码。
在ie8和Opera中，keyCode等于ASCII码。所以跨浏览器：
　　
1. ```
charCode = event.charCode || event.keyCode
```
这三个事件的顺序是keydown--keypress--keyup。前两个事件在文本框变化之前。
变动事件
DOMSubtreeModified：在DOM结构发生任何变化时候触发，在其他变动事件之后触发。冒泡。目标是插入或者删除的元素的父元素。
DOMNodeInserted:在一个节点插入另一个节点时触发。冒泡，目标是被插入的节点，event.relatedNode是父元素，触发时已经插入文档。
DOMNodeInsertedIntoDocument：在DOMNodeInserted之后触发。在DOMNodeInserted之后触发。不冒泡，目标是删除的节点或后代节点，从删除的节点到后代元素的顺序。

DOMNodeRemoved：在一个节点移除是触发。冒泡。事件目标是被触发的节点，event.relatedNode是父元素，触发时未被从文档中删除。
DOMNodeRemovedFromDocument：在DOMNodeRemoved之后触发。不冒泡，目标是删除的节点或后代节点，从删除的节点到后代元素的顺序。

DOMAttrModified：特性被修改之后触发。
DOMCharacterDataModified：文本节点的值变化的时候触发。

这些事件要通过DOM2的绑定方法才能绑定成功。ie9+，O9+,FF3+,S3+,C支持。

javascript原生事件总结的更多相关文章

jQuery 事件绑定和 JavaScript 原生事件绑定
总结一下:jQuery 事件绑定和 JavaScript 原生事件绑定及区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...
JavaScript 原生事件
1.原生事件的绑定:https://www.cnblogs.com/shsxt/p/7903216.html a.DOM0级事件: 1. 行内事件 2. 元素.on事件名=函数 b.DOM2级事件:a ...
javascript 原生事件综合查询
click() 对象.click() 使对象被点击. closed 对象.closed 对象窗口是否已关闭true/false clearTimeout(对象) 清除已设置的setTimeout对象 ...
JAVASCRIPT事件详解-------原生事件基础....
javaScirpt事件详解-原生事件基础(一) 事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...
React—Native开发之原生模块向JavaScript发送事件
首先,由RN中文网关于原生模块(Android)的介绍可以看到,RN前端与原生模块之间通信,主要有三种方法: (1)使用回调函数Callback,它提供了一个函数来把返回值传回给JavaScript ...
jQuery? 回归JavaScript原生API
如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且 ...
据说每个大牛、小牛都应该有自己的库——JavaScript原生对象拓展
在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏,一是,关于写个自己的库的想法由来 ...
javascript通用事件封装
随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...
JavaScript 阻止事件冒泡的实现方法
JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...

随机推荐

第七篇：几个经典的TCP通信函数
前言在TCP通信中要使用到几个非常经典的函数,本文将对这几个函数进行一个简短的使用说明. socket()函数函数作用:创建一个网际字节流套接字包含头文件:sys/socket.h ( 后面几个 ...
新唐M0 M4系统初始化
系统初始化包含了时钟(clock)初始化和多功能引脚(Multi Function Pin 简称MFP寄存器)配置.void SYS_Init(void) { /* 解锁保护寄存器 */ SYS_Un ...
如何使用vue的axios结合PHP去上传文件
我们在做表单提交的时候,往往会碰到一些表单提交的需求,那vue的axios与上传文件碰撞后不会出现什么不一样的火花吗,听我一一道来: 首先,我们需要对写一个vue的axios的表单提交,由于本人用的是 ...
poj_3580 伸展树
自己伸展树做的第一个题 poj 3580 supermemo. 题目大意对一个数组进行维护,包含如下几个操作: ADD x, y, d 在 A[x]--A[y] 中的每个数都增加d REVERSE ...
web基础----->servlet中得到请求的数据
对tomcat的源码做一些分析,今天我们就开始servlet中的请求分析. form表单中的默认类型一.在index.jsp中get请求: <form action="Paramet ...
MQTT-SN协议乱翻之小结篇
前言这里简单做一些小结和对比,针对前面的协议翻译部分,一阶段的学习完结. MQTT-SN VS MQTT MQTT-SN基于MQTT原有语义,但做了很多的调整.比如: 一个CONNECT消息被拆分为 ...
outline的兼容性及使用限制
outline 和 border的区别: outline不占据文档空间,border占据文档空间. outline无法单独设置上下左右,只要设置outline,必须所有的边都设置:border可以设置 ...
生命游戏/Game of Life的Java实现
首先简单介绍一下<生命游戏> 生命游戏其实是一个零玩家游戏.它包括一个二维矩形世界,这个世界中的每个方格居住着一个活着的或死了的细胞.一个细胞在下一个时刻生死取决于相邻八个方格中活着的或死 ...
【BZOJ2595】[Wc2008]游览计划斯坦纳树
[BZOJ2595][Wc2008]游览计划 Description Input 第一行有两个整数,N和 M,描述方块的数目. 接下来 N行, 每行有 M 个非负整数, 如果该整数为 0, 则该方块为 ...
【BZOJ4149】[AMPPZ2014]Global Warming 单调栈+RMQ+二分
[BZOJ4149][AMPPZ2014]Global Warming Description 给定一个序列a[1],a[2],...,a[n].请从中选出一段连续子序列,使得该区间最小值唯一.最大值 ...

javascript原生事件总结

javascript原生事件总结的更多相关文章

随机推荐

热门专题