<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-事件-事件绑定</title>
</head>
<body>
<!--点击按钮，在控制台打印相关信息-->
<input type="button" value="事件绑定1" id="btn1" onclick="on()">
<input type="button" value="事件绑定2" id="btn2">
</body>
<script>
// 第一种方法，通过HTML标签中的属性绑定事件
function on() {
console.log("事件绑定1");
}
// 第二种方法，通过DOM元素绑定事件
document.getElementById("btn2").onclick = function () {
console.log("事件绑定2");
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-事件-常见事件</title>
</head>
<!--页面/元素加载后，触发load()方法-->
<body onl oad="load()">
<!--表单提交后，触发subfn()方法-->
<form action="" style="text-align: center" onsubmit="subfn()">
<!--当文本框，失去焦点、获得焦点、键盘按下时触发相应的方法-->
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
<input class="b1" type="submit" value="提交">
<!--当按钮单击时，触发fn1()方法-->
<input class="b1" type="button" value="单击事件" onclick="fn1()">
</form>
<br><br><br>
<!--当鼠标移入、移出表格时，触发over()、out()方法-->
<table width="800px" border="1" cellspacing="0" align="center" onm ouseover="over()" onm ouseout="out()">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr align="center">
<td>马铃薯</td>
<td>25</td>
<td>男</td>
</tr>
<tr align="center">
<td>福西西</td>
<td>18</td>
<td>女</td>
</tr>
</table>
</body>
<script>
// 页面/元素加载完成后触发
function load(){
console.log("页面加载完成");
}
// 提交表单
function subfn(){
console.log("提交表单");
}
// 失去焦点
function bfn(){
console.log("失去焦点");
}
// 获得焦点
function ffn(){
console.log("获得焦点");
}
// 按键按下
function kfn(){
console.log("按键按下");
}
// 鼠标移入
function over(){
console.log("鼠标移入");
}
// 鼠标移出
function out(){
console.log("鼠标移出");
}
// 单击事件
function fn1(){
console.log("单击事件");
}
</script>
</html>
标签：function,绑定,console,log,08,JavaScript,事件,监听,鼠标 From： https://www.cnblogs.com/REN-Murphy/p/18092113