JavaScript学习-事件对象

出自：https://blog.csdn.net/luanpeng825485697/article/details/77010690

事件流

这里写图片描述

<body onclick="handleClick()">
  <div onclick="handleClick()">Click Me</div>
</body>

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标的顺序触发。
触发的顺序是：div、body、html、document、window
捕获型事件：与冒泡事件相反的过程，事件从最不精确的对象开始触发，然后到最精确。
触发的顺序是：window、document、html、body、div

并不是所有的浏览器都支持所有的DOM结构，也不是所有的浏览器或事件都同时支持捕获和冒泡

更详细是事件流内容可以参考js中事件捕获和事件冒泡

阻止事件的传播

在W3c中，使用stopPropagation（）方法，在IE下设置cancelBubble = true；

阻止事件的默认行为，例如click <a>后的跳转~：在W3c中，使用preventDefault（）方法；在IE下设置window.event.returnValue = false;

事件绑定

事件可以在h5代码中直接添加也可以在js代码中添加。

在HTML中：

<div onclick="javascript: alert("Clicked!")"></div> //在h5中绑定同时定义函数
<div onclick="myfun()"></div> //在h5中只绑定函数

在JavaScript中：

var oDiv = document.getElementById("div1");
oDiv.onclick = function(){ //onclick只能用小写
   alert("Clicked!");
}
或者
var elem =document.getElementById(“id”)
elem.onmouseover=handleMouseOver  //handleMouseOver  是函数名
Function handleMouseOve(e){...}

在js中绑定函数包含两个方法。

1、（1）给一个对象绑定一个事件处理函数：obj.onclick=fn;　　　　会覆盖前面绑定的函数，属于赋值形式。

var input1=document.getElementById("input1");
    input1.onclick = function(event){   //事件也是元素对象的方法属性，可以直接设置和调用input1.onclick()
};

2、给一个对象的同一个事件绑定多个不同的函数。不覆盖已有事件。

ie:obj.attachEvent(事件名称，事件函数)
例： document.attachEvent(“onclick”,fn1);

没有捕获
事件名称有on
事件函数执行的顺序：标准ie——正序非标准ie——倒序
this指向window

标准：obj.addEventListener(事件名称，事件函数，是否捕获)
例：document.addEventListener(“click”,fn2) //默认是false false:冒泡 true：捕获

call()函数下的一个方法，call方法的第一个参数可以改变函数执行过程中的内部this的执行
调用函数：fn1()=fn1.call();

事件取消

（1）第一种事件绑定取消方法：document.onclick=null;

（2）第二种事件绑定取消方法：

ie:obj.detachEvent(事件名称，事件函数)；

标准：obj.removeEventListener(事件名称，事件函数，是否捕获);

事件类型

UI事件：

load加载完成事件 unload卸载完成事件，abort取消事件，error错误事件，resize大小变化事件，select文本框选择事件，scroll元素滚动条滚动事件

焦点事件：

blur失去焦点，
focus获得焦点(不冒泡)，
focusin获得焦点(冒泡)，
focusout失去焦点。

（执行顺序：原元素失去焦点focusout，新元素获取焦点focusin，原元素失去焦点blur，新元素获得焦点focus）

鼠标事件：

click点击事件、
dblclivk双击事件，
mousedown按下鼠标事件，
mouseenter鼠标进入事件(不冒泡，进入子元素不触发)，
mouseleave鼠标离开事件(不冒泡，进入子元素不触发)，
mousemove鼠标元素内移动事件，
mouseout鼠标离开事件，
mouseover鼠标经过事件，
mouseup鼠标弹起事件。

双击的执行顺序：按下、弹起、点击、按下、弹起、点击、双击

鼠标事件信息：

event.button鼠标按钮信息，
event.clientX表示点击点在视口的位置，
event.pageX表示在页面中的位置(视口+滚轮)，
event.screenX表示屏幕位置，
event.shiftKey表示修改键shift是否按下(shift、ctrl、alt、meta键(windows键或cmd键))。
event.relatedTarget相关元素，在鼠标跨元素移动时的关联元素

滚轮事件：

mousewheel冒泡到window对象，
event.wheelDelta存储滚动量

键盘与文本事件：

keydown按任意键事件，长按重复触发，
keypress按字符键事件(影响文本的键，删除键触发)，长按重复触发，
keyup释放键事件。
textInput文本输入事件(实际字符键，删除键不触发)，显示之前触发。

