JS监听事件的常用方式有哪些

这篇文章给大家介绍了“JS监听事件的常用方法有哪些”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

1. 什么是事件监听 ？

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

那么，它的常用方法有哪些呢 ？让我们一起来看看吧 ！

2. DOM0 级事件监听

DOM0 级事件监听：

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

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

事件名事件描述onkeypress当键盘上的某个按键被按下

（系统按键无法识别 e.g.，F1 这类的按键）onkeydown当键盘上的某个按键被按下

（系统按键可以识别，并且先于onkeypress发生）onkeyup当键盘上的某个按键被松

事件名事件描述oninput当用于正在修改表单域的内容onchange当用户改变了表单域的内容onfocus当元素获得焦点

（e.g.，tab键或鼠标点击）onblur当元素失去焦点onsubmit当表单被提交onreset当表单被重置3. DOM2 级事件监听

DOM2 级事件监听：

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

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

type：表示监听事件类型的字符串

listener：事件监听函数

useCapture：当写true时，进行的是事件捕获阶段，默认为false，事件冒泡阶段

EventTarget.addEventListener(type, listener, useCapture);

对于常用的type：即把常用的 DOM0 级的onxxx的on去掉后就可以了，即原来的事件名。

例如：

target.addEventListener('click', () => {

console.log("我被点击了");

});

// 这里第三个参数没写，默认监听冒泡阶段，如果要监听捕获阶段，写上 true

以上就是关于“JS监听事件的常用方法有哪些”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，小编每天都会为大家更新不同的知识。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!