11-js事件基础

一、事件概念

一个事件由3个部分组成：

• 谁来触发事件：事件源
• 触发什么事件：事件类型
• 触发以后做什么：事件处理函数

var oDiv = document.querySelector('div')
oDiv.onclick = function(){
    alter("hello")
}
/*
	事件源：oDiv
	事件类型：click
	事件处理函数：function(){}
*/
1
2
3
4
5
6
7
8
9

二、事件绑定方式

1. onxxx

dom0级别的事件绑定方式；

只能给一个元素注册一个事件，多次使用会被覆盖

oDiv.onclick = function(){
    console.log("第一个事件")
}
oDiv.onclick = function(){
    console.log("第二个事件")
}
// 输出： 第二个事件
1
2
3
4
5
6
7

2. 事件监听器 addEventListener

dom2级的事件监听方式

语法：dom元素.addEventListener('事件类型',事件执行函数,是否捕获)

同类型的事件可以绑定多个事件监听器，多个事件监听器都会执行（顺序执行）

低版本的ie7不能使用addEventListener，要使用attachEvent

boxDiv.addEventListener("click",function(){
    console.log("3")
})
boxDiv.addEventListener("click",function(){
    console.log("4")
})
// 输出： 3 4
1
2
3
4
5
6
7

**onxxx 和 addEventListener 不会相互覆盖 **

三、事件解绑方式

方法1：覆盖原事件处理（置空）

dom0级的 onxxx 方式的解绑

语法：dom元素.onxxx = null

var onBtn = document.querySelector(".on");
onBtn.onclick = function(){
    divDiv.onclick = null;
}
1
2
3
4

方法2：移除事件监听器 removeEventListener

对应dom2级的addEventListener

语法：元素.removeEventListener('事件类型',事件处理函数,是否捕获)

默认是冒泡；用于接触指定元素的事件监听器

var boxDiv = document.querySelector(".box");
var fn1 = function(){
    console.log("click1");
}
boxDiv.addEventListener("click",fn1);
boxDiv.addEventListener("click",function(){
    console.log("click2");
});
var onBtn = document.querySelector(".on");
onBtn.onclick = function(){
    boxDiv.removeEventListener("click",fn1)
}
1
2
3
4
5
6
7
8
9
10
11
12

需要保证是同一个函数（地址一样），一般情况需要另外定义函数，然后调用这个函数进行操作。

（上文click2的操作没有封装成函数，所以无法对应解除事件绑定）

四、事件派发方式

方法1：onxxx

var boxDiv = document.querySelector(".box");
// dom0 绑定双击事件
boxDiv.ondblclick = function(){
    console.log("盒子")
}
1
2
3
4
5

方法2：dispatchEvent

dom2级

语法：元素.dispatchEvent(事件对象)

作用：向一个指定的事件目标派发一个事件，可以是原生事件也可以是自定义事件

// 创建一个ondblclick双击事件对象
var boxDiv = document.querySelector(".box");
boxDiv.ondblclick = function () {
    console.log("盒子被双击了");
};
var event = new Event("dblclick");
boxDiv.dispatchEvent(event);
1
2
3
4
5
6
7

案例：自动运行脚本（配合setInterval）

五、事件对象 window.event

触发事件后，对事件的描述信息（如：点击坐标、元素标签、键盘按钮等）

浏览器 window.event 存储事件信息的所有描述

boxDiv.onclick = function(e){
    e = e || window.event;
    console.log(e)
}
1
2
3
4

e || window.event 是兼容写法

前者是火狐：事件处理函数的第一个形参，就是本次事件的事件对象

后者是ie和chrome：通过window.event获取本次事件的事件对象

六、点击事件的光标坐标点

1. 以页面为参考坐标 page

页面左上角的坐标为原点(0,0)

语法：
相对页面的横坐标： 事件对象.pageX
相对页面的纵坐标： 事件对象.pageY

// 给窗口绑定点击事件
window.onclick = function(e){
    e = e || window.event;
    console.log(e); // 完整事件对象
    console.log(e.pageX,e.pageY); // 点击时，鼠标的横坐标和纵坐标
}
1
2
3
4
5
6

2. 以可视窗口为参考 client

可视窗口左上角的坐标是原点(0,0)

语法：
相对可视窗口的横坐标： 事件对象.clientX
相对可视窗口的纵坐标： 事件对象.clientY

console.log(e.clientX,e.clientY);
1

3. 相对事件目标为参考 offset

被点击的元素 = 事件目标

被点击的元素的左上角是坐标原点(0,0)

语法：
相对可视窗口的横坐标： 事件对象.offsetX
相对可视窗口的纵坐标： 事件对象.offsetY

console.log(e.offsetX,e.offsetY);
1

七、常见的事件类型（了解）

1. 鼠标事件

• click 左键点击
• dbclick 左键双击
• contextmenu 右键单击事件
• mousedown 鼠标左键按下事件
• mouseup 鼠标左键抬起事件
• mousemove 鼠标移动
• mouseover / mouseenter 鼠标移入事件
• mouseout / mouseleave 鼠标移出事件

事件对象button属性记录按下的鼠标按键

0 - 左键 1 - 中间滚动 2 - 右键

2. 键盘事件

• keyup 键盘抬起事件
• keydown 键盘按下事件（可以监听特殊按键，如shift、alt；大小写输出的都是大写的编码）
• keypress 键盘按下再抬起事件（无法监听特殊按键；可以监听大小写的编码）

一般有键盘事件都是表单元素，如input;

另外，document和window也可以绑定键盘事件

事件对象keyCode属性记录当前按下的按键编码；

有兼容性问题，低版本id是在which上记录按下的按键编码

console.log(String.fromCharCode(e.keyCode))
1

3. 表单事件

• change 表单内容改变事件（文本框失去焦点时，对比上一次文本框内容，有变化则触发）
• input 表单内容输入事件（内容增加/减少 都会触发）
• submit 表单提交事件
• focus 获取焦点
• blur 失去焦点

4. 触摸事件

• touchstart 触摸开始事件
• touchend 触摸结束事件
• touchmove 触摸移动事件

window的相关事件

• resize
• load
• scroll

5. 组合按键

组合按键主要是 alt / shift / ctrl / win

事件对象中提供属性：（按下得到true，否则得到false）

• altKey Alt 键
• shiftKey shift 键
• ctrlKey ctrl键
• metaKey win键

// 判断是否同时按下两个键
document.onkeyup = function(e){
    e = e || window.event
    keyCode = e.keyCode || e.which
    
    if(e.altKey && keyCode === 65){
        console.log("同时按下alt和a")
    }
}
1
2
3
4
5
6
7
8
9

常见键盘码

ctrl 17 ; shift 16 ; alt 18 ; win 91 ; enter 13