触发顺序：keydown、keypress、textInput、keyup

键盘事件信息：
event.keyCode键盘码，
event.charCode字符ASCII码，有些浏览器还支持key、keyIdentifier、char属性

文本事件信息：
event.data用户输入的字符，
event.inputMethod文本输入方式(键盘，粘贴，拖放，语音…)

DOM结构变化事件：

DOMNodeRemoved事件，在removeChild和replaceChild删除节点前触发，会冒泡，event.target为被删除的节点，event.relatedNode为目标节点的父节点，
DOMNodeInserted事件，在appendChild、replaceChild、insertBefore插入节点后触发，会冒泡，event.target为被插入的节点，event.relatedNode为目标节点的父节点，

DOMNodeRemoved删除节点前触发，
DOMNodeInserted在一个节点作为子节点插入到另一个节点时触发。
DOMAttrModified元素属性被修改后触发，
DOMNodeInsertedIntoDocument节点直接或间接被插入文档后触发(不冒泡)。
DOMNodeRemovedFromDocument节点直接或间接被删除前触发(不冒泡)。
DOMSubtreeModified结构改变均触发，最后执行

删除插入节点执行顺序：
目标节点执行DOMNodeRemoved(冒泡)，
目标节点执行DOMNodeRemovedFromDocument(不冒泡)，
目标节点在所有子节点执行DOMNodeRemovedFromDocument(不冒泡)，
目标节点父节点执行DOMSubtreeModified(不冒泡)

h5事件：

contextmenu右键菜单事件(取消默认，获取位置，显示自定义菜单，左键单击隐藏菜单事件)。

window事件

beforeunload页面卸载前事件，
DOMContentLoaded事件DOM树形成后触发，
load事件资源文件全部下载完成后触发
hashchange事件，网址#后的所有字符串发生变化触发。触发后用location查询当前参数列表

剪切板事件

移动设备事件：

orientationchange屏幕旋转事件，
MozOrientation(deviceorientation)方向旋转事件，
devicemotion移动事件

移动端触摸事件

ontouchstart、ontouchmove、ontouchend、ontouchcancel。

1、Touch事件简介

pc上的web页面鼠标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel事件，分别对应了触屏开始、拖拽及完成触屏事件和取消。
当按下手指时，触发ontouchstart；
当移动手指时，触发ontouchmove；
当移走手指时，触发ontouchend。
当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

2、Touch事件与Mouse事件的出发关系

在触屏操作后，手指提起的一刹那（即发生ontouchend后），系统会判断接收到事件的element的内容是否被改变，如果内容被改变，接下来的事件都不会触发，如果没有改变，会按照mousedown，mouseup，click的顺序触发事件。特别需要提到的是，只有再触发一个触屏事件时，才会触发上一个事件的mouseout事件。

手势事件

没有总结

Event对象

定义：当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一直指定地方——event对象，供我们在需要的时候调用

事件函数：事件调用的函数，一个函数是不是事件函数，不在定义的时候决定，而是取决于这个函数调用的时候

ie/chrome:event是内置全局对象

标准下:事件对象是通过事件函数的第一个参数传入

如果一个函数是被事件调用的，那么这个函数定义的第一个参数就是事件对象

event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等；

event对象只在事件发生的过程中才有效。
firefox里的event跟IE里的不同，IE里的是全局变量，随时可用；firefox里的要用参数引导才能用，是运行时的临时变量。
在IE/Opera中是window.event，在Firefox中是event；而事件的对象，在IE中是 window.event.srcElement，在Firefox中是event.target，Opera中两者都可用。

下面两句效果相同

var evt = (evt) ? evt : ((window.event) ? window.event : null);
var evt = evt || window.event; // firefox下window.event为null, IE下event为null

IE中事件的冒泡
IE中事件可以沿着包容层次一点点起泡到上层，也就是说，下层的DOM节点定义的事件处理函数，到了上层的节点如果还有和下层相同事件类型的事件处理函数，那么上层的事件处理函数也会执行。例如， div 标签包含了 a ，如果这两个标签都有onclick事件的处理函数，那么执行的情况就是先执行标签 a 的onclick事件处理函数，再执行 div 的事件处理函数。如果希望的事件处理函数执行完毕之后，不希望执行上层的 div 的onclick的事件处理函数了，那么就把cancelBubble设置为true即可。

