绑定DOM对象属性来触发事件处理函数

最新推荐文章于 2019-09-02 16:21:58 发布
最新推荐文章于 2019-09-02 16:21:58 发布
阅读量358 收藏
点赞数
分类专栏： JavaScript 文章标签： DOM 属性 事件
一 介绍
在处理Javascript的监听事件处理函数时，常用到两种方式：
1、通过绑定HTML元素的属性
2、通过绑定DOM对象属性
本篇介绍第2种方式来进行监听事件处理
 
二 代码 
<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> JavaScript校验表单 </title>
</head>
<body>
<div>
	<h2>数据校验表单</h2>
	<form method="post"
		id="register" name="register" action="#">
		用户名：<input type="text" name="user" /><br />
		密&nbsp;&nbsp;码：<input type="password" name="pass" /><br />
		电&nbsp;&nbsp;邮：<input type="text" name="email" /><br />
		<input type="submit" value="提交" />
	</form>
</div>
<script type="text/javascript">
	// 为字符串增加trim方法，使用正则表达式截取空格
	String.prototype.trim = function()
	{
		return this.replace( /^\s*/, "" ).replace( /\s*$/, "" );
	}
	// 负责处理表单submit事件的函数
	var check = function()
	{
		// 访问页面中第一个表单
		var form = document.forms[0];
		// 错误字符串
		var errStr = "";
		// 当用户名为空
		if (form.user.value == null 
			|| form.user.value.trim() == "")
		{
			errStr += "\n用户名不能为空!";
			form.user.focus();
		}
		// 当密码为空
		if (form.pass.value == null 
			|| form.pass.value.trim() == "")
		{
			errStr += "\n密码不能为空!";
			form.pass.focus();
		}
		// 当电子邮件为空
		if (form.email.value == null
			|| form.email.value.trim() == "")
		{
			errStr += "\n电子邮件不能为空!";
			form.email.focus();
		}
		// 使用正则表达式校验电子邮件的格式是否正确
		if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
			.test(form.email.value.trim()))
		{
			errStr += "\n电子邮件的格式不正确!";
			form.email.focus();
		}
		//	如果错误字符串不为空，表明校验出错
		if( errStr != "" )
		{
			// 弹出出错信息
			alert(errStr);
			// 返回false，用于阻止表单提交
			return false;
		}
	}
	// 为第一个表单的onsubmit绑定事件处理器
	document.forms[0].onsubmit = check;
</script>
</body>
</html>
 
三 运行结果


 
 
