事件的概念
就和数据库中的触发器一样,当操作了数据的时候回引发对应的触发器程序的执行,JS中的世间就是对用户的特定行为做出相应的响应的过程,其实就是浏览器监听到用户的特定行为时会执行对应的绑定程序。
事件的绑定
在html元素上将触发事件的行为和事件相应的程序相关联起来的过程就叫做事件的绑定
DEMO:绑定函数(一个单击事件)
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="index_submit" method="post" accept-charset="utf-8">
用户名:<input type="text" name="username"><br>
密 码:<input type="password" name="pwd"><br><br>
</form>
<button type="button" onclick="login()">登录</button>
</body>
</html>
<script src="js/login.js"></script>
js文件
function login(name,pwd){
//取得用户输入的用户名和密码
var username=document.getElementsByName("username")[0].value;
var pwd=document.getElementsByName("pwd")[0].value;
if ("smith"==username && "1234"==pwd) {
alert("登陆成功!")
}else{
alert("用户名密码错误!")
}
}
这种绑定方式因为直接在html标签中绑定,就会造成html代码混乱,不方便维护,所有要使用js来实现事件的绑定
DEMO:绑定函数(一个单击事件)
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="index_submit" method="post" accept-charset="utf-8">
用户名:<input type="text" name="username"><br>
密 码:<input type="password" name="pwd"><br><br>
</form>
<button type="button" id="btn">登录</button>
</body>
</html>
<script src="js/login.js"></script>
js文件
//根据id选出要绑定的标签,并将对应事件绑定在标签上
document.getElementById("btn").onclick=login;
function login(name,pwd){
//取得用户输入的用户名和密码
var username=document.getElementsByName("username")[0].value;
var pwd=document.getElementsByName("pwd")[0].value;
if ("smith"==username && "1234"==pwd) {
alert("登陆成功!")
}else{
alert("用户名密码错误!")
}
}