JavaScript中的事件
事件
1. 事件与事件流
1事件介绍
JavaScript和HTML之间的交互是通过当用户或者浏览器操作网页时发生的事件来处理的，页面 装载时，是一个事件，用户点击页面上的某个按钮时，也是一个事件
2事件流介绍
浏览器发展到第四代时(IE4及Netscape4),IE的事件 流是事件冒泡流，而N etscape的事件流是事件捕获流。
3事件冒泡
IE的事件流叫做事件冒泡(event bubbling),冒泡事件（event bubbling）：从点击的元素开始，一层一层向外寻找
4事件捕获
Netscape Communicator团队提出的另一种事件流叫做事件捕获(event captruing)。捕获事件（event captruing）：从最外层开始，一层一层向内捕获，捕获到点击的元素
5 DOM事件流
DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在 document对象结束。换句话说，起点和终点都是document对象（很多浏览器可以一直捕获/冒泡到window对象）
DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段
事件捕获阶段：实际目标＜div＞在捕获阶段不会接收事件。也就是说在捕获阶段，事件 从document到＜html＞再到<body＞就停止了。
处于目标阶段：事件在＜div＞上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。冒泡阶段：事件又传播回文档
2事件监听器
事件监听器，又被称之为事件处理程序。简单来说，就是和事件绑定在一起的函数。当事件发生 时就会执行函数中相应的代码。
1 HTML事件监听器
HTML事件监听器，又被称之为行内事件监听器,这种方法已经过时
2 DOM 0级事件监听器
先取到要绑定的事件的元素节点对象，然后给这些节点对象事件处理属性赋值一个函数
3 DOM 2级事件监听器
addEventListener()可以给一个元素添加多个事件处理程序，它接收三个三参数：事件名，事件处理函数，布尔值。如果布尔值是true，那么就是捕获阶段处理事件，false则是冒泡阶段处理事件，默认为false
4 删除事件监听器
DOM 0级删除：只需要将节点对象事件处理属性值赋值为null即可
DOM 2级事件删除：使用removeEventListr（）删除事件
3事件类型
1 鼠标事件
click 单击触发
dblclick 双击出发
mousedown 按下鼠标任意按钮触发
.mouseenter 进入触发 进入到内部子元素不会再触发
mouseleave 从里面出来触发 进入内部子元素不会触发
mousemove 在元素内移动触发
mouseout 出来触发 进入子元素也触发
mouseover 进入触发 进入子元素也触发 进入移出子元素相当于二次触发
mouseup 在元素内松开鼠标按键触发,外部点击内部松开也会触发
2 键盘事件
keydown：按键盘任意键触发，按住不放重复触发
keypress：按键不包括shift和alt，苹果笔记本上不会重复触发
keyup:用户松开键盘上的按键触发
keyCo：键盘上的键对应的数字，我们要判定的的就是这个数字
3 页面事件
页面加载：页面完全加载后触发的事件，先触发，再显示页面内容
页面卸载：页面在关闭和卸载或者刷新离开的时候会触发弹窗
页面滚动：页面滚动条滚动的时候，对应的scroll滚动事件会触发
窗口设置大小：浏览器窗口被调整到一个新的高度或者宽度时，就会触发resize事件
4事件对象
事件对象是以事件处理函数中的参数形式出现的，该对象并不需要我们自己创建，直接使 用即可
语法结构如下：
事件源.addEventListene r(eventName, function (event){
// event就是事件对象
}, boolean)
事件对象说明：
・当事件发生时，只能在事件函数内部访问的对象
・处理函数结束后会自动销毁
想要实现Event事件对象的兼容，我们可以在事件的处理函数中添加以下代码：
btn.onclick = function(event){
event = event || window.event;
1通用的事件对象属性
1.事件类型
事件对象的type属性会返回当前所触发的事件类型是什么
2.事件目标
target属性返回对触发事件的元素节点对象的一个引用
this 值:当我们触发一个事件的时候，事件处理程序里
面的this指代的是绑定事件的元素，而事件对象的target属性指代的是触发事件的元 素，target和srcElememnt是等价的
2鼠标事件的事件对象
button：他有三个值=>0为鼠标左键，1为鼠标滚动，2为鼠标右键
事件坐标
event.clientX：返回当前页面鼠标点击位置的横坐标
event.clientY:返回当前页面鼠标点击位置的纵坐标
event.pageX：返回整个内容左边到点击位置的横坐标
event.pageY：返回整个内容顶部到点击位置的纵坐标
event.screenX：返回鼠标点击时相对于电脑屏幕左边横坐标
event.screenY：返回鼠标点击时相对于电脑屏幕顶部纵坐标
event.offsetX：鼠标指针相对于这个元素内容本身横坐标
event.offsetY：鼠标指针相对于这个元素内容本身纵坐标
3键盘事件对象
keyCode：返回的是键盘上每一个键对应的返回的值
key：它的值是一个字符串，它会返回用户输入的键，而不是对应的数字值
4阻止冒泡
stopPropagetion（）：可以阻止冒泡
5阻止默认行为
cancelable：只返回一个不二之，表示时间是否可以取消，它只读属性，返回ture表示可以取消
preventDefault（）：DOM最标准的取消浏览器默认行为的方法，无返回值（IE8以前不支持）
returnValue：将它的默认值设为false就可以取消时间的默认行为
return false:取消默认事件还可以使用return false
在DOM 0级处理事件中取消默认行为returnValue ̵ preventDefault() 和 return false 都有效
DOM2级取消默认行为return false 无效
在IE取消默认行为，使用preventDefault（）无效
6事件流(扩展)
件对象的eventPhase属性可以返回一个整数值，表示事件目前所处的事件流阶段。0表示事 件没有发生，1表示当前事件流处于捕获阶段，2表示处于目标阶段，3表示冒泡阶段。
5剪贴板事件
剪贴板操作包括 剪切(cut)、复制(copy)和粘贴(paste)这三个操作，快捷键分别是ctrl+x、ctrl+c、ctrl+v。 当然也可以使用鼠标右键菜单进行操作。
关于这3个操作对应下列剪贴板事件：
•copy :在发生复制操作时触发
•cut :在发生剪切操作时触发
•paste：在发生粘贴操作时触发
•beforecopy :在发生复制操作前触发
•beforecut :在发生剪切操作前触发
•beforepaste：在发生粘贴操作前触发
对象方法
剪贴板中的数据存储在clipboa rdData对象中。对于IE浏览器来说，这个对象是window对象的 属性。对于其他浏览器来说，这个对象是事件对象的属性。可以向下面这样书写，来兼容两种不 同的浏览器：
e = e || event;
let clipboardData = e.clipboardData || window.clipboardData;
对象有三个方法：getData()、setData()和clea rData()。
getData()方法用于从剪贴板中取得数据，它接受一个参数，即要取得的数据的格式。在IE 中，有两种数据格式："text"和"URL"。在其他浏览器中，这个参数是一种MIME类型；不过，可 以用"text"代表
setData()方法的第一个参数也是数据类型，第二个参数是要放在剪贴板中的文本。对于第一 个参数的规则与getData()相同。
clea rData()方法用于从剪贴板中删除数据，它接受一个参数，即要取得的数据的格式。在IE 中，有两种数据格式："text"和"URL"。在其他浏览器中，这个参数是一种MIME类型；不过，可 以用"text"表示
实际应用
1.屏蔽剪贴板
<body>
<input value="text">
vbutton > 屏蔽剪贴板 v/button>
<script> test.onclick = function () {
document.oncopy = document.oncut = document.onpaste = function (
e) {
e = e || event;
ale rt('该文档不允许复制剪贴操作，谢谢配合')
return false;
}
}
</script>
</body>
2.过滤字符
如果确保粘贴到文本框中的文本中包含某些字符，或者符合某种形式时，可以使用剪贴板事件。 比如只允许粘贴数字。
<body>
<input > <script>
test.onpaste = function (e) { e = e || event;
var clipboardData = e.clipboardData || window.clipboardData; if (!/^\d+$/.test(clipboardData.getData('text'))) { return false;
}
}
</script>
</body>
6事件委托
将事件监听器绑定到父元素<ul>上，这样即可对所有的<li>元素添加事件,对点击的节点进行一个小小的判断，从而保 证用户只在点击<li>的时候才触发事件
7事件模拟
通过代码来模 拟事件触发的方式我们称之为事件的模拟。
1.click()方法
使用click()方法，我们可以模拟用户的点击行为
2事件模拟机制
事件模拟包括3个部分：创建事件、初始化以及触发事件。某些情况下，初始化与创建事件一起 进行。最终，通过dispatchEvent()方法来触发事件。
3自定义事件
自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。
最简单的自定义事件的方式就是使用Event()构造函数
如果需要在触发事件的同时，传入指定的数据，需要使用CustomEvent构造函数生成自定义的事 件对象。
除了前面的Event（）构造函数来创建自定义事件以外，我们还可以调
用cr eateEventC'CustomEvent"）来创建新的自定义事件。返回的对象有一个名 为initCustomEvent（）的方法，接收如下4个参数：
•type（字符串）：触发的事件类型，例如"keydown"
•bubbles（布尔值）：表示事件是否应该冒泡
•cancelable （布尔值）：表示事件是否可以取消
•detail（对象）：任意值，保存在event对象的detail属性中