实例演示禁用表单默认提交的三种方式和 实例演示this.target,currentTarget的区别与联系
<!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); // email let email = this.form.email; // password let 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>
