<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS函数中的事件</title>
</head>
<body>
<!--
JS中常用事件:
1)blur失去焦点
2)change下拉列表选中项改变,或文本框内容改变
3)click鼠标单击
4)dblclick鼠标双击
5)focus获得焦点
6)keydown键盘按下
7)keyup键盘弹起
8)load页面加载完毕
9)mousedown鼠标按下
10)mouseover鼠标经过
11)mousemove鼠标移动
12)mouseout鼠标离开
13)mouseup鼠标弹起
14)reset表单重置
15)select文本被选中
16)submit表单提交
这些事件都以标签属性形式存在
基本都是前面加on 例如 onclick ondblclick onfocus onblur
-->
<h2>JS常用事件示例</h2>
<!-- 1) blur 事件 -->
<p>blur失去焦点事件:<input type="text" οnblur="console.log('失去焦点了')" /></p>
<!-- 2) change 事件 -->
<p>change事件(下拉列表):<select name="grade" οnchange="console.log('下拉列表项值发生变化')">
<option value="">--请选择--</option>
<option value="0">高中</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select></p>
<p>change事件(文本内容发生改变):<input type="text" οnchange="console.log('文本内容发生变化')" /></p>
<!-- 3) click 事件 -->
<p>click鼠标单击:<input type="button" value="鼠标单击" οnclick="console.log('鼠标单击')" /></p>
<!-- 4) dblclick 事件 -->
<p>dblclick鼠标双击:<input type="button" value="鼠标双击" οndblclick="console.log('鼠标双击')" /></p>
<!-- 5) focus 事件 -->
<p>focus获得焦点事件:<input type="text" οnfοcus="console.log('获得焦点')" /></p>
<!-- 6) keydown 事件 -->
<p>keydown键盘按下:<input type="text" οnkeydοwn="console.log('键盘按下', event.key)" /></p>
<!-- 7) keyup 事件 -->
<p>keyup键盘弹起:<input type="text" οnkeyup="console.log('键盘弹起', event.key)" /></p>
<!-- 8) load 事件 -->
<p>load页面加载完毕事件:
<img src="https://via.placeholder.com/150" οnlοad="console.log('图片加载完毕')" alt="示例图片" /></p>
<!-- 9) mousedown 事件 -->
<p>mousedown鼠标按下事件:<input type="button" value="鼠标按下" οnmοusedοwn="console.log('鼠标按下')" /></p>
<!-- 10) mouseover 事件 -->
<p>mouseover鼠标经过事件:<input type="button" value="鼠标经过" οnmοuseοver="console.log('鼠标经过')" /></p>
<!-- 11) mousemove 事件 -->
<p>mousemove鼠标移动事件:<input type="button" value="鼠标移动" οnmοusemοve="console.log('鼠标移动')" /></p>
<!-- 12) mouseout 事件 -->
<p>mouseout鼠标离开事件:<input type="button" value="鼠标离开" οnmοuseοut="console.log('鼠标离开')" /></p>
<!-- 13) mouseup 事件 -->
<p>mouseup鼠标弹起事件:<input type="button" value="鼠标弹起" οnmοuseup="console.log('鼠标弹起')" /></p>
<!-- 14) reset 表单重置事件 -->
<form οnreset="console.log('表单重置')">
<p>reset表单重置事件:<input type="reset" value="重置表单" /></p>
</form>
<!-- 15) select 事件 -->
<p>select文本被选中事件:<input type="text" οnselect="console.log('文本被选中')" value="选中文本试试" /></p>
<!-- 16) submit 表单提交事件 -->
<form οnsubmit="console.log('表单提交'); return false;">
<p>submit表单提交事件:<input type="submit" value="提交表单" /></p>
</form>
</body>
</html>
load事件在页面元素全部加载完毕之后才会发生
635
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
