JS事件介绍_js 事件理解-优快云博客

本文深入探讨JavaScript事件，包括事件的组成、触发方式及常见事件类型如点击、鼠标移动和键盘事件。通过实例解析了事件处理函数的三种模式，并详细介绍了事件源对象及其属性，如坐标、按键状态等。此外，还讲解了HTML特定事件，如页面加载、表单提交、输入框聚焦等，以及如何利用事件提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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的 
}