JavaScript 事件监听
一 事件绑定
点击查看代码
1.通过 HTML标签中的事件属性进行绑定
<input type="button" onclick='on()’>
function on(){
alert("我被点了");
}
2.通过 DOM 元素属性绑定
<input type="button" id="btn">
document.getElementById("btn").onclick = function (){
alert("我被点了");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点我" onclick="on()"> <br>
<input type="button" value="再点我" id="btn">
<script>
function on(){
alert("我被点了");
}
document.getElementById("btn").onclick = function (){
alert("我被点了");
}
</script>
</body>
</html>
点击查看代码
onclick 鼠标单击事件
onblur 元素失去焦点
onfocus 元素获得焦点
onload 某个页面或图像被完成加载
onsubmit 当表单提交时触发该事件
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="register" action="#" >
<input type="text" name="username" />
<input type="submit" value="提交">
</form>
<script>
document.getElementById("register").onsubmit = function (){
//onsubmit 返回true，则表单会被提交，返回false，则表单不提交
return true;
}
</script>
</body>
</html>
