事件

事件概述

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

1.用户点击注册按钮,浏览器会完成注册的操作

事件的两种模式

内联模式

脚本模式(常用)

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

事件划分

事件的执行者 元素

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

事件处理函数 function

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

事件的分类

鼠标事件 (mouse)

点击的事件

click 点击

dblclick 双击

mousedown 鼠标按下

mouseup 鼠标抬起

移进

mouseenter

mouseover(子元素也会触发)

移出

mouseleave

mouseout(子元素也会触发)

移动

mousemove

//获取div
var div=document.querySelector("div")
//给div加事件
div.onclick=function(){//click点击事件
    console.log("点击了");
}
//双击事件
div.ondblclick=function(){
    console.log("双击了");
}
//鼠标事件  onmouse开头的事件
//移进  移出
div.onmouseenter=function(){
    console.log("移进去了");
}
div.onmouseleave=function(){
    console.log("移出去了");
}
//over和out子元素也会重新触发  事件冒泡 子类触发  父类也会触发
div.onmouseover = function (){
    console.log("移进");
}
div.onmouseout=function(){
    console.log("移出");
}   
//鼠标移动事件
div.onmousemove=function(){
    console.log("鼠标移动事件");
}
//先按下 后弹起  再点击

键盘事件 (key)

keyup 弹起

keydown 按下

keypress(字符键才触发 按下)

window.onkeydown=function(){
    console.log("键盘按下");
}
window.onkeyup=(){
    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=dunction(){
    console.log("选择了");
}
//修改数据  失去焦点
document.querySelector("input:nth-child(2)").oninput=function(){
    console.log("修改数据了");
}
//vue  双向绑定的原理实现
document.querySelector("input:nte-child(2)").oninput=function(){
    console.log("输入数据");
}
//表单元素 form
document.querySelector("form").onsubmit=function(){
    console.log("数据提交了");
}
//重置事件  form
document.querySelector("foem").onreset=function(){
    console.log("数据重置了");
}
//scroll  滚动栏  滚动事件  任何具备滚动栏的都可以添加
widdow.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对象里面的属性

位置相关属性

var div =document.querySelector("div")
div.onclick=function(e){
e=e||window.enevt
console.log(e);
//event中的属性
//位置属性
console.log(e,x);//当前鼠标离对应的最顶部的距离(不包含滚动栏的距离)不包含不可见距离
console.log(e,y);//与client效果一样,但是有兼容问题,所以不常用
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,larerX);//在定位的时候基于自己,不定位的时候基于最顶部的距离  包含不可见距离
console.log(e,larerY);
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
console.log(e,button);//点击的鼠标的那个键
console.log(e,type);//事件触发的类型

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进行判断  当前你操作的元素的是哪一个
doucment.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"
}
}

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
//选中效果
//先获取所有的li
var lis=document.querySelectorAll("li")
//再给对应的li添加事件
for(var i=0;i<lis.length;i++){
//在事件里面进行操作
lis[i].onclick=function(){
//排他思想
for(var j=0;j<this.parentElement.chlidren.length;j++){
this.parentElement.chlidren.length[j].style.backgroundColor=""
}
this.style.backgroundColor="red"
}
}

下面为正常选中效果,不做事件委托