您可以在事件发生时执行JavaScript,例如用户单击鼠标,加载图像,当用户单击HTML元素,提交HTML表单等时。事件是文档对象模型(DOM)级别的一部分3,每个HTML元素都包含一组事件,这些事件可以触发JavaScript代码。
让我们看一个示例,它允许您从事件处理程序中调用函数以更改文本
<!DOCTYPE html> <html> <body> <p onclick="myEvent(this)">Click me</p> <script> function myEvent(id) { id.innerHTML = "Welcome!"; } </script> </body> </html>
在这里,我们将看到一些示例来了解Event和JavaScript之间的关系。
这是最常用的事件类型,在用户单击其鼠标左键时发生。您可以针对此事件类型进行验证,警告等。
请尝试以下示例。
<html> <head> <script> <!-- function sayHello() { alert("Hello World") } //--> </script> </head> <body> <p>Click the following button and see result</p> <form> <input type="button" onclick="sayHello()" value="Say Hello" /> </form> </body> </html>
这两种事件类型将帮助您使用图像甚至文本创建漂亮的效果。将鼠标移到任何元素上时会触发onmouseover事件,而将鼠标从该元素上移出时会触发onmouseout事件。
请尝试以下示例。
<html> <head> <script> <!-- function over() { document.write ("Mouse Over"); } function out() { document.write ("Mouse Out"); } //--> </script> </head> <body> <p>Bring your mouse inside the division to see the result:</p> <div onmouseover="over()" onmouseout="out()"> <h2> This is inside the division </h2> </div> </body> </html>