event对象的属性和方法

0、target：事件指向的元素

1. type：事件的类型，如onlick中的click；

2. srcElement/target：事件源，就是发生事件的元素；

3. button：声明被按下的鼠标键，整数，1代表左键，2代表右键，4代表中键，如果按下多个键，酒把这些值加起来，所以3就代表左右键同时按下；（firefox中 0代表左键，1代表中间键，2代表右键）

4. clientX/clientY：事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置；(在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是 0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上
document.body.scrollLeft和 document.body.scrollTop)

5. offsetX,offsetY/layerX,layerY：事件发生的时候，鼠标相对于源元素左上角的位置；

6. x,y/pageX,pageY：检索相对于父要素鼠标水平坐标的整数；

7. altKey,ctrlKey,shiftKey等：返回一个布尔值；

8. keyCode：返回keydown何keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符；(firefox2不支持 event.keycode，可以用 event.which替代 )

9. fromElement,toElement：前者是指代mouseover事件中鼠标移动过的文档元素，后者指代mouseout事件中鼠标移动到的文档元素；

10. cancelBubble：一个布尔属性，把它设置为true的时候，将停止事件进一步起泡到包容层次的元素；(e.cancelBubble = true; 相当于 e.stopPropagation();)

11. returnValue：一个布尔属性，设置为false的时候可以组织浏览器执行默认的事件动作；(e.returnValue = false; 相当于 e.preventDefault();)

12. attachEvent(),detachEvent()/addEventListener(),removeEventListener：为制定 DOM对象事件类型注册多个事件处理函数的方法，它们有两个参数，第一个是事件类型，第二个是事件处理函数。在
attachEvent()事件执行的时候，this关键字指向的是window对象，而不是发生事件的那个元素；

13. screenX、screenY：鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要；

14. bubbles是否冒泡

15. currentTarget事件执行元素

16. stopPropagation()阻止事件传播

17. preventDefault()取消事件默认行为

18. eventPhase表示事件的阶段，捕获阶段为1，目标对象上为2，冒泡阶段为3

Window 事件属性

针对 window 对象触发的事件（应用到<body>标签）：

onafterprint    文档打印之后运行的脚本。
onbeforeprint 文档打印之前运行的脚本。
onbeforeunload 文档卸载之前运行的脚本。
onerror 在错误发生时运行的脚本。
onhaschange 当文档已改变时运行的脚本。
onload 页面结束加载之后触发。
onmessage 在消息被触发时运行的脚本。
可以使用调用 postMessage ()向主线程发送消息,在某些场景下，业务调用方可能需要主动跟定位组件通信,可以通过html5 postMessage的方式主动与定位组件发起通信
onoffline 当文档离线时运行的脚本。
ononline 当文档上线时运行的脚本。
onpagehide 当窗口隐藏时运行的脚本。
onpageshow 当窗口成为可见时运行的脚本。
onpopstate 当窗口历史记录改变时运行的脚本。
onredo 当文档执行撤销（redo）时运行的脚本。
onresize 当浏览器窗口被调整大小时触发。
onstorage 在 Web Storage 区域更新后运行的脚本。
onundo 在文档执行 undo 时运行的脚本。
onunload 一旦页面已下载时触发（或者浏览器窗口已被关闭）。

Form 事件

由 HTML 表单内的动作触发的事件（应用到几乎所有HTML元素，但最常用在form元素中）：

onblur 元素失去焦点时运行的脚本。 
onchange在元素值被改变时运行的脚本。 
oncontextmenu 当上下文菜单被触发时运行的脚本。 
onfocus 当元素失去焦点时运行的脚本。 
onformchange 在表单改变时运行的脚本。 
onforminput 当表单获得用户输入时运行的脚本。 
oninput 当元素获得用户输入时运行的脚本。 
oninvalid 当元素无效时运行的脚本。 
onreset 当表单中的重置按钮被点击时触发。HTML5中不支持。 
onselect 在元素中文本被选中后触发。 
onsubmit 在提交表单时触发。

提醒：

1、为节省内存，优化性能，对子元素含有较多冒泡事件的节点上，可以设置总事件，总事件中eventTarget获取目标子元素执行相应函数，进而取消子元素的事件节省内存。

2、innerHTML删除子元素前要取消子元素绑定事件，节省内存