12 js事件
事件
- js中添加事件的第一种方式：
- 在HTML上直接使用事件属性来添加，属性值为监听执行的函数
- js中的事件只有在当前HTML上有效
- 一个HTML可以添加多个不同的事件
- 一个监听事件可以触发多个函数，不同的函数之间用分号隔开
点击事件
- 单机 onclick
- 双击 ondblclick
鼠标事件
- onmouseover 当鼠标悬停在某个HTML标签上的时候触发
- onmousemove 当鼠标在某个HTML上移动时触发
- onmouseout 当鼠标溢出某个HTML时触发
键盘事件
- onkeyup 当键盘在某个HTML元素上弹起时触发
- onkeydown 当键盘在某个HTML元素上下压时触发
焦点事件
输入框一闪一闪那个竖线就是焦点
- onfoucus 当某个HTML元素获取焦点时触发，持续触发
- onblur 当某个HTML元素失去焦点时触发
值改变事件
- onchange 当值被改变时触发
页面加载事件
- onload 当页面加载成功时触发。用在body标签里
代码
<!DOCTYPE html>
<html>
<head >
<meta charset="utf-8">
<title ></title>
</head>
<body onload="onloadTest()">
<!--
点击事件
单机 onclick
双击 ondblclick
鼠标事件
onmouseover 当鼠标悬停在某个HTML标签上的时候触发
onmousemove 当鼠标在某个HTML上移动时触发
onmouseout 当鼠标溢出某个HTML时触发
键盘事件
onkeyup 当键盘在某个HTML元素上弹起时触发
onkeydown 当键盘在某个HTML元素上下压时触发
焦点事件
输入框一闪一闪那个竖线就是焦点
onfoucus 当某个HTML元素获取焦点时触发
onblur 当某个HTML元素失去焦点时触发
页面加载事件
onload 当页面加载成功时触发
注意：
js中添加事件的第一种方式：
在HTML上直接使用事件属性来添加，属性值为监听执行的函数
js中的事件只有在当前HTML上有效
一个HTML可以添加多个不同的事件
一个监听事件可以触发多个函数，不同的函数之间用分号隔开
-->
<script type="text/javascript">
function onclickTest(){
alert("我是单击事件");
}
function ondblclickTest(){
alert("我是双击事件");
}
function onmouseoverTest(){
alert("我是鼠标悬停事件");
}
function onmousemoveTest(){
alert("我是鼠标移动事件");
}
function onmouseoutTest(){
alert("我是鼠标移出事件");
}
function onkeyupTest(){
alert("我是按键抬起事件");
}
function onkeydownTest(){
alert("我是按键按下事件");
}
function onfocusTest(){
alert("我是获得焦点事件");
}
function onblurTest(){
alert("我是失去焦点事件");
}
function onloadTest(){
alert("我是加载页面事件");
}
//onloadTest()页面加载事件也可以随着js代码的位置加载，通常放在页面底部的js代码中比较多
function onchangeTest(){
alert("我是值改变事件");
}
</script>
<h1>js事件</h1>
<hr>
<!-- 点击事件
单机 onclick
双击 ondblclick -->
<h3>点击事件</h3>
<button type="button" onclick="onclickTest()">单击事件</button>
<button type="button" ondblclick="ondblclickTest()">双击事件</button>
鼠标事件<!--
onmouseover 当鼠标悬停在某个HTML标签上的时候触发
onmousemove 当鼠标在某个HTML上移动时触发
onmouseout 当鼠标溢出某个HTML时触发 -->
<h3>鼠标事件</h3>
<div style="width:190px;height: 190px;border:solid 1px red;"
onmouseover="onmouseoverTest()" onmousemove="onmousemoveTest()"
onmouseout="onmouseoutTest()"></div>
<!-- 键盘事件
onkeyup 当键盘在某个HTML元素上弹起时触发
onkeydown 当键盘在某个HTML元素上下压时触发 -->
<h3>键盘事件</h3>
按键按下：<input onkeydown="onkeydownTest()"/>
按键抬起：<input onkeyup="onkeyupTest()"/>
<!-- 焦点事件
输入框一闪一闪那个竖线就是焦点
onfoucus 当某个HTML元素获取焦点时 持续触发
onblur 当某个HTML元素失去焦点时触发 -->
<h3>焦点事件</h3>
获得焦点：<input onfocusin="onfocusTest()" />
失去焦点：<input onblur="onblurTest()" /><br/>
<!-- 值改变事件
onchange:当标签的value值改变时触发 -->
值改变事件：<select name="school" onchange="onchangeTest()">
<option value ="null">--请选择--</option>
<option value ="白云一中">白云一中</option>
<option value ="白云二中">白云二中</option>
<option value ="白云三中">白云三中</option>
</select>
<!-- 页面加载事件
onload 当页面加载成功时触发 -->
<h3>页面加载事件</h3>
见body标签
</body >
</html>
