鼠标事件上

事件概述

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

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

事件的俩种模式

内联模式

脚本模式 *

事件划分

事件的执行者 元素

事件名 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

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

//操作

//排他思想

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

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

}

e.target.style.backgroundColor = "red"

}

}