js的事件机制:当行为动作满足一定的条件后,会触发某类事务的执行,主要结合js的函数来使用。
主要内容:
1、单双击事件
单击:onclick 当鼠标单击的时候会触发
双击:ondblclick 当鼠标双击的时候会被触发
2、鼠标事件
onmouseover 当鼠标悬停在某个HTML元素上的时候触发
onmousemove 当鼠标在某个HTML元素上移动的时候触发
onmouseout 当鼠标在某个HTML元素上移出的时候触发
3、键盘事件
onkeyup 当键盘在某个HTML元素上弹起的时候触发
onkeydown 当键盘在某个HTML元素上下压的时候触发
4、焦点事件
onfocus 当某个HTML元素获取焦点的时候触发
onblur 当某个HTML元素失去焦点的时候触发
5、页面加载事件
onload 当页面加载成功后触发。
一个事件可以触发监听多个函数的执行,但是不同的函数之间要用 ; 分号隔开
代码测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript">
//鼠标事件
function testOnclick(){
alert("单击了鼠标。。。。。");
}
function testOndblclick(){
alert("双击了鼠标>.......");
}
//键盘事件
function testOnkeyup(){
alert("键盘弹起");
}
function testOnkeydown(){
alert("键盘按下");
}
//页面加载
function testOnload(){
alert("页面加载");
}
</script>
</head>
<body onload="testOnload()">
<input type="button" name="" id="" value="单击"onclick="testOnclick()" /></br>
<input type="button" name="" id="" value="双击"ondblclick="testOndblclick()" /></br>
<br>测试键盘按下<input type="text" name="" id="" value=""onkeyup="testOnkeyup()" />
</body>
</html>