事件：用户在网页中的行为跟代码逻辑交互
三要素：
事件源：用户跟代码交互使用的标签
时间类型：行为的类型
事件处理程序：函数代码
事件语法：事件源.on类型 = function(){}
事件类型
鼠标类
click单击
dblclick双击
contextmenu右击
mousedowna按下鼠标任意键都可以触发
mouseover / mouseenter鼠标移入
mouseout / mouseleave鼠标移出
mousemove鼠标移动
mousewheel滚轮滚动
键盘类型
keydown键盘按住不松开——只要不松开就一直触发
keyup松开时触发一次
keypress键盘按住不松开——只要不松开就一直触发
表单类型
focus获取焦点
blur失去焦点
change下拉框选项改变，单选框被选中，复选框选中状态发生改变，文本框内容改变且失去焦点
单选框和复选框都可以通过checked判断是否被选中
submit点击提交按钮时触发
input文本框内容发生改变就会触发
事件流
事件流： 事件从开始触发到执行结束的过程
事件流分为三个阶段
1.捕获阶段：找目标元素的过程。
2.目标阶段：找到目标元素，执行他的事件
3.冒泡阶段：从小到大离开目标元素的过程 默认非目标元素的事件是冒泡阶段执行的
另一种事件绑定方式-用一个函数绑定
语法：标签.addEventListener(不要on的事件类型，要执行函数，当前事件在别人的事件流中是否在捕获阶段执行）
同类型的事件可以绑定多次
事件的解绑
什么是解绑？
事件绑定：标签+时间类型+事件处理函数
删除这个事件就是解绑
为什么要解绑？
1.内存浪费，事件执行一次后就不需要时，他不会自动取消，一直占用内存
2.在某些场景中，事件必须取消，否则会出问题，例如拖拽，如果不取消移动事件，就会一直移动
怎么解绑？
绑定方式不一样，解绑方式也是不一样的
通过标签.on类型绑定的事件怎么取消 标签.on类型 = null
通过事件监听器绑定的对应的解绑方法
语法：标签.removeEventListener(事件类型，要解绑的那个函数）
绑定事件使用匿名函数就解绑不掉了
事件对象
事件对象：当我们触发了事件，调用设置好的事件函数（浏览器调用这个函数）系统为了方便我们控制事件，在调用函数的时候给我们传递了一个参数，浏览器传递进来的参数是一个对象-事件对象
事件对象的获取
document.onclick = function(e){
console.log(e)
}这个事件对象在低版本ie是不兼容的
在低版本ie浏览器中，我们需要通过-window.event来获取事件对象
console.log( window.event );以前的兼容写法
var e = e || window.event
console.log(e);现代的兼容写法
console.log( window.event );阻止事件冒泡
事件流：捕获-目标-冒泡（非目标元素的事件会默认在冒泡阶段执行）
将冒泡的行为取消掉——阻止冒泡
利用事件对象来阻止其他标签的事件冒泡，在事件对象中有一个方法叫stopPropagation专门用来阻止事件冒泡
在低版本ie浏览器中 用事件对象.cancelBubble = true来阻止
以前的兼容写法
if(window.event.stopPropagation) {
window.event.stopPropagation()
} else {
window.event.cancelBubble = true
}现代的兼容写法
window.event.cancelBubble = truemouseover默认会冒泡 mousemove不会冒泡
阻止默认行为
默认行为：有些标签，不用给他绑定事件，有默认的行为，比如a/form/鼠标右击/选中文字...
利用事件对象阻止鼠标默认行为
事件对象.preventDefault()
这个方法在低版本ie浏览器不兼容
.returnValue = false以前的兼容写法
try{
e.preventDefault()
}catch(err) {
e.returnValue = false
}现代兼容写法
e.returnValue = false另外的阻止默认行为——在行内阻止 将链接改为javascript:;或javascript:void(0);
获取鼠标按键码
事件对象.button获取鼠标案件码 0表示左键1 / 表示中键 / 2表示右键
获取当前的事件类型 事件对象.type记录当前事件类型
获取键盘按键码
事件对象.keyCode获取键盘按键码
字母和数字对应的按键码就是阿斯克码，大小写混乱
将阿斯克码转化为字符String.fromCharCode(阿斯克码)
回车键13
空格32
左37
上38
右39
下40
事件对象.shiftkey 事件对象.ctrlkey 事件对象.altkey
用来判断这个键是否在和其他键组合使用，当组合使用时得到的结果为true，单个使用得到的结果为false
获取鼠标位置
事件对象.offsetX 事件对象.offsetY - 获取鼠标在当前事件源上的位置
事件对象.clientX 事件对象.clientY - 获取鼠标在当前浏览器窗口范围内的位置
事件对象.pageX 事件对象.pageY - 获取鼠标在整个网页中的绝对位置
事件委托
事件委托：多个字标签都需要事件的时候，就让他父标签去绑定处理
在父标签的时间中，可以通过事件对象获取到精准的目标元素（事件对象.target）
事件委托的好处：
1.提高了绑定效率
2.动态添加的字标签也能具有事件
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。