事件的组成

事件

概述：

事件是一个异步机制，相当于一个 观察者观察 — 执行者执行

事件的组成：

• 事件名 （内置的）

• 执行对象 （元素对象）

• 处理函数 （自定义函数）

• 观察者 （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';
        }
    }

事件委托机制的使用场景

在一个父元素里面有多个子元素需要添加相同的事件的时候