dom元素绑定事件的三种方式
DOM元素绑定事件的三种方式：
JavaScript与HTML之间的江湖是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间（例如：鼠标点击页面、复制文本等）。
- 事件属于对象的被动行为。
- 方法属于主动行为。
事件的绑定方式：普通方式、动态绑定方式、监听方式
常见的事件：
- 鼠标事件：mouseover（鼠标悬停）、mouseup(鼠标抬起）、 mousedown(按下) 、click(单击) 、dbclick双击事件、mouseleave（鼠标离开）、 mouseout（鼠标离开）、 mousemove（鼠标移动）、 mouseenter（鼠标进入）、 mousewheel（滚轮）
- 键盘事件：keypress keydown keyup
- 表单事件：focus（获焦）、 blur（失焦）、 submit（提交）、 change（文本发生变化）、 input(获取用户输入事件)
- 浏览器事件 ：scroll（滚动条）、load（加载完成）、error（加载失败）、 resize（窗口大小变化）、contentmenu(右键打开浏览器菜单)
- 剪贴版事件：cut（剪贴）、copy（复制）、 paster(粘贴)、selectstart （选择）
普通方式：
在元素标签内直接写事件+相应事件触发后的方法调用
需要注意，这里的事件前面需要加上“on”。
<button onclick="btnhandle()" onmouseenter="enterbtn()" onmouseleave = "leavebtn()">按钮</button>
<script>
function btnhandle(){
console.log(1);
}
function enterbtn(){
console.log("鼠标进入");
}
function leavebtn(){
console.log("鼠标离开");
}
</script>
动态事件绑定：
动态事件绑定，需要先获取dom元素再绑定事件，获取dom元素可以参看原生js获取dom对象
动态事件绑定存在内存泄露，所以务必要注意回收。
var btn=document.getElementById("btn");//获取dom元素
//事件动态绑定
btn.onmousemove=function(){
console.log("鼠标移动");
}
//移除动态绑定事件
btn.onmousemove = null;
多元素动态直接绑定：
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
<li>第四节</li>
<li>第五节</li>
</ul>
<script>
var liele = document.getElementsByTagName("li");
//在网页中点击当前li，输出当前的li对应获取dom元素集合中的下标。
for (var i = 0;i<liele.length;i++)
{
//事件闭包
//这里如果不写成闭包形式，点击当前li,输出的会是最后一个
//li对应dom元素集合中的下标
(function(n){
liele[i].onclick=function(){
console.log(n);
}
})(i);
}
</script>
事件的监听：
使用addEventListener方法，该方法有三个参数：事件的类型、监听的函数、事件的冒泡和捕获控制（true/false）
注：addEventListener方法的第三个参数默认值为false。
//监听btn的click事件
//事件监听时，事件类型参数中不带“on”
//将监听的函数写在内部
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
console.log("执行单击事件");
});
//将监听的方法写到外面
btn.addEventListener("click",eventhandle);
function eventhandle(){
console.log("登录按钮被点击");
//事件监听移除
this.removeEventListener("click",eventhandle);
}
- 事件的冒泡：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。简而言之，就是由里向外进行冒泡。
- 事件的捕获：是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于事件到达预定目标之前捕获它。
对于冒泡和捕获的解释：
EXAMPLE !!
"myDiv">Click me
冒泡：如果点击了页面中的div元素，click事件会按照如下顺序传播：
div–>body–>html–>document
捕获：如果点击了页面中的div元素，click事件会按照如下顺序传播：
docum–>html–>body–>div
代码举例：
<style>
#block {
width: 200px;
height: 250px;
background: deeppink;
}
#box {
width: 100px;
height: 150px;
background: green;
}
</style>
</head>
<body>
<div id="block">
<div id="box">
<button id="btn">按钮</button>
</div>
</div>
<script>
var btn = document.getElementById("btn");
var block=document.getElementById("block");
var box=document.getElementById("box");
var count=0;
//冒泡
btn.addEventListener("click",function(){
count++;
console.log("btn",count);
},true);
box.addEventListener("click",function(){
count++;
console.log("box",count);
},true)
block.addEventListener("click",function(){
count++;
console.log("block",count);
},true)
//addEventListener的第三个参数为false，第一次点击按钮输出的结果为btn 1；box 2；block 3
//addEventListener的第三个参数为true，第一次点击按钮输出的结果为block 1；box 2；btn 3
</script>
</body>