JavaScript的事件监听实例分析

发布时间:2022-03-08 09:11:09 作者:iii
来源:亿速云 阅读:128

这篇文章主要介绍了JavaScript的事件监听实例分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇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

 

关于“JavaScript的事件监听实例分析”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“JavaScript的事件监听实例分析”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. javascript中事件监听与事件委托的示例分析
  2. javascript组合按键事件监听的示例分析

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:JavaScript怎么压缩并加密图片

下一篇:Python中怎么使用matplotlib给柱状图添加数据标签bar_label()

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》