javascript事件驱动同事件处理-优快云博客

本文深入解析JavaScript中的事件处理机制，包括浏览器操作事件、文档事件及其处理步骤，详细讲解了事件驱动方式、事件处理过程以及调用系统函数、自定义函数的方法，并通过实例展示了如何在表单提交时进行有效性验证。

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

javascript中事件分为

浏览器操作事件如鼠标移动，键盘事件
文档事件如文档加载完毕。

javascript中事件处理步骤：

设置html中响应事件的元素什么元素的事件
设置元素中响应事件的类型什么事件
响应事件的程序如何做？

设置事件驱动的方式：

html中设置

<input type="button" value="click" onclick="alert('click me')">

javascript中设置

<form method="post" action="" name="form1">
	<input type="button" value="click" name='btn1' >
</form>
<script type="text/javascript">
<!--
	window.document.form1.btn1.onclick=function(){alert('click me');};
//--
</script>

事件处理

调用系统函数
调用函数代码
调用用户函数

注：如调用事件处理程序返回false则浏览器会阻止程序执行

  <script type="text/javascript">
  <!--
	function sub(){
		if(form1.name1.value==""){
		alert('name 不能为空');
		return false;
		}
	}
  //-->
  </script>
 </head>

 <body>
<form method="post" action="" onsubmit="return sub()" name="form1">
	<input type="text" name="name1" ><br>
	<input type="submit" value="submit">
</form>

此处如果name1的值不输入将不能进行提交操作