收藏
PHPz批改状态：合格
老师批语：完成的不错, 继续加油
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>表单事件</title><link rel="stylesheet" href="form.css" /></head><body><!-- <form action="login.php" method="post" id="login" onsubmit="return false"> --><form action="login.php" method="post" id="login"><label class="title">用户登录</label><label for="email">邮箱:</label><input type="email" id="email" name="email" value="" autofocus /><label for="password">密码:</label><input type="password" id="password" name="password" /><!-- form中的button,默认type="submit",改成type="button"就可以禁用 --><button name="submit">登录</button><!-- <button name="submit" type="button">登录</button> --></form><script>// document.forms.login.onsubmit = function () {// return false;// };// 事件对象来控制document.forms.login.submit.onclick = function (ev) {// 如果事件方法,要用到事件对象,就应该传参// console.log(ev);// 直接使用事件对象的引用: event (不推荐),window.event// console.log(event);// console.log(ev === event);/*** * 禁用表单默认提交行为的3种方法* * 1. form.onsubmit = 'return false'* * 2. form.button.type = 'button'* * 3. event.preventDefault()*/// 禁用默认提交行为ev.preventDefault();// 禁用冒泡ev.stopPropagation();// 因为当前不存在事件委托,不需要利用事件冒泡// 不用再区分事件主体的类型的, 之前要区分: 绑定和触发// 事件主体: 二合一console.log(ev.target === ev.currentTarget);console.log(this === ev.target);/*** * 当前事件主体的3种形式* * 1. ev.target* * 2. ev.currentTarget* * 3. this*/// form属性: 始终指向当前表单对象,每一个控件都有的// input,select,button,textarea...console.log(this.form);let email = this.form.email;// passwordlet password = this.form.password;// 非空验证if (email.value.trim().length === 0) {alert('邮箱不能为空');email.focus();return false;} else if (password.value.trim().length === 0) {alert('密码不能为空');password.focus();return false;}};/*** 其它表单事件* 1. submit: 提交* 2. focus: 焦点* 3. blur: 失去焦点* 4. change: 值改变,且失去焦点时* 5. input: 值一旦改变就触发, 不等失去焦点*/</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
