Article Directory
foreword
When writing code, we inevitably need to bind events for some buttons and forms to achieve some corresponding functions, so what are the commonly used events, and what are their commonly used binding methods? Next, let's learn about events together.
1. Common events
| event name | illustrate |
|---|---|
| onclick | mouse click event |
| onblur | element loses focus |
| onfocus | element gets focus |
| onload | A page or image has finished loading |
| onsubmit | This event fires when the form is submitted |
| onkeydown | A keyboard key is pressed |
| onmouseover | The mouse is moved over an element |
| onmouseout | Mouse out of an element |
2. Commonly used event binding methods
2.1 Commonly used event binding method 1
Whether it is the first method or the second method, the author uses the onblur() loss of focus event as an example
Binding method one：Binding via event attributes in HTML tags
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<title>事件绑定练习</title>
</head>
<body>
<form id="form1" method="post" action="#" onsubmit="form_checking()">
<table>
<tr>
<th><label>用户姓名：</label></th>
<th>
<input id="usernameInput" type="text" name="username" onblur="username_checking()"/><br>
<span id="usernameErr" style="display: none"><font color="red">用户名错误！！！</font></span>
</th>
</tr>
<tr>
<th><label>用户密码：</label></th>
<th>
<input id="passwordInput" type="password" name="password" onblur="password_checking()"/><br>
<span id="passwordErr" style="display: none"><font color="red">密码错误！！！</font></span>
</th>
</tr>
<tr>
<th><input type="submit" name="submit" value="登录"/></th>
<th><input type="reset" name="reset" value="重置"/></th>
</tr>
</table>
</form>
<script>
function username_checking(){
//设置返回值，以供onsubmit()提交表单使用
var flag=false;
//通过id获取用户名输入框元素对象
var usernameInputEle = document.getElementById("usernameInput");
//通过id获取用户名错误判定元素对象
var usernameErrEle = document.getElementById("usernameErr");
//获取用户名输入框元素对象的输入值
var username = usernameInputEle.value;
if(username!=null&&username!=""){
//如果用户名不为空和空字符串，则用户名错误判定元素对象不展示
usernameErrEle.style.display="none";
flag=true;
}else{
//如果用户名为空或者空字符串，则用户名错误判定元素对象展示
usernameErrEle.style.display="inline";
flag=false;
}
return flag;
}
function password_checking(){
//设置返回值，以供onsubmit()提交表单使用
var flag=false;
//通过id获取密码输入框元素对象
var passwordInputEle = document.getElementById("passwordInput");
//通过id获取密码错误判定元素对象
var passwordErrEle = document.getElementById("passwordErr");
//获取密码输入框元素对象的输入值
var password = passwordInputEle.value;
if(password!=null&&password!=""){
//如果密码不为空和空字符串，则密码错误判定元素对象不展示
passwordErrEle.style.display="none";
flag=true;
}else{
//如果密码为空或者空字符串，则密码错误判定元素对象展示
passwordErrEle.style.display="inline";
flag=false;
}
return flag;
}
function form_checking(){
return username_checking() && password_checking();
}
</script>
</body>
</html>
operation result:
2.2 Commonly used event binding method 2
Whether it is the first method or the second method, the author uses the onblur() loss of focus event as an example
Binding method two：Binding via DOM element properties
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<title>事件绑定练习</title>
</head>
<body>
<form id="form1" method="post" action="#">
<table>
<tr>
<th><label>用户姓名：</label></th>
<th>
<input id="usernameInput" type="text" name="username"/><br>
<span id="usernameErr" style="display: none"><font color="red">用户名错误！！！</font></span>
</th>
</tr>
<tr>
<th><label>用户密码：</label></th>
<th>
<input id="passwordInput" type="password" name="password"/><br>
<span id="passwordErr" style="display: none"><font color="red">密码错误！！！</font></span>
</th>
</tr>
<tr>
<th><input type="submit" name="submit" value="登录"/></th>
<th><input type="reset" name="reset" value="重置"/></th>
</tr>
</table>
</form>
<script>
//通过id获取用户名输入框元素对象
var usernameInputEle = document.getElementById("usernameInput");
//为用户输入框绑定事件
usernameInputEle.onblur=username_checking;
function username_checking(){
//设置返回值，以供onsubmit()提交表单使用
var flag=false;
//通过id获取用户名错误判定元素对象
var usernameErrEle = document.getElementById("usernameErr");
//获取用户名输入框元素对象的输入值
var username = usernameInputEle.value;
if(username!=null&&username!=""){
//如果用户名不为空和空字符串，则用户名错误判定元素对象不展示
usernameErrEle.style.display="none";
flag=true;
}else{
//如果用户名为空或者空字符串，则用户名错误判定元素对象展示
usernameErrEle.style.display="inline";
flag=false;
}
return flag;
}
//通过id获取密码输入框元素对象
var passwordInputEle = document.getElementById("passwordInput");
//为密码输入框绑定事件
passwordInputEle.onblur=password_checking;
function password_checking(){
//设置返回值，以供onsubmit()提交表单使用
var flag=false;
//通过id获取密码错误判定元素对象
var passwordErrEle = document.getElementById("passwordErr");
//获取密码输入框元素对象的输入值
var password = passwordInputEle.value;
if(password!=null&&password!=""){
//如果密码不为空和空字符串，则密码错误判定元素对象不展示
passwordErrEle.style.display="none";
flag=true;
}else{
//如果密码为空或者空字符串，则密码错误判定元素对象展示
passwordErrEle.style.display="inline";
flag=false;
}
return flag;
}
//通过id获取表单元素对象
var formEle = document.getElementById("form1");
//为表单绑定事件
formEle.onsubmit=form_checking;
function form_checking(){
return username_checking() && password_checking();
}
</script>
</body>
</html>
operation result:
3. Special binding method of onsubmit() form event
Before talking about the special binding method of form events, let's run the above two binding codes in full
Event binding mode one complete operation: ( 我们看到onsubmit()无法起到表单格式有误时阻止提交的作用)
Event binding method 2 runs completely: (We see that onsubmit() can prevent when the form format is wrong）
From the running results, we can see that
事件绑定一方式the running effect is not what we want. What we want is that if one of the user name input box or password input box does not meet the input requirements, the form should not be submitted, but currently Seeing that the form cannot prevent submission, that is to say, onsubmit() does not really work, so how to make it really work? Next let's see how to make onsubmit() actually work
3.1 Event binding method one makes onsubmit() really work
Event binding method 1: Add events directly in the element box to complete event binding
Changes: In fact, a return is added in front of the method
Full code:
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<title>事件绑定练习</title>
</head>
<body>
<form id="form1" method="post" action="#" onsubmit="return form_checking()">
<table>
<tr>
<th><label>用户姓名：</label></th>
<th>
<input id="usernameInput" type="text" name="username" onblur="username_checking()"/><br>
<span id="usernameErr" style="display: none"><font color="red">用户名错误！！！</font></span>
</th>
</tr>
<tr>
<th><label>用户密码：</label></th>
<th>
<input id="passwordInput" type="password" name="password" onblur="password_checking()"/><br>
<span id="passwordErr" style="display: none"><font color="red">密码错误！！！</font></span>
</th>
</tr>
<tr>
<th><input type="submit" name="submit" value="登录"/></th>
<th><input type="reset" name="reset" value="重置"/></th>
</tr>
</table>
</form>
<script>
function username_checking(){
//设置返回值，以供onsubmit()提交表单使用
var flag=false;
//通过id获取用户名输入框元素对象
var usernameInputEle = document.getElementById("usernameInput");
//通过id获取用户名错误判定元素对象
var usernameErrEle = document.getElementById("usernameErr");
//获取用户名输入框元素对象的输入值
var username = usernameInputEle.value;
if(username!=null&&username!=""){
//如果用户名不为空和空字符串，则用户名错误判定元素对象不展示
usernameErrEle.style.display="none";
flag=true;
}else{
//如果用户名为空或者空字符串，则用户名错误判定元素对象展示
usernameErrEle.style.display="inline";
flag=false;
}
return flag;
}
function password_checking(){
//设置返回值，以供onsubmit()提交表单使用
var flag=false;
//通过id获取密码输入框元素对象
var passwordInputEle = document.getElementById("passwordInput");
//通过id获取密码错误判定元素对象
var passwordErrEle = document.getElementById("passwordErr");
//获取密码输入框元素对象的输入值
var password = passwordInputEle.value;
if(password!=null&&password!=""){
//如果密码不为空和空字符串，则密码错误判定元素对象不展示
passwordErrEle.style.display="none";
flag=true;
}else{
//如果密码为空或者空字符串，则密码错误判定元素对象展示
passwordErrEle.style.display="inline";
flag=false;
}
return flag;
}
function form_checking(){
return username_checking() && password_checking();
}
</script>
</body>
</html>
running result:(We see that onsubmit() can prevent when the form format is wrong）
4. Small bugs in common event binding
When we do not use event binding events correctly, for example, the binding method of binding event 1 needs to add (), but if we do not add (), there will be problems; the binding method of event binding method 2 does not need to add (), and if we add (), there will be problems
4.1 A bug caused by an irregular binding event
If we use the binding event method one binding event, but do not add () to the binding method:
running result:(We found that the method would fail）
4.2 Bugs caused by the second non-standard binding event
If we use the second method of binding events to bind events, but add () to the binding method:
running result:(Similarly, we found that the method will be invalid, and the onblur() event will be directly triggered and invalid）
Therefore, we must regulate the correct use of event binding! ! !
V. Summary
When we use event binding method 1 to bind events, all event attributes are added with ()
When we use event binding method 2 to bind events, element attributes are not added ()
OK! ! ! Finish! ! !