1、事件绑定
事件:HTML事件是发生在HTML元素上的“事情”。eg:按钮被点击、鼠标移到元素上、按下键盘按键。
事件监听:Javascript可以在事件被侦测到时 执行代码。
两种事件绑定方式:
2、常见事件
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="load()">
<form action="" style="text-align: center;" onsubmit="subfn()">
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
<input type="submit" value="提交">
<input type="button" value="单击事件" onclick="fn1()">
</form>
<br>
<br>
<br>
<table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
<tr>
<th>学号</th>
<th>姓名</th>
<th>分数</th>
<th>评语</th>
</tr>
<tr align="center" class="data">
<th>001</th>
<th>里斯</th>
<th>99</th>
<th>优秀</th>
</tr>
<tr align="center" class="data">
<th>002</th>
<th>张三</th>
<th>99</th>
<th>优秀</th>
</table>
<br>
</body>
<script>
//onload:页面/元素加载完成后触发的
function load(){
console.log("页面加载完成。。。");
}
//onclick:鼠标点击事件
function fn1(){
console.log("我被点击了。。。");
}
//onblur:失去焦点事件
function bfn(){
console.log("失去焦点");
}
//onfocus:元素获得焦点
function ffn(params) {
console.log("获得焦点");
}
//onkeydown:键盘被按下
function kfn(params) {
console.log("键盘被按下");
}
//onmouseover:鼠标移动到元素之上
function over(params) {
console.log("鼠标移入了");
}
//onmouseout:鼠标移出某元素
function out(params) {
console.log("鼠标移出了");
}
//onsubmit():提交表单事件
function subfn(params) {
alert("表单被提交了");
}
</script>
</html>
注:表单提交时,提交到的是当前页面,如果用log写“表单被提交”的话,在控制台不会输出。
所以用alert写,才会出现提醒效果。