事件上

事件概述

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

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

事件的俩种模式

内联模式

脚本模式 *

<!-- 内联的模式 -->
<button onclick="alert(123)">123</button>
<!-- 脚本模式 -->
<!-- 采用对应的分离 将对应的事件的处理函数进行分离 -->
<button onclick="handlerClick()">123</button>
<script>
    function handlerClick(){
        alert(123)
    }
</script>

事件划分

事件的执行者 元素

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

事件处理函数 function

//执行者 事件名
document.onclick = function(){
    //处理函数
}

事件的分类

鼠标事件 （mouse）

点击的事件

click

dblcilck

mousedown

mouseup

移进

mouseenter

mouseover （子元素也会触发）

移出

mouseleave

mouseout （子元素也会触发）

移动

mousemove

键盘事件 （key）

keyup 弹起

keydown 按下

keypress （字符键才触发 按下）

window.onkeydown = function(){
    console.log("键盘按下");
}
window.onkeyup = function(){
    console.log("键盘弹起");
}
//字符键触发的 只有按字符的时候才能触发  tab ctrl
window.onkeypress = function(){
    console.log("字符按下");
}

HTML事件

load 加载事件

unload 卸载

select 选择

change 修改

blur 失去焦点

focus 获取焦点

input 输入内容

scroll 滚动

submit 提交

reset 重置

//窗口加载
window.onload = function(){
    console.log("加载");
}
window.onunload = function(){
    console.log("卸载");
}
//html元素的一些事件
// 表单元素
// 获取焦点事件
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)

所有的函数都具备一个参数 arguments（所有传递参数 他是数组）

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

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

由于我们的arguments[0]是或者对应的arguments数组里面的第一个参数（第一个形参 所以我们可以在对应的处理函数中直接声明一个形参来接收我们arguments里面的数据）

document.querySelector("button").onclick = function(e){
    //e其实就是我们对应的arguments[0] 所以这个e就是我们的event对象
    // 建议形参的写法为 e或event
    //兼容写法
    e = e || window.event //兼容写法
    console.log(e.altKey);
}

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

event对象里面的属性

位置相关属性

//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距离

 

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

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

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

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

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

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

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

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

按键相关属性

ctrlKey

altKey

shiftKey

//三个按键是否按下(长按) 先按下再操作 布尔类型的值
console.log(e.ctrlKey); //是否按下ctrl
console.log(e.shiftKey);//是否按下shift
console.log(e.altKey);//是否按下alt

button （只针对于点击事件）

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

type 事件触发类型

target 当前触发事件的对象

currentTarget 当前加事件的对象

键盘的输入的相关属性

key 获取对应的按下的键

keyCode 获取按下的键的ascii码

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

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);
}

事件委托机制

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

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

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

//事件委托 （里面有多个相同的元素需要同样的事件）
//获取父元素 利用的父元素的事件及对应的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"
    }
​
}