事件上

事件概述:

事件是一个流程,就是一个监听(预备) 一个触发(当前内容执行了 (进行处理)
用户在页面上操作(监听这个操作), 然后我们要调用函数来处理(进行处理).
监听过程 ---- 触发过程 ---- 处理过程 这个流程就是完整的一个事件。

事件的模式

内联模式

<div onclick='方法名()'></div>

 

脚本模式

document.queryseletor('div').onclick = function(){
//操作
} //也会被解析为内联

内联里面调用的方法的this会指向window(传递this)脚本模式的this会指向当前的调用者

事件的分类:

鼠标事件 (鼠标触发的 mouse开头都是鼠标事件,使用时要加上on为前缀)

click 单击事件
dblclick 双击事件
mousemove 鼠标移动事件
mouseover 鼠标移进 (自己及自己里面的子元素都能触发)
mouseout 鼠标移出  (自己及自己里面的子元素都能触发)
mouseenter 鼠标移进 (只是自己可以触发)
mouseleave 鼠标移出  (只是自己可以触发)
mousedown 鼠标按下
mouseup 鼠标弹起
...

键盘事件 (键盘触发 key开头的都是键盘事件,都是window的事件)

keyup 弹起 (键盘上所有的键都可以触发)
keydown 按下 (键盘上所有的键都可以触发)
keytpress 字符键按下(主要用来捕获数字(注意:包括Shift+数字的符号)、字母(注意:包括大小写)、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符)

//除非是输入框 不然是不能调用键盘事件 都是window的
window.onkeydown = function(){
console.log('键盘按下');
}
window.onkeyup = function(){
console.log('键盘弹起');
}
window.onkeypress = function(){
console.log('字符键按下');
}

HTML事件 (系统事件 被动触发的,使用时用on为前缀)
load 加载
close 关闭
change 输入框的value值发送表示
select 只有输入框才能触发 (选择里面的内容)
focus 获取焦点 (单独使用,focus())
blur 失去焦点
reset 重置
submit 提交
scorll 滚动条滚动
...

// load 窗口的加载 图片的加载 等等
window.onload = function(){
console.log('窗口加载');
}
window.onunload = function(){ //清除对应的内存 销毁
console.log('窗口卸载');
}
window.onclose = function(){
console.log('窗口关闭');
}
var input = document.querySelector('input')
input.onchange = function(){ //必须要失去焦点
console.log('value值变化了');
}
input.onselect = function(){ //禁止复制粘贴
console.log('当前内容被选择');
}
input.onfocus = function(){
console.log('获取焦点');
}
input.onblur = function(){
console.log('失去焦点');
}
// form表单的事件 onsubmit 提交的时候触发 onreset 重置的时候的触发
document.querySelector('form').onsubmit = function(){
console.log('表单提交');
}
document.querySelector('form').onreset = function(){
console.log('表单重置');
}
window.onscroll = function(){ //每次滚动距离
console.log('滚动条滚动');
}

事件的组成
触发者.on+对应的事件名 = 处理的函数 对应的事件组成
触发者 一般来说是对应的元素对象
事件名 就是上述分类的事件名
处理函数 由自己定义的函数(handler)(这个函数是事件驱动执行)

posted @ 2022-08-13 09:04  B1NGO  阅读(27)  评论(0编辑  收藏  举报