Javascript事件
JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的
页面载入完成时，会触发一个事件。用户点击按钮时，点击也是一个事件。
绑定事件的两种方式！
直接绑定
<img src="01.jpg" onclick="alert('触发事件');" />
间接绑定
document.getElementById('demo').onclick = function()
{
alert('触发事件')
}
事件类型
鼠标事件
| 事件名 | 描述 |
|---|---|
| click | 当鼠标点击时触发 |
| dblclick | 当鼠标双击时触发 |
| mouseover | 当鼠标指针移动到元素上时触发 |
| mouseout | 当鼠标指针移出元素时触发 |
| mouseenter | 当鼠标指针移动到元素上时触发（不支持冒泡） |
| mouseleave | 当鼠标指针移出元素上时触发（不支持冒泡） |
| mousemove | 当鼠标指针移动到元素上时触发 |
| mousedown | 当元素上按下鼠标按钮时触发 |
| mouseup | 当在元素上释放鼠标按钮时触发 |
| mousewheel | 当鼠标滚轮正在被滚动时运行的脚本 |
| scroll | 当元素滚动条被滚动时运行的脚本 |
键盘事件
| 事件名 | 描述 |
|---|---|
| keydown | 某个键盘按键被按下 |
| keypress | 某个键盘按键被按下并松开 |
| keyup | 某个键盘按键被松开 |
表单事件
| 事件名 | 描述 |
|---|---|
| blur | 元素失去焦点时运行的脚本 |
| focus | 元素获取焦点时触发 |
| focusout | 元素即将失去焦点时触发 |
| change | 在元素值被改变时运行的脚本 |
| input | 代替keyup、keydown 再输入的时候就会触发 |
| reset | 表单重置时触发 |
| submit | 表单提交时触发 |
| select | 用户选取文本时触发 ( <input> 和 <textarea>) |
剪贴板事件
| 事件名 | 描述 |
|---|---|
| copy | 该事件在用户拷贝元素内容时触发 |
| cut | 该事件在用户剪切元素内容时触发 |
| paste | 该事件在用户粘贴元素内容时触发 |
触摸事件
| 事件名 | 作用 |
|---|---|
| touchstart | 手指按到屏幕上 |
| touchmove | 手指在屏幕上滑动 |
| touchend | 手指离开屏幕 |
| touchcancle | 特殊情况下关闭/退出时触发 |
拖动事件
| 事件名 | 作用 |
|---|---|
| drag | 该事件在元素正在拖动时触发 |
| dragend | 该事件在用户完成元素的拖动时触发 |
| dragenter | 该事件在拖动的元素进入放置目标时触发 |
| dragleave | 该事件在拖动元素离开放置目标时触发 |
| dragover | 该事件在拖动元素在放置目标上时触发 |
| dragstart | 该事件在用户开始拖动元素时触发 |
| drop | 该事件在拖动元素放置在目标区域时触发 |
事件监听
<input type="button" value="test1" id="btn1" />
<script>
var btn1 = document.getElementById("btn1");
var count = 0;
var handle1 = function () {
alert(count++);
if (count == 3)
{
alert("事件结束")
btn1.removeEventListener("click", handle1, false);
}
}
btn1.addEventListener('click', handle1, false);
</script>
事件冒泡、捕获、代理
事件捕获：父级元素先触发，子集元素后触发
事件冒泡：子集元素先触发，父级元素后触发
事件冒泡
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js事件机制</title>
<style>
#parent{
width: 200px;
height:200px;
text-align: center;
line-height: 3;
background: green;
}
#child{
width: 100px;
height: 100px;
margin: 0 auto;
background: orange;
}
</style>
</head>
<body>
<div id="parent">
父元素
<div id="child">
子元素
</div>
</div>
<script type="text/javascript">
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.body.addEventListener("click", function (e) {
console.log("click-body");
}, false);
parent.addEventListener("click", function (e) {
console.log("click-parent");
}, false);
child.addEventListener("click", function (e) {
console.log("click-child");
}, false);
</script>
</body>
</html>
事件捕获
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js事件机制</title>
<style>
#parent{
width: 200px;
height:200px;
text-align: center;
line-height: 3;
background: green;
}
#child{
width: 100px;
height: 100px;
margin: 0 auto;
background: orange;
}
</style>
</head>
<body>
<div id="parent">
父元素
<div id="child">
子元素
</div>
</div>
<script type="text/javascript">
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.body.addEventListener("click", function (e) {
console.log("click-body");
}, false);
parent.addEventListener("click", function (e) {
console.log("click-parent---事件传播");
}, false);
//新增事件捕获事件代码
parent.addEventListener("click", function (e) {
console.log("click-parent--事件捕获");
}, true);
child.addEventListener("click", function (e) {
console.log("click-child");
}, false);
</script>
</body>
</html>
事件的代理/委托原理
事件委托是指将事件绑定目标元素的到父元素上，利用冒泡机制触发该事件
优点：
可以减少事件注册，节省大量内存占用
可以将事件应用于动态添加的子元素上
缺点：
使用不当会造成事件在不应该触发时触发
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js事件机制</title>
<style>
#parent{
width: 200px;
height:200px;
text-align: center;
line-height: 3;
background: green;
}
#child{
width: 100px;
height: 100px;
margin: 0 auto;
background: orange;
}
</style>
</head>
<body>
<div id="parent">
父元素
<div id="child">
子元素
</div>
</div>
<script type="text/javascript">
var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.onclick = function (e) {
if (e.target.id == "child") {
console.log("您点击了child元素")
}
}
</script>
</body>
</html>
阻止事件冒泡、事件捕获
<!DOCTYPE html>
<html lang="en" onclick="alert('html')">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
<title>Document</title>
</head>
<body onclick="alert('body')">
<!--html-->
<div style="width:400px; height:400px; background:red" onclick="alert(this.style.background)">
<div id="div2" style="width:300px; height:300px; background:palevioletred">
<div style="width:200px; height:200px; background:yellow" onclick="alert(this.style.background)">
<div id="div1" style="width:100px; height:100px; background:palegreen">
<a id="aaa" href="http://www.baidu.com">aaa</a>
</div>
</div>
</div>
</div>
<script>
//此jquery既阻止默认行为又停止冒泡
// $("#div1").on('click',function(){
// return false;
// });
window.onload = function () {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
oDiv1.onclick = function (ev) {
var oEvent = ev || event;
alert("this is div1");
//js阻止事件冒泡
oEvent.cancelBubble = true;
oEvent.stopPropagation();
//js阻止链接默认行为，没有停止冒泡
oEvent.preventDefault();
return false;
}
oDiv2.onclick = function (ev) {
var oEvent = ev || event;
alert("this is div2");
oEvent.cancelBubble = true;
}
}
</script>
</body>
</html>