一 介绍
在处理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. **处理特殊事件**：对于某些...
在早期版本的Vue（v1.x）中，`ready`事件处理函数是一个重要的生命周期钩子，它会在组件挂载完成后被调用，即当组件实例的`el`选项绑定的DOM元素被插入到文档中时。然而，在Vue的最新版本（v2.x及以上）中，`ready`...
- **事件委托**：利用事件冒泡，可以在父元素上绑定事件处理函数，以此来处理子元素的事件，减少内存消耗和提高性能。 - **事件对象**：在非IE浏览器中，事件处理函数内的`event`对象是自动传递的，可以用来获取事件...
在JavaScript中，`event`对象包含了关于事件的各种信息，如`event.target`属性，它指的是事件的实际触发者，即事件源DOM节点。 例如，如果你在“描述”中提到的“评论区”元素上点击，可以在控制台看到`event`对象...
`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属性）绑定的。这意味着在一个事件处理...