鼠标事件上

事件概述

用户在浏览器上触发一个操作 浏览器上会执行相关的函数进行处理 这个称为事件

示例：用户点击注册按钮 浏览器会完成注册的操作

事件的俩种模式

内联模式

脚本模式 *

事件划分

事件的执行者 元素

事件名 on 开头 + 对应的名字

事件处理函数 function

事件的分类

鼠标事件 （ mouse ）

点击的事件

click

dblcilck

mousedown

mouseup

移进

mouseenter

<!-- 内联的模式 -->

<button onclick = "alert(123)" > 123 </button>

<!-- 脚本模式 -->

<!-- 采用对应的分离 将对应的事件的处理函数进行分离 -->

<button onclick = "handlerClick()" > 123 </button>

<script>

function handlerClick (){

alert ( 123 )

}

</script>

// 执行者 事件名

document . onclick = function (){

// 处理函数

} mouseover （子元素也会触发）

移出

mouseleave

mouseout （子元素也会触发）

移动

mousemove

键盘事件 （ key ）

keyup 弹起

keydown 按下

keypress （字符键才触发 按下）

HTML 事件

load 加载事件

unload 卸载

select 选择

change 修改

blur 失去焦点

focus 获取焦点

input 输入内容

scroll 滚动

submit 提交

reset 重置

window . onkeydown = function (){

console . log ( " 键盘按下 " );

}

window . onkeyup = function (){

console . log ( " 键盘弹起 " );

}

// 字符键触发的 只有按字符的时候才能触发 tab ctrl

window . onkeypress = function (){

console . log ( " 字符按下 " );

}

// 窗口加载

window . onload = function (){

console . log ( " 加载 " );

}

window . onunload = function (){

console . log ( " 卸载 " );

}

//html 元素的一些事件

// 表单元素 所有的函数都具备一个参数 arguments （所有传递参数 他是数组）

处理函数也同样是函数 同样存在这个 arguments

通过我们的比对我们发现这个 arguments 里面只有一个参数 这个参数是一个 event 对象（事件源对象）

由于我们的 arguments[0] 是或者对应的 arguments 数组里面的第一个参数（第一个形参 所以我们可以

在对应的处理函数中直接声明一个形参来接收我们 arguments 里面的数据）

event 事件源对象 （ window 里面的）

// 获取焦点事件

document . querySelector ( "input" ). onfocus = function (){

console . log ( " 获取焦点 " );

// focus 方法可以直接获取焦点

document . querySelector ( "input:nth-child(2)" ). focus ()

}

// 失去焦点事件

document . querySelector ( "input" ). onblur = function (){

console . log ( " 失去焦点 " );

}

document . querySelector ( "#context" ). onselect = function (){

console . log ( " 选择了 " );

}

// 修改数据 修改数据 失去焦点

document . querySelector ( "input:nth-child(2)" ). onchange = function (){

console . log ( " 修改数据了 " );

}

//vue 双向绑定的原理实现

document . querySelector ( "input:nth-child(2)" ). oninput = function (){

console . log ( " 输入数据 " );

}

// 表单元素 form

document . querySelector ( "form" ). onsubmit = function (){

console . log ( " 数据提交了 " );

}

// 重置事件 form

document . querySelector ( "form" ). onreset = function (){

console . log ( " 数据重置了 " );

}

//scroll 滚动栏 滚动事件 任何具备滚动栏都可以添加

window . onscroll = function (){ // 回到顶部

console . log ( " 滚动了 " );

}

setTimeout ( function (){

// 操作滚动栏滚动 x 轴 y 轴

window . scrollTo ( 0 , 0 )

}, 5000 )

document . querySelector ( "button" ). onclick = function ( e ){

//e 其实就是我们对应的 arguments[0] 所以这个 e 就是我们的 event 对象

// 建议形参的写法为 e 或 event

// 兼容写法

e = e || window . event // 兼容写法

console . log ( e . altKey );

}

event 对象里面的属性

位置相关属性

offsetX 鼠标离当前元素的 X 距离

offsetY 鼠标离当前元素的 Y 距离

clientX 鼠标离网页最左的距离 （不包含不可见部分）

clientY 鼠标离网页最顶部的距离 （不包含不可见部分）

pageX 鼠标离网页最左的距离 （包含不可见部分）

pageY 鼠标离网页最顶部的距离 （包含不可见部分）

screenX 鼠标离屏幕最左部的距离

screenY 鼠标离屏幕最顶部的距离

按键相关属性

//event 中的属性

// 位置属性

console . log ( e . x ); // 当前鼠标离对应的最顶部的距离（不包含滚动栏的距离）不包含不可见距离

console . log ( e . y );

console . log ( e . clientX );

console . log ( e . clientY );

console . log ( e . offsetX ); // 对应在 div 里面的鼠标位置 X

console . log ( e . offsetY ); // 对应在 div 里面的鼠标位置 Y

console . log ( e . pageX ); // 当前鼠标离对应的最顶部的距离（包含滚动栏的距离） 包含不可见距离

console . log ( e . pageY );

console . log ( e . layerX ); // 在定位的时候基于自己 不定位的时候基于最顶部距离 包含不可见距离

console . log ( e . layerY );

console . log ( e . screenX ); // 离屏幕最坐标的 X 距离

console . log ( e . screenY ); // 离屏幕最上面的 y 距离 ctrlKey

altKey

shiftKey

button （只针对于点击事件）

左键是 0 中间为 1 右键为 2

type 事件触发类型

target 当前触发事件的对象

currentTarget 当前加事件的对象

键盘的输入的相关属性

key 获取对应的按下的键

keyCode 获取按下的键的 ascii 码

charCode 获取 keypress 事件中按键的 ascii 码

事件委托机制

将原本元素需要做的事件 交给他的父元素

1. 加事件给对应的父元素

2. 在父元素的事件中进行判断 e.target

// 三个按键是否按下 ( 长按 ) 先按下再操作 布尔类型的值

console . log ( e . ctrlKey ); // 是否按下 ctrl

console . log ( e . shiftKey ); // 是否按下 shift

console . log ( e . altKey ); // 是否按下 alt

window . onkeydown = function ( e ){

// 兼容 ie

e = e || window . event

//key 获取对应的按下的键

console . log ( e . key ); // 兼容问题

//keyCode 获取对应按下键的 ascii 码

console . log ( e . keyCode ); // 不管是大写还是小写获取的都是大写的 ascii 码

}

// 只支持字符

window . onkeypress = function ( e ){

console . log ( e . keyCode );

// 将 ascii 转为对应的字符串

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

// 只在 onkeypress 里面才有用 也返回是 ascii 码

console . log ( e . charCode );

}

// 事件委托 （里面有多个相同的元素需要同样的事件）

// 获取父元素 利用的父元素的事件及对应的 e.target 进行判断 当前你操作的元素是哪一个

document . querySelector ( "ul" ). onclick = function ( e ){

e = e || window . event

// 获取当前操作的元素 li if ( e . target . nodeName == "LI" ){

// 操作

// 排他思想

for ( var j = 0 ; j < this . children . length ; j ++ ){

this . children [ j ]. style . backgroundColor = ""

}

e . target . style . backgroundColor = "red"

}

}