1. 认识事件
+ 事件就是 和 浏览器中某一个节点约定的事情
+ 当用户发生指定行为的时候,会执行的某一段代码
事件三要素
1. 事件源 绑定在谁身上的事件
2. 事件类型 绑定的什么事件
3. 事件处理函数 当行为发生的时候,执行的函数
2. 事件绑定
+ 在js中有两种事件绑定的方式
1. on 语法 事件绑定
+ 语法: 事件源.on事件类型 = 事件处理函数
+ 特点: 同一个事件源的同一个事件类型只能绑定一个事件处理函数
= 赋值 会覆盖之前的函数
// ele.onclick = function () {console.log( '点击事件处理函数1' )}
// ele.onclick = function () {console.log( '点击事件处理函数2' )} //覆盖之前的函数1
2. 事件侦听器/事件监听器
+ 标准浏览器
- 语法: 事件源.addEventListener('事件类型',事件处理函数)
- 特点: 同一个事件源的同一个事件类型可以绑定多个事件处理函数,触发的时候按绑定顺序执行函数
ele.addEventListener('click', function () {
console.log('处理函数1')
});
ele.addEventListener('click', function () {
console.log('处理函数2')
});
+ 低版本IE浏览器
- 语法: 事件源.attachEvent('on事件类型',事件处理函数)
- 特点: 同一个事件源的同一个事件类型可以绑定多个事件处理函数,触发的时候按绑定倒序执行函数
3. 事件解绑
+ 取消已绑定的事件处理函数
1.
+ 语法: 事件源.on事件类型 = null
ele.onclick = null;
+ 因为 赋值符号 覆盖的原因,就可以实现解绑
2.
1) 标准浏览器
+ 语法: 事件源.removeEventListener('事件类型',你要解绑的事件处理函数)
! 注意:如果你要解除绑定,那么在绑定时候,需要把函数单独书写,以函数名的形式绑定
function f1() { console.log('解绑f1')}
ele.removeEventListener('click', f1);
2）低版本IE浏览器
+ 语法: 事件源.detachEvent('on事件类型',你要解绑的事件处理函数)
! 注意: 2级事件, 如果你要解除绑定,那么在绑定时候,需要把函数单独书写,以函数名的形式绑定
4. 事件对象
当触发一个事件以后,都会有一个对象来存储该事件的一些描述信息, 我们就把
这个对象叫作 事件对象。
5. 获取事件对象
+ 标准浏览器：形参e
- 直接在事件处理函数接受一个形参,形参就是事件对象
- 会在事件触发的时候,浏览器自动传递实参
- 事件源.onclick = function(e){}
- 事件源.addEventListener('click',function(xx){})
+ 低版本IE ：window.event
- 在事件处理函数中, 通过window.event获取
var ele = document.getElementsByTagName('div')[0];
ele.onclick = function (e) {
e = e || window.event;
console.log(e);
}
6. 鼠标事件
1）类型
1. click 左键单击
ele.onclick = function () {console.log( '左键单击' )}
2. dblclick 左键双击
ele.ondblclick = function () {console.log( '左键双击' )}
3. contextmenu 右键单击
ele.oncontextmenu = function () {console.log( '右键单击' )}
4. mousedown 鼠标按键按下
ele.onmousedown = function () {console.log( '鼠标按键按下' )}
5. mouseup 鼠标按键松开
ele.onmouseup = function () {console.log( '鼠标按键松开' )}
6. mousemove 鼠标移动
ele.onmousemove = function () {console.log( '鼠标移动' )}
7. mouseover 鼠标移入
8. mouseout 鼠标移出
over 和 out 是一套,鼠标的移入移出 后代元素的时候,也会触发
ele.onmouseover = function () {console.log( '鼠标移入 over' )}
ele.onmouseout = function () {console.log( '鼠标移出 out' )}
9. mouseenter 鼠标移入
10. mouseleave 鼠标移出
enter 和 leave 是一套,鼠标的移入移出 后代元素的时候,不会触发
ele.onmouseenter = function () {console.log( '鼠标移入 enter' )}
ele.onmouseleave = function () {console.log( '鼠标移出 leave' )}
2）鼠标事件信息
7. 键盘事件
- 依赖键盘行为触发的事件
1. keydown 键盘按键按下事件
- 按键按下一直不松开,则一直触发
- 键盘任何按键按下都会触发
2. keyup 键盘按键抬起事件
div.onkeyup = function () {console.log( 'div-up' )}
3. keypress 键盘按键按下事件
- 按键按下一直不松开,则一直触发
- 键盘上的一些系统功能按键不会触发: 比如 ESC等
8. 表单事件
表单事件
+ 专门为表单元素(form,input,button,select...)准备的事件
+ 其他元素可以绑定,但是无法触发
1. blur 失焦
inp.onblur = function () { console.log( '失焦' )}
2. focus 聚焦
inp.onfocus = function () { console.log( '聚焦' )}
3. input 输入
4. change 改变
+ 失去焦点的时候,和聚焦的时候内容不一样才会触发
+ 此事件一般用于select多选框
5. reset 重置
+ 需要绑定给 form 标签
+ 当你点击reset按钮的时候,会触发form标签的默认重置行为
6. submit 提交
+ 需要绑定给 form 标签
+ 当你点击submit按钮的时候,会触发form标签的默认提交
+ 当你点击button标签按钮的时候,会触发form标签的默认提交
+ 当你输入框回车的时候,会触发form标签的默认提交
9. 触摸事件
+ 专门用于在触摸屏幕设备(手机,平板,...)
1. touchstart 触摸开始
document.ontouchstart = function () {console.log( '触摸开始' )}
2. touchmove 触摸移动
document.ontouchmove = function () {console.log( '触摸移动' )}
3. touchend 触摸结束
document.ontouchend = function () {console.log( '触摸结束' )}
