JavaScript 动态网页实例 —— 事件绑定与事件触发

迎风的信号旗

于 2024-05-07 09:56:02 发布

阅读量1.8k

点赞数 44

分类专栏：前端 JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/cccloveforever/article/details/138048041

版权

本文详细介绍了JavaScript中事件绑定的各种方式，包括HTML事件绑定、非标准事件绑定、事件处理器绑定、使用函数以及直接在表单上调用事件。通过实例展示了如何利用JavaScript响应用户操作，增强网页交互性。讲解了事件绑定的常见方法，如HTML属性、JScript实现、直接调用事件处理器以及函数应用，帮助开发者理解事件处理的原理与应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在 Web页面中，浏览器可以调用JavaScript 响应用户的操作。例如，当用户单击了某个链接，或者编辑了表单域中的内容，浏览器就会调用相应的JavaScript 代码。在此过程中，JavaScript 响应的操作称为事件。事件将用户和web页面连接在一起，使页面可以与用户进行交互，响应用户的操作。本章介绍基本的事件绑定与事件触发，主要包括事件绑定的常见方式与事件编写两部分内容。

6.1 HTML 事件绑定

HTML支持对绝大多数元素进行事件绑定，这些绑定通常作为元素的属性使用，例如onclick与onmouseover,可以使用等号与JavaScript进行连接。当与之绑定的对象有事件发生时，就会执行相应的JavaScript代码。本节实例实现了HTML事件绑定。

要点

本节代码主要使用了HTML元素的事件绑定，主要用法如下。

在 HTMI 标签中，可以将事件作为元素的属性使用，通过该事件可以调用一定的，JavaScript 代码，完成特定的功能。
HTMI 事件绑定使用格式“事件名称="事件语句"”实现，其中的“事件语句”可以是任意合法的 JavaScript语句，用于完成特定的功能。
在<body>标签中，可以使用 onload 和 onunload，分别绑定特定的事件，这样，当页。面载入或关闭时，就会执行相应的功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML 事件绑定</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body onload='alert("文档载入，欢迎光临！");' onunload='alert("谢谢惠顾，再会！");'>
<h1 align="center">HTML 事件绑定举例</h1>
<hr>
<table bordercolorlight="#000000" bordercolordark="#008000" border="1" bgcolor="#C0CfCf" width="100%" height="100%">

<tr>

<td width="20%">鼠标事件</td>

<td>

<ul>
<li>onblur:&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" value="单击鼠标后离开" size="16" onblur="alert('失去焦点');" name="T1">
&nbsp;onfocus:
<input type="text" value="点击本域" onfocus="alert('获得焦点');" name="T3" size="16"></li>

<br><br>
<li>onclick:&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="单击这里" onclick="alert('鼠标单击');">
&nbsp;&nbsp;onmousedown:&nbsp; 
<input type="button" value="单击后按住不放" onmousedown="alert('鼠标按下');"></li>
<br><br>
<li>ondblclick: <input type="button" value="双击这里" ondblclick="alert('鼠标双击');">

&nbsp;&nbsp;onmouseup:&nbsp;&nbsp;&nbsp; 
<input type="butto

最低0.47元/天解锁文章