方法1:在html标签中通过添加属性实现
方法2:通过document对象来添加
一个标签可以放多个事件
一个事件可以放多个触发操作
onclick="testOnclick();test()"
**获取光标**
dom对象.focus()
**单双击事件**
单击
onclick="操作"
双击
ondblclick="操作"
**鼠标事件**
除了onmouseenter和onmouseleave不冒泡,其他为冒泡
鼠标移动事件
onmousemove="操作"
鼠标悬停事件
onmouseover="操作"
鼠标移出事件
onmouseout="操作"
鼠标移进事件(不冒泡)
onmouseenter="操作"
鼠标移出事件(不冒泡)
onmouseleave="操作"
鼠标按下事件
onmousedown="操作"
鼠标抬起事件
onmouseup="操作"
**键盘事件**
键盘弹起事件(冒泡)
onkeyup="操作" 当按键弹起时触发
键盘下压事件(冒泡)
onkeydown="操作" 当按键下压时触发,按下会一直触发,不区分大小写
键盘下压事件(冒泡)
onkeypress="操作" 当按下除功能键外的按键触发,按下会一直触发,区分大小写
**焦点事件(即光标)**
获取焦点(不支持冒泡)
onfocus="操作"
失去焦点(不支持冒泡)
onblur="操作" 光标消失时触发
支持冒泡的焦点事件
onfocusin
onfocusout
**页面加载事件**
onload="操作" 放在body标签里,会在页面加载成功后触发事件
在js代码域中调用,会在页面还未加载时触发事件
onerror="操作"
页面加载失败时执行
**改变事件**
onchange="操作"
当搭配输入文本框时,改变数据只有当焦点失去时才触发,不合适
搭配下拉框,随着选项的改变而触发
**状态改变事件**
onreadystatechange="操作"
当状态改变时执行
**加载domtree完成后事件**
.addEventListener("DOMContentLoaded",函数)
加载domtree时候执行,优先于onload事件
"样式/视口大小改变事件"
.onresize="操作"
当样式尺寸改变时执行
**滚动条改变事件**
.onscroll="操作"
滚动条改变时执行
**鼠标滑轮事件**
非火狐 .onmousewheel="操作"
火狐 .addEventListener("DOMMouseScroll",函数,false);
**表单提交事件**
在form表单设置onsubmit();
当使用input标签,且type=‘submit’时,触发
**在div区域上右键单击触发事件**
.oncontextmenu='操作'
**图片加载完成事件**
img对象.onLoad=回调
vue:@load
代码示例:
<html >
<head >
<title >js 事件机制1</title>
<meta charset="utf-8" />
<script type="text/javascript">
/*单机事件*/
function testOnclick(){
alert("单机事件");
}
function testDblclick()
{
alert("双击事件");
}
/*鼠标事件*/
function testOnmouseover(){
alert("鼠标悬停事件");
}
function testOnmousemove(){
alert("鼠标移动事件");
}
function testOnmouseout(){
alert("鼠标移出事件")
}
function testOnmouseenter(){
alert("鼠标移进事件")
}
/*键盘事件*/
function testOnkeyup()
{
alert("键盘弹起事件");
}
function testOnkeydown()
{
alert("键盘下压事件");
}
/*焦点事件*/
function testOnfocus()
{
alert("获取焦点");
}
function testOnblur(){
alert("失去焦点");
}
/*页面加载事件*/
function testOnload()
{
alert("页面加载");
}
testOnload();
/*测试*/
function test()
{
alert("测试");
}
/*改变事件*/
function t1()
{
alert("改变1");
}
</script>
<style type="text/css">
#showdiv{
width:300px;
height:300px;
border:solid 1px red;
}
</style>
</head>
<body onload="testOnload()" >
<input type="button" value="测试单击" onclick="testOnclick();test()" />
<input type="button" value="测试双击" ondblclick="testDblclick()" />
<div id="showdiv" onmouseover="testOnmouseover()" onmousemove="testOnmousemove()" onmouseout="testOnmouseout()" onmouseenter="testOnmouseenter()" >
</div>
<input type="text" name="" id="" onkeyup="testOnkeyup()" />
<input type="text" onkeydown="testOnkeydown()"/>
<br />
<input type="text" onfocus="testOnfocus()" />
<input type="text" onblur="testOnblur()" />
<select name="" id="" onchange="t1()">
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
</body>
</html>