事件
概述:
事件是一个异步机制,相当于一个 观察者观察 — 执行者执行
事件的组成:
-
事件名 (内置的)
-
执行对象 (元素对象)
-
处理函数 (自定义函数)
-
观察者 (js的事件引擎)
示例
<button>点击</button>
button.onclick = function(){
console.log('点击了')
}
事件名:click
执行对象:button
处理函数:function(){ console.log(‘点击了’) } (自定义函数)
观察者:js引擎
在js内书写的时间,他的观察者都是事件引擎。主要关注(事件名、执行对象、处理函数)
事件的声明书写方式
内联模式
<!-- 内联模式就是在onclick属性中设置对应的代码 -->
<button onclick="alert('你好')">点我</button>
<button onclick="fn(1)">点我</button>
<script>
function fn(arg) {
alert('哈哈哈哈' + arg);
}
</script>
脚本模式
// 脚本模式 写法: 事件名 执行对象 处理函数
var btn = document.querySelector('button');
// 执行对象.on + 事件名 = 处理函数
btn.onclick=function(){
console.log('你好');
}
内联模式和脚本模式的区别
- 内联模式里面的函数需要手动调用,而对应的脚本模式的处理函数会自动调用
- 内联模式里面的函数调用的this指向window,对应的脚本模式里面的处理函数的this指向当前的调用者
事件名的分类
鼠标事件 (鼠标触发的 mouse)
-
click 单击事件
-
dbclick 双击事件
-
mousedown 按下
-
mouseup 弹起
-
onmouseenter 进入 (进入子元素不会触发)
-
onmouseleave 移出 (进入子元素不会触发)
-
onmouseover 进入 (进入子元素会触发)
-
onmouseout 移出 (进入子元素会触发)
-
onmousemove 移动
-
oncontextmenu 右键点击
注意事项
-
click和对应的mousedown和mouseup的执行顺序(执行顺序: mousedown ±- mouseup =-- click)
-
mouseenter(mouseleave)和mouseover(mouseout)的区别 (mouseenter 子元素不会触发 mouseover子元素会触发)
键盘事件 (键盘触发的 key)
- onkeydown
- onkeyup
- onkeypress 字符键按下
var input = document.querySelector('input');
// 键盘相关事件
input.onkeydown = function () {
console.log('键盘按下');
}
input.onkeyup = function () {
console.log('键盘弹起');
}
// 字符键按下 (除了功能键)
input.onkeypress = function () {
console.log('字符键按下');
}
注意事项
- 执行顺序 keydown - keypress -keyup
- keypress 一定会触发keydown
HTML事件 (HTML中自带的一些事件,只能用于专门HTML)
- onload (加载事件)
- onunload(卸载事件)
- onclose(关闭窗口事件)
- onbeforeprint(打印之前调用的事件)
- onbeforeunload(加载之前调用的事件)
- onscroll(滚动栏发生变化的事件)
// 加载事件
window.onload = function () {
console.log('hello');
}
// 卸载事件(刷新)
window.onunload = function () {
console.log('卸载');
}
// 关闭窗口事件(清除相关缓存和对应的资源操作)
window.onclose = function () {
console.log('关闭');
}
// 打印之前调用 调用print方法之前 更改打印的然后继续打印
window.onbeforeprint = function () {
console.log('打印之前调用');
}
// 卸载之前调用 将一些内容回收
window.onbeforeunload = function () {
console.log('卸载之前调用');
}
// 滚动栏滚动
window.onscroll = function () {
console.log('滚动了');
}
表单的事件
- submit 表单提交事件
- reset 表单重置事件
- select 内容被选中 (只针对表单元素)
- change 表单的value值发生变化
- input 可输入的表单标签里面进行输入
- onblur 失去焦点
- onfocus 获取焦点
/ 表单相关事件
// 加给整个form表单的事件
document.forms[0].onsubmit = function () {
console.log('提交了');
}
document.forms[0].onreset = function () {
console.log('重置了');
}
// change value值发生变化 且失去焦点后
document.querySelector('input').onchange = function () {
console.log('值发生变化了');
}
// input 输入值得时候调用
document.querySelector('input').oninput = function () {
console.log('输入值');
}
// select 选择里面的内容
document.querySelector('input').onselect = function () {
console.log('选择值了');
}
所有元素具备的
- 聚焦 onfocus
- 失去焦点 onblur
document.querySelector('input').onfocus = function () {
console.log('聚焦了');
}
document.querySelector('input').onblur = function () {
console.log('失去焦点了');
}
相关聚焦和失焦的方法
- focus 聚焦方法
- blur 失去焦点方法
document.querySelector('input').focus();
setTimeout(function () {
document.querySelector('input').blur();
}, 3000)
这两个方法element也具备
event事件源对象
概述:event被称为事件源对象,他是一个全局的内置对象(属于window),它包含了一些关于事件执行的相关的属性。
处理函数中的arguments
处理函数也是一个函数,函数就具备一个arguments的属性。arguments是一个伪数组、那么就可以知道对应的处理函数里面也拥有arguments
var btn = document.querySelector('button');
btn.onclick = function () {
// 点击事件触发以后对应的arguments里面有一个对应的pointEvent的对象
console.log('arguments', arguments);
console.log('arguments[0]', arguments[0]);
// 这个对象是在arguments里面存在第一位里面以属性为主
// 这个参数其实就对应的事件的一些内容 称为事件源对象 event
}
window.onkeydown = function () {
console.log('arguments', arguments);
// keyboardEvent 键盘的事件源对象
console.log('arguments[0]', arguments[0]);
}
从上述代码可得到对应的事件执行的处理函数里面会传递一个参数,这个参数的类型是一个event。这个处理函数的arguments数组里面只有一个元素。
btn.onclick = function (e) {
// 兼容写法
e = e || window.event;
console.log(`e`,e);
}
event常用属性
鼠标坐标的几大属性:
- screenX 表示鼠标离屏幕的距离X
- screenY 表示鼠标离屏幕的距离X
- pageX 表示鼠标离页面的距离X(包含卷起来的部分)
- pageY 表示鼠标离页面的距离Y(包含卷起来的部分)
- clientX 表示鼠标离页面可视区的距离X
- clientY 表示鼠标离页面可视区的距离Y
- offsetX 表示鼠标离父元素偏移的距离X
- offsetY 表示鼠标离父元素偏移的距离Y
按钮辅助的相关属性 (返回布尔类型值)
- ctrlKey 是否长按了ctrl键
- altKey 是否长按了alt键
- shiftKey 是否长按了shift键
鼠标相关的属性
按下的是哪个键
- 左键0
- 中间滚轮1
- 右键2
事件及相关触发的属性
- type 当前的事件类型
console.log(e.type);
- target 触发者元素
- currentTarget 表示加事件的元素
// 触发者元素
console.log(e.target);
// 加事件的元素
console.log(e.currentTarget);
键盘相关的属性
- key (表示当前按下的键的字符 ,区分大小写)有兼容问题
- keyCode (不区分大小写,全都是大写的ASCII码)
- code (key+大写的字符)
- charCode (在keypress里面才管用 ,区分大小写,返回对应的ASCII码)
window.onkeypress = function (e) {
console.log(e.code);
console.log(e.keyCode);
console.log(e.charCode);
console.log(e.key);
}
事件委托机制(事件代理)
概述:将对应的事件委托给对应的父元素,然后通过对应的e.target获取实际的触发元素进行操作。
var ul = document.querySelector('ul');
ul.onclick = function (e) {
e = e || window.event;
if (e.target.tagName == 'LI') {
for (var item of this.children) {
item.className = ''
}
e.target.className = 'current';
}
}
事件委托机制的使用场景
在一个父元素里面有多个子元素需要添加相同的事件的时候