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>
