事件(上)
事件概述
用户在浏览器上触发一个操作,浏览器上会执行相关的函数进行处理 这个称为事件
1.用户点击注册按钮,浏览器会完成注册的操作
事件的两种模式
内联模式
脚本模式(常用)
<!-- 内联模式 -->
<buttononclick="alert(123)">123</button>
<!-- 脚本模式 -->
<!-- 采用对应的分离 将对应的事件的处理函数进行分离 -->
<buttononclick="handlerClick()">123</button>
<script>
functionhandlerClick(){
alert(123)
}
</script>
事件划分
事件的执行者 元素
事件名 on开头+对应的名字
事件处理函数 function
//执行者 事件名
document.oncilck=function(){
//处理函数
}
事件的分类
鼠标事件 (mouse)
点击的事件
click 点击
dblclick 双击
mousedown 鼠标按下
mouseup 鼠标抬起
移进
mouseenter
mouseover(子元素也会触发)
移出
mouseleave
mouseout(子元素也会触发)
移动
mousemove
//获取div
vardiv=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对象里面的属性
位置相关属性
vardiv=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(varj=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
varlis=document.querySelectorAll("li")
//再给对应的li添加事件
for(vari=0;i<lis.length;i++){
//在事件里面进行操作
lis[i].onclick=function(){
//排他思想
for(varj=0;j<this.parentElement.chlidren.length;j++){
this.parentElement.chlidren.length[j].style.backgroundColor=""
}
this.style.backgroundColor="red"
}
}
下面为正常选中效果,不做事件委托
