一、事件概述
事件三要素：
事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)
二、事件的绑定
<body>
<!-- 1、行内方式绑定（元素属性） -->
<input type="button" value="按钮" id="btn" onclick="fn()">
</body>
<script>
function fn(){
alert(6);
}
</script>
<body>
<!-- 2、动态绑定（节点对象属性） -->
<input type="button" value="按钮" id="btn">
</body>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
alert(8);
}
</script>
<body>
<!-- 3、事件监听（节点对象方法） -->
<input type="button" value="按钮" id="btn">
</body>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
alert(6);
});
</script>
注意：行内绑定和动态绑定需要在事件名称前加on，而事件监听不需要在事件名称前加on
针对同一个元素的同一个事件，如果定义多个：
行内绑定：谁在前谁执行
动态绑定：后边的执行函数会将前面的覆盖掉（前边的不会执行）
事件监听：可以添加多个监听处理函数，都会执行
移除监听事件：
<body>
<!-- 移除监听事件 -->
<input type="button" value="按钮" id="btn">
</body>
<script>
function fn(){
alert(8);
}
var btn = document.getElementById('btn');
btn.addEventListener('click',fn);
btn.removeEventListener('click',fn);
</script>
三、事件类型
<!-- 页面事件（资源事件）：在一个资源及其相关资源完成加载的时候触发 -->
<body onload="fn()">
body内容
</body>
<script type="text/javascript">
function fn(){
alert("fn");
}
</script>
<body>
<!-- 焦点事件： -->
<!-- focus元素：获得焦点时触发（不会冒泡） -->
<!-- blur元素：失去焦点时触发（不会冒泡） -->
<input type="text" id="tx" value="请输入文本" onfocus="fc()" onblur="bl()">
</body>
<script type="text/javascript">
function fc(){
document.getElementById('tx').value = "";
}
function bl(){
alert(document.getElementById('tx').value);
}
</script>
鼠标事件:
<!-- 禁止复制页面文字 -->
<body>
<div style="border:1px solid red;width: 200px;height: 100px;" id="div">
div内文字
</div>
</body>
<script type="text/javascript">
document.getElementById('div').oncopy = function(){
alert("无法复制！");
return false;
};
</script>
键盘事件：
<!-- 在网页中用上下左右键控制图片上下左右移动 -->
<body>
<img src="./abc.jpg" width="100" style="position: absolute;left:0px;top:0px;" id="img">
</body>
<script>
document.onkeydown = function(ev){
var img = document.getElementById('img');
var left = parseInt(document.getElementById('img').style.left);
var top = parseInt(document.getElementById('img').style.top);
if(ev.keyCode==37){
img.style.left = (left-10)+'px';
}
if(ev.keyCode==38){
img.style.top = (top-10)+'px';
}
if(ev.keyCode==39){
img.style.left = (left+10)+'px';
}
if(ev.keyCode==40){
img.style.top = (top+10)+'px';
}
}
</script>
Form表单事件：
<body>
<form id="form" action="sub.php">
姓名:<input type="text" name="" value=""><br>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</form>
</body>
<script type="text/javascript">
document.getElementById('form').onsubmit = function(){
var val = document.getElementsByTagName('input')[0];
if(val.value=="和尚周") return false;
}
document.getElementById('form').onreset = function(){
return confirm("你确定要重置吗？");
}
</script>
内容变化事件：
change： 当内容改变且失去焦点时触发 （存储事件）
input ： 当内容改变时触发 （值变化事件）
四、事件的传播
当点击div1时，触发事件1，紧接着，事件2和事件3也被触发了。这种现象，我们称为事件冒泡。
在JS中当一个事件发生以后，它会在不同的DOM节点之间传播。这种传播分成三个阶段：
第一阶段：从window对象传导到目标节点（捕获阶段）。
第二阶段：在目标节点上触发，（目标阶段）。
第三阶段：从目标节点传导回window对象，（冒泡阶段）。
事件传播的最上层对象是window；事件的传播顺序，在捕获阶段依次为window、document、html、body、div；在冒泡阶段依次为div、body、html、document、window。
注意：三种事件绑定方式全部默认为监听冒泡阶段事件。
改变事件触发的阶段：
div2.addEventListener('click',function(){
alert('div2');
},true);//捕获阶段触发（最后一个参数设置为true即可）
阻止浏览器默认行为、阻止事件传播：
event.preventDefault()：方法取消浏览器对当前事件的默认行为，比如点击链接后，浏览器跳转到指定页面，或者按一下空格键，页面向下滚动一段距离。event.stopPropagation()：方法阻止事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数
五、事件对象
<body>
<div id="div" style="border:1px solid red;width:100px;height:50px;">
<p>p标签中内容</p>
</div>
<input type="text" value="" id="inp">
</body>
<script>
//鼠标事件
document.getElementById('div').addEventListener('click',function(ev){
console.log(ev);
});
//键盘事件
document.getElementById('inp').addEventListener('keydown',kd);
function kd(ev){
console.log(ev);
};
</script>
六、事件委托
event.target：对事件起源目标的引用，属性返回触发事件的那个节点。event.currentTarget：属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点。作为比较，target属性返回事件发生的节点。
由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理也叫 事件委托 也有人称为 事件代理
<!-- 实现网页中图片跟随鼠标移动而移动 -->
<body>
<img src="./abc.jpg" width="100" id="img" style="position: absolute;">
</body>
<script type="text/javascript">
document.onmousemove = function(ev){
//事件对象ev
//console.log(ev);
document.getElementById("img").style.left = ev.clientX+"px";
document.getElementById("img").style.top = ev.clientY+"px";
}
</script>
<!-- div内跟随鼠标显示像素位置 -->
<body>
<div style="width: 200px;height: 200px; border: 1px solid red" id="div"></div>
<span id="span" style="position:absolute;"></span>
</body>
<script>
document.getElementById('div').onmousemove = function(ev){
document.getElementById('span').style.left = ev.clientX+"px";
document.getElementById('span').style.top = ev.clientY+"px";
document.getElementById('span').innerText = ev.clientX+"px,"+ev.clientY+"px";
}
</script>