JavaScript中的事件(event)是用户与浏览器交互的一种方式，它允许开发者在特定时刻对网页进行操作，事件可以分为两种类型：鼠标事件和键盘事件，本文将详细介绍如何使用JavaScript的事件处理机制。
什么是事件
事件是用户与浏览器交互的一种方式，例如点击按钮、滚动页面等，当这些事件发生时，浏览器会自动触发相应的事件处理函数，通过编写事件处理函数，我们可以在事件发生时执行特定的操作，例如改变页面内容、发送AJAX请求等。
如何创建事件处理函数
要创建一个事件处理函数，首先需要获取到对应的DOM元素，可以通过以下方法之一来实现：
1、通过元素的ID获取：document.getElementById("elementId")
2、通过元素的类名获取：document.getElementsByClassName("className")
3、通过元素的标签名获取：document.getElementsByTagName("tagName")
4、通过CSS选择器获取：document.querySelector("selector") 或 document.querySelectorAll("selector")
获取到元素后，可以使用element.addEventListener()方法为该元素添加事件监听器，为按钮添加点击事件监听器：
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("按钮被点击了！");
});
常见的事件类型及处理函数
1、click:鼠标点击事件
2、mousedown:鼠标按下事件
3、mouseup:鼠标松开事件
4、mousemove:鼠标移动事件
5、keydown:键盘按下事件
6、keyup:键盘松开事件
7、keypress:键盘按键事件
8、load:页面加载完成事件
9、unload:页面卸载事件
10、scroll:滚动事件
11、resize:窗口大小调整事件
12、change:输入框内容变化事件(如select、input)
13、submit:表单提交事件(如form)
14、reset:表单重置事件(如form)
15、dblclick:双击事件(如img)
16、contextmenu:右键菜单事件(如img)
17、hover:鼠标悬停事件(如a)
18、focus:输入框获得焦点事件(如input)
19、blur:输入框失去焦点事件(如input)
20、selectstart:文本框内容开始被选中事件(如input)
21、cut:剪切事件(如textarea)
22、copy:复制事件(如textarea)
23、paste:粘贴事件(如textarea)
24、beforecopy:复制前事件(如textarea)
25、aftercopy:复制后事件(如textarea)
26、beforecut:剪切前事件(如textarea)
27、aftercut:剪切后事件(如textarea)
28、beforepaste:粘贴前事件(如textarea)
29、afterpaste:粘贴后事件(如textarea)
30、input:键盘输入事件(不区分具体按键类型)
31、compositionstart:输入法编辑开始事件(如input)
32、compositionupdate:输入法编辑更新事件(如input)
33、compositionend:输入法编辑结束事件(如input)
34、animationstart:动画开始事件(如div)
35、animationiteration:动画迭代事件(如div)
36、animationend:动画结束事件(如div)
37、transitionend:过渡结束事件(如div)
38、pointerlockchange:指针锁定状态改变事件(如canvas)
39、pointerlockerror:指针锁定错误事件(如canvas)
40、touchstart:触摸开始事件(如div)
41、touchmove:触摸移动事件(如div)
42、touchend:触摸结束事件(如div)
43、touchcancel:触摸取消事件(如div)
44、wheel:滚轮滚动事件(如div或img)
45、resizeObserverCallback:ResizeObserver回调函数触发时机为“运行时”，即每次ResizeObserver实例中的目标元素尺寸发生变化时都会调用该回调函数，这个回调函数接收四个参数：target、handler、rootTarget、array。target为目标元素；handler为ResizeObserver实例；rootTarget为观察根目标元素；array为包含所有观察目标的数组，如果不需要观察目标元素的变化，可以将该回调函数设置为空函数，为一个div元素添加滚动条宽度变化的监听器：
var div = document.getElementById("myDiv");
var observer = new ResizeObserver(function(entries) {
for (var entry of entries) {
console.log("滚动条宽度变化了，新值为：" + entry.contentRect[this.widthProperty]);
}
});
observer.observe(div); // 开始观察div元素的大小变化，包括其子元素的大小变化，如果只需要观察div本身的大小变化，可以传入div作为第二个参数，如果不需要观察任何元素的大小变化，可以传入null作为第二个参数，注意，传入null后，ResizeObserver实例将无法继续工作，为了避免内存泄漏，应该在不再需要观察时调用observer.disconnect()方法，当div不再需要观察大小时，调用以下代码断开观察关系： observer
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/137518.html
微信扫一扫 