javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript的事件监听

JavaScript的事件监听你了解吗

作者:CSPsy

这篇文章主要为大家详细介绍了JavaScript的事件监听,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

1. 什么是事件监听 ?

事件监听就是计算机对事件进行监听,知道什么时候发生了这个事件,从而执行一些写好的程序。

那么,它的常用方法有哪些呢 ?让我们一起来看看吧 !

2. DOM0 级事件监听

DOM0 级事件监听:

给元素设置它们的onxxx属性(e.g., onclick)

对于 DOM0 级事件监听 ,它只能监听冒泡阶段

2.1) 常见的页面事件监听

事件名事件描述
onload当页面或图像被完成加载
onunload当用户退出页面

2.2) 常见的鼠标事件监听

事件名事件描述
onclick当鼠标单击某个元素
ondblclick当鼠标双击某个元素
onmousedown当鼠标按键在某个元素上按下
onmouseup当鼠标按键在某个元素上松开
onmousemove当鼠标按键在某个元素上移动
onmouseenter当鼠标移动到某个元素上
(进入到某个元素区域时)
onmouseleave当鼠标离开某个元素

其中onmouseenteronmouseover类似,onmouseleaveonmouseout类似;

它们两者的区别:onmouseenteronmouseleave事件不支持冒泡,另外两个支持事件冒泡;

所以,onmouseenteronmouseleave搭配使用,onmouseoveronmouseout搭配使用

2.3) 常见的键盘事件监听

事件名事件描述
onkeypress当键盘上的某个按键被按下
(系统按键无法识别 e.g.,F1 这类的按键)
onkeydown当键盘上的某个按键被按下
(系统按键可以识别,并且先于onkeypress发生)
onkeyup当键盘上的某个按键被松开

2.4) 常见的表单事件监听

事件名事件描述
oninput当用于正在修改表单域的内容
onchange当用户改变了表单域的内容
onfocus当元素获得焦点
(e.g.,tab键或鼠标点击)
onblur当元素失去焦点
onsubmit当表单被提交
onreset当表单被重置

3. DOM2 级事件监听

DOM2 级事件监听:

EventTarget.addEventListener()方法将指定的监听器注册到EventTarget上,当该对象触发指定的事件时,指定的回调函数就会被执行。

它有着几种写法,想了解别的写法可以看看 MDN 官方文档,这里介绍的写法如下:

EventTarget.addEventListener(type, listener, useCapture);

对于常用的type:即把常用的 DOM0 级的onxxxon去掉后就可以了,即原来的事件名。

例如:

target.addEventListener('click', () => {
	console.log("我被点击了");
});
// 这里第三个参数没写,默认监听冒泡阶段,如果要监听捕获阶段,写上 true

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!     

您可能感兴趣的文章:
阅读全文