三要素:
时间类型:行为的类型
事件语法:事件源.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 = true
阻止默认行为
默认行为:有些标签,不用给他绑定事件,有默认的行为,比如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记录当前事件类型
字母和数字对应的按键码就是阿斯克码,大小写混乱
将阿斯克码转化为字符String.fromCharCode(阿斯克码)
回车键13
空格32
左37
上38
右39
下40
事件对象.shiftkey 事件对象.ctrlkey 事件对象.altkey
用来判断这个键是否在和其他键组合使用,当组合使用时得到的结果为true,单个使用得到的结果为false
获取鼠标位置
事件对象.offsetX 事件对象.offsetY - 获取鼠标在当前事件源上的位置
事件对象.clientX 事件对象.clientY - 获取鼠标在当前浏览器窗口范围内的位置
事件对象.pageX 事件对象.pageY - 获取鼠标在整个网页中的绝对位置
事件委托
事件委托:多个字标签都需要事件的时候,就让他父标签去绑定处理
在父标签的时间中,可以通过事件对象获取到精准的目标元素(事件对象.target)
事件委托的好处:
1.提高了绑定效率