四 运行说明
当采用DOM对象绑定事件处理函数时，开发者无需修改HTML页面，只需要修改js文件即可，这样更利于团队协作。
iteye_5722
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
06 事件处理函数绑定与事件对象
Stephy_Yy
09-26 247
事件处理函数绑定 DOM事件处理 addEventListener or onclick = function(){} 纯小写 React元素也采用了类似DOM0标准中的事件属性定义的方法 小驼峰 JSX <button onClick={ this.doSth }></button> 直接创建React元素 React.createElement( 'button', { onClick: { this.doSth } },
DOM对象触发事件的一些解
u010837486的专栏
02-04 2486
Web浏览器中的JavaScript实现允许我们定义响应用户事件(通常是鼠标或者键盘事件)所执行的代码。在支持Ajax的现代浏览器中，这些事件处理函数可以被设置到大多数可视元素之上。我们可以使用事件处理函数将可视用户界面(即视图)与业务对象模型相连接。 　　传统的事件模型在JavaScript诞生的早期就存在了，它是相当简单和直接的。DOM元素有几个预先定义的属性，可以赋值为回调函数。例如，为了
Dom绑定事件三种方式及自定义事件
代码搬运工
08-08 8746
要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。 在JavaScript中，有三种常用的绑定事件的方法： 在DOM元素中直接绑定； 在JavaScript代码中绑定； 绑定事件监听函数。 一. 原生函数 &amp;amp;lt;input onclick=&amp;quot;alert('谢谢支持...
DOM绑定事件处理函数区别
weixin_30387339的博客
08-29 105
//非IE事件绑定document.getElementById("mian").addEventListener('click',function(e){...},false); window.addEventListener('load',function(e){...},false); //IE事件绑定document.getElementById("mian").atta...
JQuery入门——用bind方法绑定事件处理函数应用介绍
10-27
`bind()`是jQuery中用于绑定事件处理函数的核心方法，对于初学者来说，掌握这个方法是理解jQuery事件处理的关键。 `bind()`方法的基本语法如标题和描述中所述：`bind(type, [data], fn)`。这里，`type`是一个或多个...
js中DOM事件绑定分析
11-27
这种模型是在HTML元素内部直接设置`onclick`等事件属性来绑定事件处理函数。例如： ```html 按钮" onclick="alert('Lee');" /> ``` 这种方式简洁，但不利于代码的组织和复用，因此现在基本不推荐使用。 2. **...
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
12-12
本篇文章将深入探讨jQuery中的`one()`方法，这是一个用于事件处理的独特功能，允许开发者为元素绑定一个只触发一次的事件处理函数。 `one()`方法的核心在于它的一次性特性，这使得它在某些场景下特别有用，比如初始...
JavaScript Dom 绑定事件操作实例详解
10-16
另一种常见的方式是在JavaScript代码中，通过`addEventListener`或`on`属性来绑定事件。 ```javascript document.getElementById('i1').onclick = function() { // this 指向当前点击的标签 }; ``` 这种方法...
js使用函数绑定技术改变事件处理程序的作用域
12-02
总结来说，JavaScript的事件处理程序通常会将`this`设置为触发事件的元素，但通过函数绑定，我们可以确保事件处理程序在我们期望的作用域中运行，这在进行面向对象编程时特别有用。理解并熟练运用这一技巧，可以提升...
好好学一遍JavaScript 笔记(九)——事件处理函数/监听函数/事件对象
胡汉三
02-17 4661
欢迎技术交流。 QQ：138986722 事件处理器是与特定的文本和特定的事件相联系的JavaScript脚本代码，当该文本发生改变或者事件被触发时，浏览器执行该代码并进行相应的处理操作，而响应某个事件而进行的处理过程称为事件处理。HTML文档事件包括用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应，主要分为浏览器事件和HTML元素事件两大类。在了解这两类事件之前，先
JS部分自测题目
WangShuoQing的博客
09-02 268
简答 1.Javascript的组成？ 2.Javascript可以运行在什么地方？ 3.Javascript基本数据类型有哪些 4.Javascript中的内置对象以及函数有哪些？ 5.Javascript对象、函数、数组的定义 6.obj1={name:‘lisi’}; obj2=obj1; obj3={name:‘lisi’},说明它们三者之间的关系 7.请写出10个数组实例可以调用的方法 ...
Dom绑定事件的三种方式
风从北方来的博客
06-02 2670
Dom绑定事件的三种方式：1.在标签上绑定 Dom0写法例1：实现功能：鼠标放在tr标签上会变色，鼠标移开颜色消失&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &am
JS-事件类型（鼠标事件中event对象的独有属性）
wodexiaoyang的专栏
04-13 7620
ClientX与ClientY返回客户区坐标位置 var bd=document.getElementById("bd");//body EventUtil.addHandler(bd,'click',function(evet){ event=EventUtil.getEnent(event); alert('C
jquery 的on方法获取发生事件的元素对象
热门推荐
xinghuo0007的博客
05-08 1万+
jquery 的on方法获取发生事件的元素对象方法一：一个元素绑定事件的时候方式一：使用$(this)获取 如下代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.2.1.js"></script>
DOM绑定事件处理器
实践求真知
11-22 265
一 介绍 DOM提供了一种事件绑定机制，它提供的事件绑定方法是addEventListener(event, function, useCapture)，该方法三个参数 event：必需。描述事件名称的字符串。注意：不要使用 "on" 前缀。例如，使用 "click" 来取代 "onclick"。 function:必需。描述了事件触发后执行的函数。当事件触发时，事件对象会作为第一个参数传入
使用jQuery查找注册到某个DOM对象的事件处理函数
omage的专栏
09-14 1234
举例，某个输入框绑定了onblur事件处理函数，我如何快速找到那段代码呢？ var elem = document.getElementById("xxxxxx")     // xxxxx为输入框id jQuery(elem).data("events").blur[0].handler 出现以下结果 鼠标双击红圈处，则source窗口会定位显示事件处理代码
回调函数的事件处理函数
最新发布
04-01
在JavaScript中，可以通过addEventListener方法来给DOM元素绑定事件处理函数，例如： ``` var button = document.getElementById('myButton'); button.addEventListener('click', function() { // 回调函数的事件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值