JavaScript学习笔记之事件处理机制

最新推荐文章于 2024-02-26 14:09:41 发布

YouDon'tKnowMe

最新推荐文章于 2024-02-26 14:09:41 发布

阅读量394

点赞数

本文链接：https://blog.csdn.net/Jessie_is_Gemini/article/details/70174242

版权

摘自李刚《疯狂HTML 5/CSS 3/JavaScript讲义》

1、为DOM对象或HTML元素绑定事件处理函数（或多条JavaScript脚本），当这些DOM对象或HTML元素发生某个动作时，这些事件处理函数（或多条JavaScript脚本）就会被触发，从而获得执行的机会。

为HTML绑定事件处理函数的两种具备跨浏览器特性的方法：

绑定HTML元素属性

绑定到HTML元素属性时，属性值是一条或多条JavaScript脚本，多条脚本之间以英文分号分隔。

事件属性名称由事件类型前加一个on前缀构成，如onclick、onload等。其属性值也被称为事件处理器，因为它们指定了如何“处理”特定的事件类型。事件处理器属性的值是多条JavaScript脚本。

代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>数据校验表单</h1>
<form method="post" οnsubmit="return check(this);" id="register" name="register" action="#">
	用户名：<input type="text" name="user"/><br>
	密  码：<input type="password" name="password"/><br>
	<input type="submit" value="提交"/>
</form>
<script type="text/javascript">
  var check = function() {
	  // 访问页面中的第一个表单
	  var form = document.forms[0];
	  // 错误字符串
	  var errStr = "";
	  // 
	  if(form.user.value==null || form.user.value=="") {
		  errStr += "\n用户名不能为空";
		  form.user.focus();
	  }
	  if(form.password.value==null || form.password.value=="") {
		  errStr += "\n密码不能为空";
		  form.password.focus();
	  }
	  if(errStr != "") {
	 	  alert(errStr);
	 	  return false;
	  }
  }
</script>
</body>
</html>
优点：简单易用。

缺点：绑定事件处理器需直接修改HTML页面代码，增加了页面逻辑的复杂度，同时不利于团队协作。

绑定DOM对象属性

开发者无需修改HTML元素的代码，而是将事件处理函数放在JavaScript脚本中绑定。

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>数据校验表单</h1>
<form method="post" id="register" name="register" action="#">
	用户名：<input type="text" name="user"/><br>
	密  码：<input type="password" name="password"/><br>
	<input type="submit" value="提交"/>
</form>
<script type="text/javascript">
  var check = function() {
	  // 访问页面中的第一个表单
	  var form = document.forms[0];
	  // 错误字符串
	  var errStr = "";
	  // 
	  if(form.user.value==null || form.user.value=="") {
		  errStr += "\n用户名不能为空";
		  form.user.focus();
	  }
	  if(form.password.value==null || form.password.value=="") {
		  errStr += "\n密码不能为空";
		  form.password.focus();
	  }
	  if(errStr != "") {
	 	  alert(errStr);
	 	  return false;
	  }
  }
  document.forms[0].onsubmit = check;
</script>
</body>
</html>

注意！绑定到DOM对象属性时，该属性值只是一个JavaScript函数的引用，故千万不要在函数后面添加括号——否则就变成调用该函数，只是将该函数返回值赋给DOM对象的onclick等属性。

在代码中触发事件

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>数据校验表单</h1>
<form method="post" id="register" name="register" action="#">
	用户名：<input type="text" name="user"/><br>
	密  码：<input type="password" name="password"/><br>
	<input type="button" id="regist" value="提交"/>
</form>
<script type="text/javascript">
  var check = function() {
	  // 访问页面中的第一个表单
	  var form = document.forms[0];
	  // 错误字符串
	  var errStr = "";
	  // 
	  if(form.user.value==null || form.user.value=="") {
		  errStr += "\n用户名不能为空";
		  form.user.focus();
	  }
	  if(form.password.value==null || form.password.value=="") {
		  errStr += "\n密码不能为空";
		  form.password.focus();
	  }
	 	if(errStr != "") {
	 		alert(errStr);
	 	}
	 	else {
	 		form.submit();
	 	}
  }
  document.getElementById("regist").onclick = check;
</script>
</body>
</html>

上面代码中按钮类型是button，表明单击该按钮时不会引发表单提交。我们在脚本中为该按钮绑定事件处理函数，调用form的submit()方法手动提交表单。

注意！定义表单控件的name、id属性值时，这些属性值不应该和表单对象原有的方法名、属性名相同，否则这些表单控件就会覆盖原有的方法、属性。原因是：

YouDon'tKnowMe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记之事件处理机制

摘自李刚《疯狂HTML 5/CSS 3/JavaScript讲义》1、为DOM对象或HTML元素绑定事件处理函数（或多条JavaScript脚本），当这些DOM对象或HTML元素发生某个动作时，这些事件处理函数（或多条JavaScript脚本）就会被触发，从而获得执行的机会。为HTML绑定事件处理函数的两种具备跨浏览器特性的方法：绑定HTML元素属性绑定到HTM
复制链接

扫一扫