一 介绍
在处理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 /> 密 码:<input type="password" name="pass" /><br /> 电 邮:<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文件即可,这样更利于团队协作。
相关推荐
绑定事件处理代码是指将特定的函数与事件绑定,当事件触发时,函数被调用。事件对象是一种包含有关事件详细信息的对象。事件冒泡是指事件从最深的节点开始,然后逐级向上传播到根节点,每个节点都会依次处理事件。 ...
总的来说,"事件处理函数的this"是JavaScript中一个需要深入理解的主题,它涉及到函数调用的上下文、对象的属性访问以及代码的可读性和可维护性。通过合理地使用this和理解其工作原理,开发者能够编写出更加高效和...
2. 该元素的DOM对象:事件处理函数可以访问到当前元素的所有属性和方法。 3. 该元素所属FORM的DOM对象(如果有的话):如果元素是表单的一部分,可以访问表单对象及其属性。 4. document对象:提供对整个文档的访问...
在本文中,我们将深入探讨jQuery的DOM对象事件处理、隐藏显示功能以及如何操作对象数组。jQuery作为一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互,使得Web开发更加便捷。 首先,让...
综上所述,layui动态绑定事件方法的核心是通过事件委托来处理动态创建的DOM元素,并且要特别注意兼容性问题以及框架组件的实例化。通过上述方法,即使是动态添加到页面上的元素,也能确保事件能够正确地绑定和触发,...
2. **组合事件处理参数**:事件处理函数的参数可能包括`event`对象以及额外的数据。`jQuery.event.trigger`会将`event`对象放置在参数列表的前面,并可能添加用户提供的其他数据。 3. **处理特殊事件**:对于某些...
- **事件委托**:利用事件冒泡,可以在父元素上绑定事件处理函数,以此来处理子元素的事件,减少内存消耗和提高性能。 - **事件对象**:在非IE浏览器中,事件处理函数内的`event`对象是自动传递的,可以用来获取事件...
在JavaScript中,`event`对象包含了关于事件的各种信息,如`event.target`属性,它指的是事件的实际触发者,即事件源DOM节点。 例如,如果你在“描述”中提到的“评论区”元素上点击,可以在控制台看到`event`对象...
在早期版本的Vue(v1.x)中,`ready`事件处理函数是一个重要的生命周期钩子,它会在组件挂载完成后被调用,即当组件实例的`el`选项绑定的DOM元素被插入到文档中时。然而,在Vue的最新版本(v2.x及以上)中,`ready`...
`html()`方法可以用于获取或设置元素的HTML内容,`text()`则用于处理文本内容,`height()`和`width()`用于获取或设置元素的尺寸,`val()`用于处理表单元素的值,而`click()`等事件处理函数可以方便地绑定或触发事件...
此外,"Break on…"选项允许你在特定事件触发时暂停脚本执行,这对于调试事件处理逻辑非常有用。 总之,掌握在Chrome中根据DOM查找DOM上的事件监听器是Web开发中的重要技能,这有助于优化网页性能,排查问题,以及...
你可以利用这些事件处理用户输入,比如实现搜索框的实时过滤功能。 接下来是表单事件。React支持所有原生HTML表单事件,如`onChange`、`onSubmit`、`onClick`等。特别地,`onChange`在用户修改表单字段时被触发,这...
总结来说,jQuery的事件处理机制是其强大之处之一,它不仅简化了事件绑定和解绑,还统一了跨浏览器的事件对象获取方式,使得开发者可以更专注于业务逻辑,而不用过于关心底层实现细节。通过熟练掌握jQuery中的事件...
DOM0级事件处理是最基础的JavaScript事件处理模型,它允许开发者为DOM元素绑定事件处理函数。在这一级别中,事件处理函数是作为DOM元素的一个私有属性存在的。这意味着,如果尝试为同一元素绑定同一种类型的多个事件...
需要注意的是,虽然在示例代码中使用了jQuery库来简化DOM操作和事件绑定,但同样的功能也可以不使用jQuery来实现,以减少页面加载外部资源的依赖。此外,关于安全性的考虑也非常重要,因为浏览器的打印功能通常受到...
本文将深入探讨JavaScript中的事件绑定,特别是传统事件绑定的问题,W3C事件处理函数,IE事件处理函数,以及事件对象的其他补充。 首先,我们来看看传统事件绑定的问题。传统的事件绑定通常分为内联事件处理和脚本...
`bind()`是jQuery中用于绑定事件处理函数的核心方法,对于初学者来说,掌握这个方法是理解jQuery事件处理的关键。 `bind()`方法的基本语法如标题和描述中所述:`bind(type, [data], fn)`。这里,`type`是一个或多个...
在非IE浏览器中,同一事件触发的多个事件处理函数之间传递的Event对象是全等的(即相同的内存地址),无论这些处理函数是通过addEventListener还是DOM0级事件处理(如onclick属性)绑定的。这意味着在一个事件处理...