本文深入探讨JavaScript事件，包括事件的组成、触发方式及常见事件类型如点击、鼠标移动和键盘事件。通过实例解析了事件处理函数的三种模式，并详细介绍了事件源对象及其属性，如坐标、按键状态等。此外，还讲解了HTML特定事件，如页面加载、表单提交、输入框聚焦等，以及如何利用事件提升用户体验。
JS事件
js事件是指我们使用鼠标或者键盘做了某些事件来触发对应的处理函数
事件由三部分组成 触发事件的元素 对应的事件函数 事件的处理函数
事件函数的特点 全小写且以on开头 onclick on事件开头 click是事件名 点击
内联模式 直接在标签内容以指定属性的方式 较少
<button onclick="alert('hello')">点击</button>
内联模式 直接在标签内容以指定属性的方式 常用1
<button onclick="handlerClick()">点击1</button>
<script>
function handlerClick(){
console.log('hello');
}
</script>
onclick是事件 表示点击事件 执行的操作
function是处理的函数 表示我们要做的事情 脚本模式（使用比较多 js和html分离 规范 常用2）
<button>点击2</button>
<script>
document.getElementsByTagName('button')[0].onclick = function(){
console.log('hello');
}
</script>
触发事件的元素 document.getElementsByTagName(‘button’)[0]
对应的事件 onclick
处理函数 function(){}
<button>点击3</button>
<script>
function handlerClick(){
console.log('hello');
}
document.getElementsByTagName('button')[3].onclick = handlerClick //不需要加() 加括号会自动执行 常用3
</script>
触发事件的元素 document.getElementsByTagName(‘button’)[0]
事件 onclick
处理函数 handlerClick
function里面是可以使用arguments来获取参数数组
<button>按钮1</button>
<script>
document.getElementsByTagName('button')[0].onclick = function(){
//获取参数 发现对应的arguments里面只有一个参数 这个参数类型为 pointerEvent
console.log(arguments);
//这个pointerEvent是什么？ 坐标事件源
console.log(arguments[0]); //获取的是一个pointerEvent 可以获取坐标 x: 34 y: 18 就是我们鼠标的坐标
//鼠标事件中
console.log(arguments[0].x); //x坐标
console.log(arguments[0].y); //y坐标
console.log(arguments[0].target); //获取触发的元素
console.log(arguments[0].type); //触发的事件
//加在键盘事件
console.log(arguments[0].altKey); //是否按了alt键 是返回true不是返回false
console.log(arguments[0].shiftKey); //是否按了shift键 是返回true不是返回false
console.log(arguments[0].ctrlKey); //是否按了ctrl键 是返回true不是返回false
//这个arguments[0]其实是拿到了我们对应的事件源对象
//但是像上面这样写太长了 所以我们有内置的事件源对象 window.event
// 鼠标按下的是那边的 0左 1滚轮 2右
console.log(arguments[0].button);
</script>
KeyboardEvent的事件源对象 键盘事件源 他也是个event
window.onkeyup = function(e){ //e是形参 随便写 一般建议写e（规范）
// console.log(arguments[0]); e是不是就相当于arguments[0] //获取第一个参数
console.log(e);
console.log(window.event); //window.event的对象其实就是这个e
e = e || window.event //window.event写后面 拿到的就是事件源对象 常用写法
console.log(e.code); //获取你按下的键
console.log(e.key); //获取你按下键的值
console.log(e.keyCode); //获取按键的ascii吗
console.log(e.altKey); //是否按下的是alt键 不常用
console.log(e.shiftKey);
console.log(e.ctrlKey);
}
事件分为三类 鼠标事件 键盘事件 html事件
鼠标事件 鼠标的一切操作都是鼠标事件
<head>
<style>
div{
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<p>sssss</p>
</div>
<form action="#" id="form">
<input type="submit">
<button type="submit">提交</button>
</form>
<input type="text" id="input">
<script>
var box = document.getElementById('box')
</script>
</body>
点击 移动 滚轮
box.onclick = function(){
console.log('点击了');
}
box.ondblclick = function(){
console.log('双击');
}
移动相关 事件名以mouse开头
鼠标按下 onmousedown 鼠标弹起 onmouseup
鼠标移出 onmouseout 鼠标移进 onmouseover 鼠标移动 onmousemove
鼠标悬停 onmouseenter 鼠标取消悬停 onmouseleave
box.onmousedown = function(){
console.log('鼠标按下了');
}
box.onmouseup = function(){
console.log('鼠标弹起了');
}
box.onmouseout = function(){
console.log('鼠标移出了');
}
box.onmouseover = function(){
console.log('鼠标移进了');
}
box.onmousemove = function(){
console.log('鼠标移动了');
}
box.onmouseleave = function(){
console.log('鼠标取消悬停了');
}
box.onmouseenter = function(){
console.log('鼠标悬停了');
}
mouseover和 mouseenter的区别是:
mouseover: 元素的子元素移入也会触发事件 (子元素会触发第二次)
mouseenter : 元素的子元素移入不会触发事件 (子元素不会触发)
键盘事件 一般操作是给整体加 onkeydown键盘按下 onkeyup键盘弹起 onkeypress按下之后弹起之前
window.onkeydown = function(){
console.log('键盘按下');
}
window.onkeyup= function(){
console.log('键盘弹起');
}
window.onkeypress = function(){
console.log('按下之后弹起之前');
}
html的事件
页面加载事件 默认触发的 执行一次
window.onload = function(){
console.log('页面加载了');
}
onsubmit事件 提交按钮触发的事件 一般触发的元素是表单form
document.getElementById('form').onsubmit = function () {
console.log('提交了');
}
失去焦点 onblur 获取焦点 onfocus （常用于input）
document.getElementById('input').onfocus = function(){
console.log('获取焦点');
}
document.getElementById('input').onblur = function(){
console.log('失去焦点');
}
html事件的补充
<body>
<input type="text" id="text">
<textarea name="" id="textarea" cols="30" rows="10">
水水大大大苏打大
</textarea>
<form action="">
<input type="reset">
</form>
<div style="height:3000px"></div>
<script>
var text = document.getElementById('text')
var textarea = document.getElementById('textarea')
</script>
</body>
重点 onchange 修改 当里面的值value发生变化以后 失去焦点的时候触发 加给表单元素
text.onchange = function(){
console.log('修改事件');
}
onscroll 滚动栏滚动 重点
window.onscroll = function(){
var scroll = document.documentElement.scrollTop || document.body.scrollTop
console.log(scroll);
}
/onselect 选择 （一般用于复制粘贴 input textarea） 半重点
textarea.onselect = function(){
console.log('选择了');
}
unload 卸载 页面被卸载的时候 组件被卸载
window.unload = function(){
console.log('页面卸载了');
}
reset 重置的时候 加给form
document.getElementsByTagName('form')[0].onreset = function(){
console.log('重置');
}
event的相关属性
<head>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
background-color: green;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.getElementsByTagName('div')[0]
</script>
</body>
鼠标的事件源对象
//注释后面带有数字的重点记
div.onmousedown = function(e){
e = e || window.event //e表示事件源对象
//鼠标点击的键 button 0表示左键 1表示滚轮 2表示右键
console.log(e.button);//1
console.log(e.target); //目标元素 显示是div 2
console.log(e.type); //事件类型 click 3
console.log(e.x); //获取鼠标的x坐标 基于可视区域 4
console.log(e.y); //获取鼠标的y坐标 基于可视区域 5
console.log(e.pageX); //获取鼠标的x坐标 基于页面的可视区域 6
console.log(e.pageY); //获取鼠标的y坐标 基于页面的可视区域 7
console.log(e.offsetX); //获取鼠标的x坐标 基于div偏移的x 离div这个盒子的左上角顶点（不会计算margin） 8
console.log(e.offsetY); //获取鼠标的y坐标 基于div偏移的y 离div这个盒子的左上角顶点 9
console.log(e.screenX); //screen获取屏幕信息 在屏幕上的x 10
console.log(e.screenY); //screen获取屏幕信息 在屏幕上的y 11
console.log(e.clientX) //获取鼠标的x坐标 基于当前可视区域的x 12
console.log(e.clientY) //获取鼠标的x坐标 基于当前可视区域的y 13
console.log(e.path) //元素路径
console.log(e.ctrlKey); //判断是否按着ctrl键 按着为true 没有为false 14
console.log(e.shiftKey); //判断是否按着shift键 15
console.log(e.altKey); //判断是否按着alt键 16
}
键盘的事件源对象
window.onkeydown = function(e){
e = e || windwo.event
console.log(e.key); //获取按键的值 17
console.log(e.code); //获取按键 18
console.log(e.keyCode); //获取按键的ascii码 不区分大小写（只返回大写）19
console.log(e.ctrlKey); //判断是否按着ctrl键 按着为true 没有为false
console.log(e.shiftKey); //判断是否按着shift键
console.log(e.altKey); //判断是否按着alt键
console.log(e.charCode); //字符编码 只有在按字符的时候才有 一般是加给keypress事件
console.log(e.target); //目标元素 显示是body
console.log(e.type); //事件类型 keyDown
}
在弹起之前按下之后 针对字符按键 charCode只在这里有效（其他按键不会执行）
window.onkeypress = function(e){
console.log('调用了');
console.log(e.charCode); //他会返回对应的字符的编码 ascii码 区分大小写 20
}
this
<body>
<a href="#">1</a><a href="#">2</a><a href="#">3</a>
<b>a</b><b>b</b><b>c</b>
<script>
var a = document.getElementsByTagName('a')
var b = document.getElementsByTagName('b')
</script>
</body>
this会执行触发的元素 e.target
function handlerClick(){
console.log('a点击了'+this.innerText);
}
for(var i in a){
a[i].onclick = handlerClick //相当于下面的
// a[i].onclick = function handlerClick(){
// console.log('a点击了'+this.innerText); //this指向a[i] 你点了谁就指向谁
// }
}
外层没有对象包的情况下this指向window 有对象包指向该对象
function handlerClick(that){
console.log('a点击了'+that.innerText);
}
for(var i in b){
console.log(this); //指向window的 外层没有对象包的情况下this指向window 有对象包指向该对象
b[i].onclick = handlerClick(this) //后面加()表示调用 这个里面的this指向window的
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
