概念
事件是一个异步机制。他相当于一个 执行者执行 -- 观察者观察 --- 处理函数执行 这个流程称为事件。事件监听器是一个标准的观察者模式（observer） 也被称为发布、订阅者模式。
事件三要素
- 事件源：谁触发了这个事件
- 事件类型：什么事件，如何触发，比如鼠标点击事件（onclick），鼠标经过，键盘按下
- 事件处理程序：通过一个函数赋值的方式完成
事件的声明方式
内联模式
<button onclick="alert('你好')">点我</button>
<button onclick="fn(1)">点我</button>
<script>
function fn(arg){
alert('我是函数执行'+arg);
}
</script>脚本模式
- 脚本模式的写法 事件名 执行对象 处理函数
- 执行对象 . on + 事件名 = 处理函数
<html>
<button>点我</button>
<button>点我</button>
</html>
<script>
//脚本模式的写法 事件名 执行对象 处理函数
var btn = document.getElementsByTagName('button')[1]
//执行对象.on+事件名 = 处理函数
btn.onclick = function(){
console.log('你好');
}
function handler(){
console.log('处理函数执行了');
}
btn.onclick = handler
</script>内联模式和脚本模式的区别
- 内联模式相等于属性赋值, 里面的代码是window对象帮你执行，而对应的脚本模式里面的this执行当前的调用元素
- 脚本模式在console控制台中看不见调用函数 内联模式是直接可以看到执行的函数名
事件名的分类
- 鼠标事件（鼠标触发的 mouse）
- 键盘事件 （键盘触发的 key）
- HTML事件 （HTML中自带的一些事件（只能用于专门HTML））
鼠标事件
- click 单击事件
- dblclick 双击事件：双击事件必定触发单击
- mousedown 按下：执行顺序 按下 -- 弹起 -- 单击
- mouseup 弹起：执行顺序 按下 -- 弹起 -- 单击
- mouseenter 移入：子元素不会触发，也就是不会冒泡
- mouseleave 移出：子元素不会触发，也就是不会冒泡
- mouseover 移入：子元素会触发，会冒泡
- mouseout 移出：子元素会触发，会冒泡
- mousemove 移动
- contextmenu 右键点击：子元素也不会触发
<html>
<div>我是一个div
<p>你好</p>
</div>
</html>
<script>
//获取div
var div = document.querySelector('div')
//脚本模式 元素对象.on+事件名 = 处理函数
div.onclick = function(){
console.log('单击事件');
}
//双击事件必定触发单击
div.ondblclick = function(){
console.log('双击事件');
}
//鼠标的按下和弹起 执行顺序 按下 -- 弹起 -- 单击
div.onmousedown = function(){
console.log('鼠标按下');
}
div.onmouseup = function(){
console.log('鼠标弹起');
}
//鼠标的移进和移出
//enter和leave 进入子元素不会触发
div.onmouseenter = function(){
console.log('鼠标移入');
}
div.onmouseleave = function(){
console.log('鼠标移出');
}
//over和out 进入子元素也会触发
div.onmouseover = function(){
console.log('鼠标over移入');
}
div.onmouseout = function(){
console.log('鼠标out移出');
}
//鼠标的移动
div.onmousemove = function(){
console.log('鼠标移动');
}
//鼠标点击右键 （点击事件不会触发）
div.oncontextmenu = function(){
console.log('右键点击');
}
</script>键盘点击事件
- keydown 按下
- keyup 弹起
- keypress 除功能键的其他键
<html>
<input type="text">
</html>
<script>
//获取输入框
var input = document.querySelector('input')
//键盘相关事件
input.onkeydown = function(){
console.log('键盘按下');
}
//在input 弹起会出现俩次
input.onkeyup = function(){
console.log('键盘弹起');
}
//非功能键按下
input.onkeypress = function(){
console.log('非功能键按下');
}
window.onkeypress = function(){
console.log('在window上触发了keypress事件');
}
</script>【注意事项】
- 执行顺序 keydown - keypress - keyup
- keypress 一定会触发 keydown
HTML事件
- window 的事件
- 表单的事件
- 相关聚焦和失焦的方法
window的事件
- 加载事件（load）：窗口加载时触发
- 卸载事件 （unload）：窗口卸载时触发，相当于刷新
- 关闭窗口的事件 （onclose）：窗口关闭时触发，清除相关缓存和对应的资源操作
- 打印事件 (onbeforeprint)：打印前触发
- 卸载事件 （onbeforeunload）：卸载之前触发
- 滚动栏事件 （onscroll）：滚动栏位置发生变化
- 可操作空间大小事件（onresize）：窗口可操作空间大小改变时触发
- 重置事件（onreset）：窗口重置位置时触发
- ....
<script>
// window窗口事件
//加载事件
window.onload = function() {
console.log('窗口加载时触发');
}
//卸载事件（刷新）
window.onunload = function() {
console.log('窗口卸载时触发');
}
//关闭窗口事件 （清除相关缓存和对应的资源操作）
window.onclose = function() {
console.log('窗口关闭时触发');
}
//滚动栏滚动
window.onscroll = function() {
console.log('滚动栏位置发生变化');
}
//打印之前调用 调用print方法之前 更改打印的然后继续打印
window.onbeforeprint = function() {
console.log('打印前触发');
}
//在卸载之前调用 将一些内容回收
window.onbeforeunload = function() {
console.log('卸载之前触发');
}
// 窗口可操作空间大小改变时触发
window.onresize = function() {
console.log('窗口可操作空间大小改变时触发');
}
// 窗口重置位置时触发
window.onreset = function() {
console.log('窗口重置位置时触发');
}
</script>
表单事件和相关聚焦、失焦的方法
- submit 表单提交事件
- reset 表单重置事件
- select 内容被选中（只针对于输入框和文本域）
- change 表单的value值发生变化
- input 可输入的表单标签里面进行输入
- blur 失去焦点
- focus 获取焦点
<html>
<form action="">
<input type="text">
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="reset"> 重置</button>
<button type="submit">提交</button>
</form>
</html>
<script>
//表单相关的事件
var inp = document.querySelector('input')
var select = document.querySelector('select')
//加给整个form表单的事件
document.forms[0].onsubmit = function() {
console.log('提交');
}
document.forms[0].onreset = function() {
console.log('重置');
}
// 给input加
//value值发生变化 必须先失去焦点
inp.onchange = function() {
console.log('inp值变化');
}
// input 输入对应的值的时候调用
inp.oninput = function() {
console.log('输入值');
}
// 选中内容触发该事件
inp.onselect = function() {
console.log('选择值');
}
//失去焦点
inp.onblur = function() {
console.log('失去焦点');
}
//聚焦
inp.onfocus = function() {
console.log('获取焦点');
}
// 给select加
//选择了value值就会发生变化
select.onchange = function() {
console.log(' select值变化');
}
</script>event事件源对象
概述
event 被称为事件源对象，他是一个全局的内置对象（属于window），他里面包含了一些关于事件执行的相关的属性。
处理函数的arguments
<html>
<button>按钮</button>
</html>
<script>
var btn = document.querySelector('button')
btn.onclick = function() {
console.log('arguments', arguments);
// PointerEvent 事件源对象
console.log(`arguments[0]`, arguments[0]);
// arguments[0] PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
}
window.onclick = function() {
console.log('arguments', arguments);
// KeyboardEvent 键盘事件源对象
console.log(`arguments[0]`, arguments[0]);
}
</script>从上述代码可得到对应的事件执行的处理函数里面会传递一个参数 ，这个参数的类型是一个event，这个处理函数的arguments数组里面只有一个元素。故而我们可以简写为：
//这个地方的e 一般写做 e 或者是 event
btn.onclick = function(e){
//这个地方的e表示是第一个参数 也就是对应的event对象 这个event在这个里面有兼容问题
//兼容写法
e = e || window.event
//这个e表示的就是第一个参数 那么他也就是我们对应的event对象
console.log(`e`, e);
}event的常用属性
- screenX 表示鼠标离屏幕的X距离
- screenY 表示鼠标离屏幕的Y距离
- pageX 表示当前的鼠标离页面的X距离（包含卷起部分）
- pageY 表示当前的鼠标离页面的Y距离（包含卷起部分）
- clientX 表示鼠标离页面可视区的X距离
- clientY 表示鼠标离页面可视区的Y距离
- offsetX 表示鼠标离父元素偏移的X距离
- offsetY 表示鼠标离父元素偏移的Y距离
//对应的属性
console.log(e.type) //获取对应的事件名
console.log(e.target) //获取对应的事件的目标元素 你当前执行事件的目标元素
console.log('按钮触发了')
console.log(e.currentTarget) //获取当前加事件的元素
//位置 鼠标点击的坐标
//获取鼠标点击位置的页面坐标 包含滚动栏
console.log(e.pageX)
console.log(e.pageY)
//获取鼠标在页面可视区的位置 不包含滚动栏的
console.log(e.clientX)
console.log(e.clientY)
//获取鼠标在对应的盒子里面的位置 也就是在按钮中的位置
console.log(e.offsetX)
console.log(e.offsetY)
//获取鼠标处在屏幕的位置 不包含滚动栏
console.log(e.screenX)
console.log(e.screenY) //加上导航栏的位置- button 按下是哪个键
左键0 中间滚轮1 右键2
- ctrlKey 是否按下了ctrl键*
- altKey 是否按下了alt键*
- shiftKey 是否按下shift键*
//辅助的按键属性 返回布尔类型值
console.log(e.ctrlKey);//是否长按ctrl
console.log(e.altKey);//是否长按alt
console.log(e.shiftKey);//是否长按shift- target 表示当前事件的触发对象*
- currentTarget 表示加事件的元素*
- cancelBubble 取消冒泡*
- returnValue 返回的value值 返回true就可以走 返回false（默认值）就不能走*
//触发者元素
console.log(e.target);
//加事件的元素
console.log(e.currentTarget);
console.log(e.cancelBubble) //默认值为false
//返回的value值 返回true就可以走 返回false就不能走 走不走对应的默认行为
console.log(e.returnValue) //默认值为true- key 表示当前按下的键的字符（区分大小写）
- keyCode （在keydown里面 不区分大小 全部是大写的ascii码）
- code （key+大写的字符）
- charCode （在keypress里面才管用 他区分大小写 返回对应的ascii码）
window.onkeypress = function(e){
console.log(e.code);//当前的按钮按下键是哪个一个 返回的是一个key+大写字母
console.log(e.keyCode);//当前按下键的大写字母 ascii码
console.log(e.charCode); //当前字符的ascii码 keypress里面
console.log(e.key);//表示当前按下的键 （兼容问题）
}事件委托机制（事件代理)
将对应的事件委托给对应的父元素，然后通过对应的e.target获取实际的触发元素进行操作。
<html>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</html>
<script>
//事件委托的写法
//获取需要加事件的父元素
var ul = document.querySelector('ul')
//给ul添加事件
//给父元素添加事件
//在内部判断触发元素 e.target
//对应执行操作
ul.onclick = function (e) {
e = e || window.event
//判断当前触发元素是否为li
if (e.target.tagName == 'LI') {
//排他思想
//把所有的li的class清除
for (var item of this.children) {
item.style.backgroundColor= 'white'
}
e.target.style.backgroundColor = 'pink'
}
}
</script>事件委托的运用场景
在一个父元素里面有多个子元素要添加相同的事件的时候
【注意事项】
- 如果需要使用事件委托 那么对应的事件一定要支持事件冒泡(利用事件冒泡来完成操作的)
- 如移入移出功能需要添加事件委托 那么必须使用mouseover/mouseout 不能使用mouseenter/mouseleave
4645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
