JavaScript中的事件监听是什么

这篇文章主要介绍“JavaScript中的事件监听是什么”,在日常操作中,相信很多人在JavaScript中的事件监听是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript中的事件监听是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

南宫网站制作公司哪家好,找成都创新互联公司!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作,到程序开发,运营维护。成都创新互联公司自2013年起到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司

一、addEventListener()方法

addEventListener()方法将事件处理程序附加到指定的元素。

可以重写随机颜色,如下所示:

例:

      项目(nhooo.com)                

单击下面的按钮以更改文档的背景颜色:

                           

JavaScript中的事件监听是什么

将addEventListener()方法附加到按钮上。addEventListener()接受两个必填参数-要监听的事件和监听器回调函数。

1. 语法

element.addEventListener(event, listener, useCapture)

代码解析:

第一个参数是事件的类型(例如“ click”或“ mousemove”)。

第二个参数是事件发生时我们要调用的监听函数。

第三个参数是一个布尔值,指定是使用事件捕获。此参数是可选的。

注意:

不要为事件使用“ on”前缀。使用“ click”代替“ onclick”。

2. 将事件监听添加到元素

将所有代码放入addEventListener()方法中的匿名函数中是非常合适的,如下所示:

还可以引用外部“命名”函数:

示例

JavaScript中的事件监听是什么

3. 将多个事件监听添加到同一元素

事件监听似乎与事件处理程序属性非常相似,但是它们有一些优点。我们可以在同一元素上设置多个事件监听,如以下示例所示:

JavaScript中的事件监听是什么

可以向元素添加不同类型的事件:

示例

JavaScript中的事件监听是什么

JavaScript中的事件监听是什么

4. 传递参数

传递参数值时,请使用匿名函数,该函数使用参数调用指定的函数:

var btn = document.querySelector("button");    btn.addEventListener("click", function() {    myFunc(x, y); });

JavaScript中的事件监听是什么

5. 将事件监听添加到Window对象

此外,可以addEventListener()在文档和窗口对象上使用。

本示例使用以下addEventListener()方法将click事件附加到文档:

document.addEventListener("click", function() { alert("Hello World!!!"); });

使用该addEventListener()方法将调整大小(resize)事件附加到窗口:

window.addEventListener("resize", function() { box.innerHTML = Math.random(); });

JavaScript中的事件监听是什么

当前,事件监听是处理JavaScript中事件的最常见和首选方式。

二、removeEventListener()方法

可以使用该removeEventListener()方法从元素中删除一个或所有事件。

语法:

var box = document.getElementById("para");   // Attach an event handler to a P element with id="para"  box.addEventListener("mousemove", myFunc);   // Remove the event handler from a P element with id="para"  box.removeEventListener("mousemove", myFunc);

案例:

JavaScript中的事件监听是什么

第一个参数是事件的类型(例如“ click”或“ mousemove”)。

第二个参数是事件发生时我们要调用的函数。

到此,关于“JavaScript中的事件监听是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


本文题目:JavaScript中的事件监听是什么
网页网址:http://scyanting.com/article/jdgejs.html