深入理解JavaScript中的事件
发布时间：2025-05-21 点击：12
在本文中，我们将讨论事件处理程序、事件监听器和事件对象。我们还将介绍三种不同的处理事件的方法，以及一些最常见的事件。通过了解事件，您将能够为用户提供更具交互性的web体验。
事件是发生在浏览器中的操作，可以由用户或浏览器本身发起。以下是一些发生在网站上的常见事件:
页面完成加载
用户单击一个按钮
用户将鼠标悬停在下拉列表中
用户提交表单
用户按下键盘上的键
通过对在事件上执行的javascript响应进行编码，开发人员可以向用户显示消息，验证数据，对按钮单击做出反应以及执行许多其他操作。
事件处理程序和事件侦听器
当用户单击按钮或按下某个键时，将触发一个事件。这些分别称为单击事件或按键事件。
一个事件处理程序是运行在一个事件触发javascript函数。
一个事件侦听器附加一个响应界面的元素，它允许特定元素等待和“监听”给定的事件触发。
将事件分配给元素有三种方法：
内联事件处理程序
事件处理程序属性
事件听众
我们将详细介绍这三种方法，以确保您熟悉触发事件的每种方法，然后讨论每种方法的优缺点。
内联事件处理程序属性
要开始学习事件处理程序，我们首先考虑内联事件处理程序。让我们从一个非常基本的例子开始，它由一个按钮元素和一个p元素组成。我们希望用户单击按钮来更改p的文本内容。
让我们从一个带有按钮的html页面开始。我们将引用一个我们稍后会添加代码的javascript文件。
<!doctype html><html> <head> <title>events</title></head> <body> <!-- add button --> <button>click me</button> <p>try to change me.</p> </body> <!-- reference javascript file --> <script src="js/events.js"></script></html>直接在按钮上，我们将添加一个名为onclick的属性。属性值将是我们创建的一个名为changetext()的函数。
<!doctype html><html> <head> <title>events</title></head> <body> <button onclick="changetext()">click me</button> <p>try to change me.</p> </body> <script src="js/events.js"></script></html>让我们创建events.js文件，它位于这里的js/目录中。在其中，我们将创建changetext()函数，它将修改p元素的textcontent。
// function to modify the text content of the paragraphconst changetext = () = >{ const p = document.queryselector('p'); p.textcontent = "i changed because of an inline event handler.";}首次加载events.html，您会看到如下所示的页面：
但是，当您或其他用户单击按钮时，p标记的文本将从try to change me更改为。我改变了，因为内联事件处理程序。
内联事件处理程序是开始理解事件的一种直接方法，但是通常不应该超出测试和教育目的而使用它们。
您可以将内联事件处理程序与html元素上的内联css样式进行比较。维护单独的类样式表比在每个元素上创建内联样式更为实际，就像维护完全通过单独的脚本文件处理的javascript而不是向每个元素添加处理程序一样。
事件处理程序属性
内联事件处理程序的下一步是事件处理程序属性。这与内联处理程序非常相似，只是我们在javascript中设置了元素的属性，而不是html中的属性。
这里的设置是一样的，只是我们不再在标记中包含onclick="changetext()":
… < body ><button > click me < /button> <p>i will change.</p ></body>…/我们的函数也将保持类似，只是现在我们需要访问javascript中的button元素。我们可以简单地访问onclick，就像访问style或id或任何其他元素属性一样，然后分配函数引用。
// function to modify the text content of the paragraphconst changetext = () = >{ const p = document.queryselector('p'); p.textcontent = "i changed because of an event handler property.";}// add event handler as a property of the button elementconst button = document.queryselector('button');button.onclick = changetext;注意:事件处理程序不遵循大多数javascript代码遵循的camelcase约定。注意代码是onclick，而不是onclick。
当你第一次载入网页时，浏览器会显示以下内容:
现在，当你点击这个按钮，它会有一个类似的效果:
请注意，当将函数引用传递给onclick属性时，我们不包含括号，因为我们当时没有调用函数，而只是传递了对它的引用。
事件处理程序属性的可维护性略好于内联处理程序，但它仍然存在一些相同的障碍。例如，尝试设置多个单独的onclick属性将导致覆盖除最后一个外的所有属性，如下所示。
const p = document.queryselector('p');const button = document.queryselector('button');const changetext = () = >{ p.textcontent = "will i change?";}const alerttext = () = >{ alert('will i alert?');}// events can be overwrittenbutton.onclick = changetext;button.onclick = alerttext;在上面的例子中，单击按钮只会显示一个警告，而不会更改p文本，因为alert()代码是最后添加到属性的代码。
了解了内联事件处理程序和事件处理程序属性之后，让我们转向事件侦听器。
事件监听器
javascript事件处理程序的最新添加是事件侦听器。事件侦听器监视元素上的事件。我们将使用addeventlistener()方法侦听事件，而不是直接将事件分配给元素上的属性。
addeventlistener()接受两个强制参数——要侦听的事件和侦听器回调函数。
事件监听器的html与前面的示例相同。
… < button > click me < /button> <p>i will change.</p > …我们仍然将使用与以前相同的changetext()函数。我们将把addeventlistener()方法附加到按钮上。
// function to modify the text content of the paragraphconst changetext = () = >{ const p = document.queryselector('p'); p.textcontent = "i changed because of an event listener.";}// listen for click eventconst button = document.queryselector('button');button.addeventlistener('click',
云存储分类
网站非常慢国内和香港访问都慢
Linux手动释放缓存的方法
今天网站打开速度超慢看一下什么情况吧
网站经常卡死-云服务器问题
云服务器可以挂机宝
魔方云服务器在哪买
谷歌浏览器如何用ie内核 教你使用谷歌浏览器ie内核的方法
事件是发生在浏览器中的操作，可以由用户或浏览器本身发起。以下是一些发生在网站上的常见事件:
页面完成加载
用户单击一个按钮
用户将鼠标悬停在下拉列表中
用户提交表单
用户按下键盘上的键
通过对在事件上执行的javascript响应进行编码，开发人员可以向用户显示消息，验证数据，对按钮单击做出反应以及执行许多其他操作。
事件处理程序和事件侦听器
当用户单击按钮或按下某个键时，将触发一个事件。这些分别称为单击事件或按键事件。
一个事件处理程序是运行在一个事件触发javascript函数。
一个事件侦听器附加一个响应界面的元素，它允许特定元素等待和“监听”给定的事件触发。
将事件分配给元素有三种方法：
内联事件处理程序
事件处理程序属性
事件听众
我们将详细介绍这三种方法，以确保您熟悉触发事件的每种方法，然后讨论每种方法的优缺点。
内联事件处理程序属性
要开始学习事件处理程序，我们首先考虑内联事件处理程序。让我们从一个非常基本的例子开始，它由一个按钮元素和一个p元素组成。我们希望用户单击按钮来更改p的文本内容。
让我们从一个带有按钮的html页面开始。我们将引用一个我们稍后会添加代码的javascript文件。
<!doctype html><html> <head> <title>events</title></head> <body> <!-- add button --> <button>click me</button> <p>try to change me.</p> </body> <!-- reference javascript file --> <script src="js/events.js"></script></html>直接在按钮上，我们将添加一个名为onclick的属性。属性值将是我们创建的一个名为changetext()的函数。
<!doctype html><html> <head> <title>events</title></head> <body> <button onclick="changetext()">click me</button> <p>try to change me.</p> </body> <script src="js/events.js"></script></html>让我们创建events.js文件，它位于这里的js/目录中。在其中，我们将创建changetext()函数，它将修改p元素的textcontent。
// function to modify the text content of the paragraphconst changetext = () = >{ const p = document.queryselector('p'); p.textcontent = "i changed because of an inline event handler.";}首次加载events.html，您会看到如下所示的页面：
但是，当您或其他用户单击按钮时，p标记的文本将从try to change me更改为。我改变了，因为内联事件处理程序。
内联事件处理程序是开始理解事件的一种直接方法，但是通常不应该超出测试和教育目的而使用它们。
您可以将内联事件处理程序与html元素上的内联css样式进行比较。维护单独的类样式表比在每个元素上创建内联样式更为实际，就像维护完全通过单独的脚本文件处理的javascript而不是向每个元素添加处理程序一样。
事件处理程序属性
内联事件处理程序的下一步是事件处理程序属性。这与内联处理程序非常相似，只是我们在javascript中设置了元素的属性，而不是html中的属性。
这里的设置是一样的，只是我们不再在标记中包含onclick="changetext()":
… < body ><button > click me < /button> <p>i will change.</p ></body>…/我们的函数也将保持类似，只是现在我们需要访问javascript中的button元素。我们可以简单地访问onclick，就像访问style或id或任何其他元素属性一样，然后分配函数引用。
// function to modify the text content of the paragraphconst changetext = () = >{ const p = document.queryselector('p'); p.textcontent = "i changed because of an event handler property.";}// add event handler as a property of the button elementconst button = document.queryselector('button');button.onclick = changetext;注意:事件处理程序不遵循大多数javascript代码遵循的camelcase约定。注意代码是onclick，而不是onclick。
当你第一次载入网页时，浏览器会显示以下内容:
现在，当你点击这个按钮，它会有一个类似的效果:
请注意，当将函数引用传递给onclick属性时，我们不包含括号，因为我们当时没有调用函数，而只是传递了对它的引用。
事件处理程序属性的可维护性略好于内联处理程序，但它仍然存在一些相同的障碍。例如，尝试设置多个单独的onclick属性将导致覆盖除最后一个外的所有属性，如下所示。
const p = document.queryselector('p');const button = document.queryselector('button');const changetext = () = >{ p.textcontent = "will i change?";}const alerttext = () = >{ alert('will i alert?');}// events can be overwrittenbutton.onclick = changetext;button.onclick = alerttext;在上面的例子中，单击按钮只会显示一个警告，而不会更改p文本，因为alert()代码是最后添加到属性的代码。
了解了内联事件处理程序和事件处理程序属性之后，让我们转向事件侦听器。
事件监听器
javascript事件处理程序的最新添加是事件侦听器。事件侦听器监视元素上的事件。我们将使用addeventlistener()方法侦听事件，而不是直接将事件分配给元素上的属性。
addeventlistener()接受两个强制参数——要侦听的事件和侦听器回调函数。
事件监听器的html与前面的示例相同。
… < button > click me < /button> <p>i will change.</p > …我们仍然将使用与以前相同的changetext()函数。我们将把addeventlistener()方法附加到按钮上。
// function to modify the text content of the paragraphconst changetext = () = >{ const p = document.queryselector('p'); p.textcontent = "i changed because of an event listener.";}// listen for click eventconst button = document.queryselector('button');button.addeventlistener('click',
云存储分类
网站非常慢国内和香港访问都慢
Linux手动释放缓存的方法
今天网站打开速度超慢看一下什么情况吧
网站经常卡死-云服务器问题
云服务器可以挂机宝
魔方云服务器在哪买
谷歌浏览器如何用ie内核 教你使用谷歌浏览器ie内核的方法
上一篇：昆山如何去注册商标