`
cakin24
  • 浏览: 1388006 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

绑定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文件即可,这样更利于团队协作。
  • 大小: 32.3 KB
1
0
分享到:
评论

相关推荐

    Html dom _BOM 模型 _事件处理机制 _面向对象基础

    绑定事件处理代码是指将特定的函数与事件绑定,当事件触发时,函数被调用。事件对象是一种包含有关事件详细信息的对象。事件冒泡是指事件从最深的节点开始,然后逐级向上传播到根节点,每个节点都会依次处理事件。 ...

    事件处理函数的this

    总的来说,"事件处理函数的this"是JavaScript中一个需要深入理解的主题,它涉及到函数调用的上下文、对象的属性访问以及代码的可读性和可维护性。通过合理地使用this和理解其工作原理,开发者能够编写出更加高效和...

    元素的内联事件处理函数的特殊作用域在各浏览器中存在差异

    2. 该元素的DOM对象:事件处理函数可以访问到当前元素的所有属性和方法。 3. 该元素所属FORM的DOM对象(如果有的话):如果元素是表单的一部分,可以访问表单对象及其属性。 4. document对象:提供对整个文档的访问...

    jquerydom对象的事件隐藏显示和对象数组示例

    在本文中,我们将深入探讨jQuery的DOM对象事件处理、隐藏显示功能以及如何操作对象数组。jQuery作为一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互,使得Web开发更加便捷。 首先,让...

    layui动态绑定事件的方法

    综上所述,layui动态绑定事件方法的核心是通过事件委托来处理动态创建的DOM元素,并且要特别注意兼容性问题以及框架组件的实例化。通过上述方法,即使是动态添加到页面上的元素,也能确保事件能够正确地绑定和触发,...

    jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理

    2. **组合事件处理参数**:事件处理函数的参数可能包括`event`对象以及额外的数据。`jQuery.event.trigger`会将`event`对象放置在参数列表的前面,并可能添加用户提供的其他数据。 3. **处理特殊事件**:对于某些...

    js中DOM事件绑定分析.docx

    - **事件委托**:利用事件冒泡,可以在父元素上绑定事件处理函数,以此来处理子元素的事件,减少内存消耗和提高性能。 - **事件对象**:在非IE浏览器中,事件处理函数内的`event`对象是自动传递的,可以用来获取事件...

    chrome根据事件找到dom.zip如何根据网页上发生的事件,而找事件源,也就是说找出是dom结点触发的事件

    在JavaScript中,`event`对象包含了关于事件的各种信息,如`event.target`属性,它指的是事件的实际触发者,即事件源DOM节点。 例如,如果你在“描述”中提到的“评论区”元素上点击,可以在控制台看到`event`对象...

    vue ready事件处理函数使用方法

    在早期版本的Vue(v1.x)中,`ready`事件处理函数是一个重要的生命周期钩子,它会在组件挂载完成后被调用,即当组件实例的`el`选项绑定的DOM元素被插入到文档中时。然而,在Vue的最新版本(v2.x及以上)中,`ready`...

    dom对象与jquery对象转换[参考].pdf

    `html()`方法可以用于获取或设置元素的HTML内容,`text()`则用于处理文本内容,`height()`和`width()`用于获取或设置元素的尺寸,`val()`用于处理表单元素的值,而`click()`等事件处理函数可以方便地绑定或触发事件...

    chrome根据dom找到dom上的事件.zip

    此外,"Break on…"选项允许你在特定事件触发时暂停脚本执行,这对于调试事件处理逻辑非常有用。 总之,掌握在Chrome中根据DOM查找DOM上的事件监听器是Web开发中的重要技能,这有助于优化网页性能,排查问题,以及...

    05 React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    你可以利用这些事件处理用户输入,比如实现搜索框的实时过滤功能。 接下来是表单事件。React支持所有原生HTML表单事件,如`onChange`、`onSubmit`、`onClick`等。特别地,`onChange`在用户修改表单字段时被触发,这...

    [jQuery入门到精通]第5章:事件与事件对象[收集].pdf

    总结来说,jQuery的事件处理机制是其强大之处之一,它不仅简化了事件绑定和解绑,还统一了跨浏览器的事件对象获取方式,使得开发者可以更专注于业务逻辑,而不用过于关心底层实现细节。通过熟练掌握jQuery中的事件...

    DOM事件的区别

    DOM0级事件处理是最基础的JavaScript事件处理模型,它允许开发者为DOM元素绑定事件处理函数。在这一级别中,事件处理函数是作为DOM元素的一个私有属性存在的。这意味着,如果尝试为同一元素绑定同一种类型的多个事件...

    js调用浏览器打印模块实现点击按钮触发自定义函数

    需要注意的是,虽然在示例代码中使用了jQuery库来简化DOM操作和事件绑定,但同样的功能也可以不使用jQuery来实现,以减少页面加载外部资源的依赖。此外,关于安全性的考虑也非常重要,因为浏览器的打印功能通常受到...

    javascript大事绑定学习要点_.docx

    本文将深入探讨JavaScript中的事件绑定,特别是传统事件绑定的问题,W3C事件处理函数,IE事件处理函数,以及事件对象的其他补充。 首先,我们来看看传统事件绑定的问题。传统的事件绑定通常分为内联事件处理和脚本...

    JQuery入门——用bind方法绑定事件处理函数应用介绍

    `bind()`是jQuery中用于绑定事件处理函数的核心方法,对于初学者来说,掌握这个方法是理解jQuery事件处理的关键。 `bind()`方法的基本语法如标题和描述中所述:`bind(type, [data], fn)`。这里,`type`是一个或多个...

    js 事件处理函数间的Event物件是否全等

    在非IE浏览器中,同一事件触发的多个事件处理函数之间传递的Event对象是全等的(即相同的内存地址),无论这些处理函数是通过addEventListener还是DOM0级事件处理(如onclick属性)绑定的。这意味着在一个事件处理...

Global site tag (gtag.js) - Google Analytics