1. JS的事件触发
1.1 鼠标事件
| 事件 |
说明 |
触发时机 |
| onClick |
鼠标左键单击事件 |
鼠标左键完整触发按下和抬起 |
| onDblClick |
鼠标左键双击事件 |
鼠标左键在一定时间内完整触发2次按下和抬起 |
| onMouseDown |
鼠标左键按下事件 |
鼠标左键按下时触发 |
| onMouseUp |
鼠标左键抬起事件 |
鼠标左键抬起时触发 |
| onMouseWheel |
鼠标滚轮事件 |
鼠标滚轮滚动时触发 |
| onMouseMove |
鼠标移动事件 |
鼠标移动时触发 |
| onMouseOver |
鼠标悬停事件 |
鼠标进入区域时触发 |
| onMouseEnter |
鼠标进入事件 |
鼠标进入区域时触发 |
| onMouseLeave |
鼠标离开事件 |
鼠标离开区域时触发 |
| onMouseOut |
鼠标离开事件 |
鼠标离开区域时触发 |
1.2 键盘事件
| 事件 |
说明 |
触发时机 |
| onKeyPress |
键盘押下事件 |
键盘按键按下并抬起时触发 |
| onKeyDown |
键盘按下事件 |
键盘按键按下时触发 |
| onKeyUp |
键盘抬起事件 |
键盘按键抬起时触发 |
1.3 焦点事件
| 事件 |
说明 |
触发时机 |
| onFocus |
获得焦点事件 |
控件获得鼠标焦点时触发 |
| onBlur |
失去焦点事件 |
控件失去鼠标焦点时触发 |
1.4 页面事件
| 事件 |
说明 |
触发时机 |
| onLoad |
页面载入事件 |
当页面加载时触发 |
| onUnLoad |
页面卸载事件 |
当页面关闭时触发 |
| onScroll |
滚动条事件 |
当滚动条移动时触发 |
1.5 表单事件
| 事件 |
说明 |
触发时机 |
| onInput |
控件输入事件 |
当input标记输入内容改变时触发 |
| onChange |
下拉列表选项改变事件 |
当select标记选中项改变时触发 |
| onSubmit |
表单提交事件 |
当form被提交时触发 |
| onReset |
表单重置事件 |
当form被重置时触发 |
onSubmit事件要求调用的js方法必须给出一个boolean类型的返回值
- true：放行表单提交，表单会提交给服务器
- false：阻止表单提交，表单不会提交给服务器
<form action="http://www.baidu.com" method="post" onsubmit="return test3();">
...
</form>
2. JS的事件绑定
2.1 标记执行时绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="btn1" value="测试1" />
<input type="button" id="btn2" value="测试2" />
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
btn1.onclick = haha;
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
alert("呵呵");
}
function haha(){
alert("哈哈");
}
</script>
</body>
</html>
2.2 addEventListener监听绑定方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function (){
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click", function (){
alert("哈哈");
});
}
</script>
</head>
<body>
<input type="button" id="btn1" value="测试1" />
</body>
</html>
3. JS的事件捕获和事件冒泡
事件捕获和冒泡的理解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 300px;
height: 300px;
border: 1px solid #000;
}
#div2{
width: 150px;
height: 150px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2" onclick="test3();"></div>
</div>
<script type="text/javascript">
window.onload = function (){
var d1 = document.getElementById("div1");
var d2 = document.getElementById("div2");
d1.addEventListener("click", function(){
alert("test1");
}, false);
d2.addEventListener("click", function(){
alert("test2");
}, false);
}
function test3(){
alert("test3");
}
</script>
</body>
</html>
addEventListener(... false); 在冒泡阶段执行绑定参数
结果: test3 -> test2 -> test1
如果将参数由false全部改成true
结果：test1-> test3 -> test2
停止事件流
使用e.stopPropagation();停止捕获和冒泡的过程
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 300px;
height: 300px;
border: 1px solid #000;
}
#div2{
width: 150px;
height: 150px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
<script type="text/javascript">
window.onload = function (){
var d1 = document.getElementById("div1");
var d2 = document.getElementById("div2");
d1.addEventListener("click", function(){
alert("test1");
}, false);
d2.addEventListener("click", function(e){
alert("test2");
e.stopPropagation();
}, false);
}
</script>
</body>
</html>
网友评论