event事件(上)
事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作:
-
每当页面加载时应该做的事情
-
当页面被关闭时应该做的事情
-
当用户点击按钮时应该被执行的动作
-
当用户输入数据时应该被验证的内容
-
等等
让 JavaScript 处理事件的不同方法有很多:
-
HTML 事件属性可执行 JavaScript 代码
-
HTML 事件属性能够调用 JavaScript 函数
-
您能够向 HTML 元素分配自己的事件处理函数
-
您能够阻止事件被发送或被处理
-
等等
事件
概述:
事件是您在编程时系统内发生的动作或者发生的事情,系统响应事件后,如果需要,您可以某种方式对事件做出回应。
JS 事件(event)是当用户与网页进行交互时发生的事情,例如单机某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时,您可以使用 JavaScript 中的事件处理程序(也可称为事件监听器)来检测并执行某些特定的程序。
事件是一个异步机制。他相当于一个 执行者执行 -- 观察者观察 --- 处理函数执行 这个流程称为事件。
事件的组成
事件名字 (内置的) clik
执行对象 (元素对象) button
处理函数 (自定义函数) 后续的函数
观察者 (js的事件引擎)
注:在js(JavaScript)内书写的事件,他的观察者都是事件引擎。需要关注的是前面的三个内容(事件名、执行者、处理函数)
事件的声明书写方式
内联模式(写在标签内部)
内联模式就是在 onclick 书写中
<!-- 内联模式就是在onclick 中 书写、设置对应的代码 --> <button onclick="alert('你好')">点我</button> <button onclick="fn(1)">点我</button> <script> function fn(arg){ alert('我是函数执行'+arg); }
脚本模式(在script 中 常用)
1、事件名字 2、执行对象 3、处理函数
//语法 事件名、 执行对象、 处理函数 var btn = document.getElementsByTagName('button')[2] //执行对象.on+事件名 = 处理函数 btn.onclick = function(){ console.log('你好'); } function handler(){ console.log('处理函数执行了'); } btn.onclick = handler
事件名的分类
一般情况下事件的名称都是以单词 on 开头的,例如点击事件 onclick、页面加载事件 onload 等。
下表中列举了一些 JavaScript 中常用的事件:
事件 | 描述 | |
---|---|---|
onclick | 鼠标、键盘事件 | 点击鼠标时触发此事件 |
ondblclick | 双击 鼠标时触发此事件 | |
onmousedown | 按下 鼠标时触发此事件 | |
onmouseup | 弹起 鼠标按下后又松开时触发此事件 | |
onmouseover | 移入 当鼠标移动到某个元素上方时触发此事件 | |
onmousemove | 移出 移动鼠标时触发此事件 | |
onmouseout | 移出 当鼠标离开某个元素范围时触发此事件 | |
onkeypress | 字符串当按下并松开键盘上的某个键时触发此事件 | 键盘事件 |
onkeydown | 按下 当按下键盘上的某个按键时触发此事件 | 键盘事件 |
onkeyup | 弹起 当放开键盘上的某个按键时触发此事件 | 键盘事件 |
窗口事件 | onabort | 图片在下载过程中被用户中断时触发此事件 |
onbeforeunload | 当前页面的内容将要被改变时触发此事件 | |
onerror | 出现错误时触发此事件 | |
onload | 页面内容加载完成时触发此事件 | |
onmove | 当移动浏览器的窗口时触发此事件 | |
onresize | 当改变浏览器的窗口大小时触发此事件 | |
onscroll | 当滚动浏览器的滚动条时触发此事件 | |
onstop | 当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件 | |
oncontextmenu | 当弹出右键上下文菜单时触发此事件 | |
onunload | 改变当前页面时触发此事件 | |
表单事件 | onblur | 当前元素失去焦点时触发此事件 |
onchange | 当前元素失去焦点并且元素的内容发生改变时触发此事件 | |
onfocus | 当某个元素获得焦点时触发此事件 | |
onreset | 当点击表单中的重置按钮时触发此事件 | |
onsubmit | 当提交表单时触发此事件 |
鼠标事件(鼠标触发的 mouse)
-
click 单击事件
-
dbclik 双击事件
-
mousedown 按下
-
mouseup 弹起
-
mouseenter 移入
-
mouseleave 移出
-
mouseover 移入
-
mouseout 移出
-
mousemove 移动
-
contextmenu 右键点击
注意事项:
-
click和对应 mousedown和mouseup的执行顺序 (mousedown-->mouseup-->click)
按下鼠标 弹起 点击
-
mouseenter(mouseleave)和mouseover(mouseout)的区别 (mouseenter 子元素不会触发 mouseover 子元素会触发)
-
<div>我是一个div <p>你好</p> </div> <script> //获取div var div = document.querySelector('div') //脚本模式 元素对象.on+事件名 = 处理函数 div.onclick = function(){ console.log('单击事件执行了'); } //双击事件必定触发单击 div.ondblclick = function(){ console.log('双击事件执行了'); } //鼠标的按下和弹起 执行顺序 按下 -- 弹起 -- 单击 div.onmousedown = function(){ console.log('鼠标按下'); } div.onmouseup = function(){ console.log('鼠标弹起'); } //鼠标的移进和移出 //enter和leave 进入子元素不会触发 div.onmouseenter = function(){ console.log('鼠标移进去了'); } div.onmouseleave = function(){ console.log('鼠标移出了'); } //over和out 进入子元素也会触发 div.onmouseover = function(){ console.log('鼠标over移入了'); } div.onmouseout = function(){ console.log('鼠标out移出了'); } //鼠标的移动 div.onmousemove = function(){ console.log('鼠标移动了'); } //鼠标点击右键 (点击事件不会触发) div.oncontextmenu = function(){ console.log('右键点击了'); } </script>
键盘事件(键盘触发的 key)
keydown 按下
keyup 弹起
keypress 字符串(除功能键的其他键)
注:
-
执行顺序 keydown-->keypress-->keyup
-
keypress 一定会触发 keydown
<input type="text"> <script> //获取输入框 var input = document.querySelector('input') //键盘相关事件 input.onkeydown = function(){ console.log('键盘按下'); } //在input 弹起会出现俩次 input.onkeyup = function(){ console.log('键盘弹起'); } //字符键按下 (除了功能键) input.onkeypress = function(){ console.log('字符键按下'); } window.onkeypress = function(){ console.log('在window上触发了keypress事件'); } </script>
HTML 事件 (html 中自带的一些事件 (只能用于专门 HTML))
window 的事件
-
加载事件 load
-
卸载事件 unload
-
关闭窗口 onclose
-
打印之前调用的事件 onbeforeprint
-
卸载之前调用的事件 onbeforeunload
-
滚动拦发生变化的事件 onseroll
//加载事件 window.onload = function(){ console.log('hello'); } //卸载事件(刷新) window.onunload = function(){ console.log('卸载'); } //关闭窗口事件 (清除相关缓存和对应的资源操作) window.onclose = function(){ console.log('关闭'); } //打印之前调用 调用print方法之前 更改打印的然后继续打印 window.onbeforeprint = function(){ console.log('打印了'); } //在卸载之前调用 将一些内容回收 window.onbeforeunload = function(){ console.log('卸载之前'); } //滚动栏滚动 window.onscroll = function(){ console.log('滚动栏位置发生变化'); } //加载事件的其他使用 var image = new Image() //构建一个图片对象 image.onload = function(){ //如果图片加载好了 image.src = '图片地址' //给图片设置对应的src地址 } //onscroll的其他使用 document.querySelector('div').onscroll = function(){ console.log('div的滚动栏滚动了'); }
表单的事件
-
submit 表单提交事件
-
reset 表单重置事件
-
select 内容被选中(只对于输入框和文本域)
-
clange 表单的value值发生变化
-
input 可输入的表单标签里面进行输入
-
blur 失去焦点
-
focus 获取焦点
//表单相关的事件 //加给整个form表单的事件 document.forms[0].onsubmit = function(){ console.log('提交了'); } document.forms[0].onreset = function(){ console.log('重置了'); } //change value值发生变化 失去焦点 document.querySelector('input').onchange = function(){ console.log('值变化了'); } // input 输入对应的值的时候调用 document.querySelector('input').oninput = function(){ console.log('输入值'); } //select 选择里面的内容 document.querySelector('input').onselect = function(){ console.log('选择值了'); } //失去焦点 document.querySelector('input').onblur = function(){ console.log('失去焦点了'); } //聚焦 document.querySelector('input').onfocus = function(){ console.log('获取焦点了'); }
event 事件源对象
概念
Event 对象代表事件的状态,当dom tree中某个事件被触发的时候,会同时自动产生一个用来描述事件所有的相关信息(比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。)的对象,这个对象就是event(事件对象)。 事件通常与函数结合使用,函数不会在事件发生前被执行!
event 被称为事件源对象,他是一个全局的内置对象(属于window),他里面包含了一些关于事件执行的相关的属性。
处理函数中 Arguments
处理函数也是一个函数,函数就具备一个arguments的属性。argments是一个伪数组。那么就可以知道对应的处理函数里面也拥有arguments
var btn = document.querySelector('button') btn.onclick = function(){ //点击事件触发以后对应的arguments里面有一个对应的pointEvent的对象 console.log('arguments',arguments); console.log(`arguments[0]`, arguments[0]); //这个对象是在arguments里面存在第一位里面以属性为主 那么这个对象表示什么 //这个参数其实就对应的事件的一些内容 称为事件源对象 event } window.onkeydown = function(){ console.log('arguments',arguments); //keyboardEvent 键盘的事件源对象 console.log(`arguments[0]`, arguments[0]); }
从上述代码可得到对应的事件执行的处理函数里面会传递一个参数 ,这个参数的类型是一个event。这个处理函数的arguments数组里面只有一个元素。
可以简写为
//这个地方的e 一般写做 e 或者是 event btn.onclick = function(e){ //这个地方的e表示是第一个参数 也就是对应的event对象 这个event在这个里面有兼容问题 //兼容写法 e = e || window.event //这个e表示的就是第一个参数 那么他也就是我们对应的event对象 console.log(`e`, e); }
特点
1.arguments对象和Function是分不开的。
2.因为arguments这个对象不能显式创建。
3.arguments对象只有函数开始时才可用。
使用方法
虽然arguments对象并不是一个数组(类数组),但是访问单个参数的方式与访问数组元素的方式相同
event的常用属性
鼠标坐标的相关属性
-
screenX 表示鼠标离屏幕的X距离
-
screenY 表示鼠标离屏幕的Y距离
-
pageX 表示当前的鼠标离页面的X距离(包含卷起部分)
-
pageY 表示当前的鼠标离页面的Y距离(包含卷起部分)
-
clientX 表示鼠标离页面可视区的X距离
-
clientY 表示鼠标离页面可视区的Y距离
-
offsetX 表示鼠标离父元素偏移的X距离
-
offsetY 表示鼠标离父元素偏移的Y距离
按钮辅助的相关属性
ctrlKey 是否按下了ctrl键 altKey 是否按下了alt键 shiftKey 是否按下shift键
//辅助的按键属性 返回布尔类型值 console.log(e.ctrlKey);//是否长按ctrl console.log(e.altKey);//是否长按alt console.log(e.shiftKey);//是否长按shift
鼠标相关的属性
-
button 按下是那个键
//按下的键是什么 三个值 0 1 2
console.log(e.button);//左键0 中间滚轮1 右键2
事件及相关触发的属性
-
type 当前的事件类型
//事件类型 返回事件名 console.log(e.type); //click
-
target 表示当前事件的触发对象
-
currentTarget 表示加事件的元素
//触发者元素 console.log(e.target); //加事件的元素 console.log(e.currentTarget);
键盘相关的属性
-
key 表示当前按下的键的字符(区分大小写)
-
keyCode (在keydown里面 不区分大小 全部是大写的ascii码)
-
code (key+大写的字符)
-
charCode (在keypress里面才管用 他区分大小写 返回对应的ascii码)
window.onkeypress = function(e){ console.log(e.code);//当前的按钮按下键是哪个一个 返回的是一个key+大写字母 console.log(e.keyCode);//当前按下键的大写字母 ascii码 console.log(e.charCode); //当前字符的ascii码 keypress里面 console.log(e.key);//表示当前按下的键 (兼容问题) }
事件委托机制(事件代理)
概述:将对应的事件委托给对应的父元素,然后通过对应的e.target获取实际的触发元素进行操作。
示例
//事件委托的写法 //获取需要加事件的父元素 var ul = document.querySelector('ul') //给ul添加事件 //给父元素添加事件 //在内部判断触发元素 e.target //对应执行操作 ul.onclick = function (e) { e = e || window.event //判断当前触发元素是否为li if (e.target.tagName == 'LI') { //排他思想 //把所有的li的class清除 for (var item of this.children) { item.className = '' } e.target.className = 'active' } }
事件委托的运用场景
在一个父元素里面有多个子元素要添加相同的事件的时候