js事件绑定,事件监听,事件委托

首先要对 DOM 元素绑定事件函数.

1.直接绑定DOM元素

<input type="button" value="click me" οnclick="fn()">
 
<script>
function fn(){
 console.log("绑定DOM元素")
}
</script>

2.在script中获取DOM元素进行绑定

<input type="button" value="click" id="btn">
 
<script>
document.getElementById("btn").onclick = function(){
 console.log("js获取DOM元素")
}
</script>

3.绑定事件监听函数

<input type="button" value="click me" id="btn1">   IE8以下不支持
 
<script>
document.getElementById("btn1").addEventListener("click",fn);
function fn(){
 console.log("事件监听")
}
</script>

3. 绑定事件监听函数IE中

<input type="button" value="click" id="btn2">
 
<script>
document.getElementById("btn2").attachEvent("onclick",fn);
function fn(){
 console.log("IE事件监听")
}
</script> 

事件监听的优点: 正常事件绑定,之后执行后面的事件函数 例:

<button id="btn1">点击</button>
<script>
var btn =document.getElementById("btn1")
btn.onclick = function() {
   console.log(1) // 不执行
}
btn.onclick = function () {
   console.log(2) // 执行
} 

事件监听: 

<button id="btn1">点击</button>
document.getElementById("btn1").addEventListener("click",hello1);
document.getElementById("btn1").addEventListener("click",hello2);
function hello1 () {
   console.log(2);// 执行
}
function hello2 () {
   console.log(3); // 执行
}

也可以单独删除对应的绑定

btn1.removeEventListener("click",hello2);

事件委托就是利用事件冒泡的原理,加在父元素或者祖先元素

最原始写法:

<ul>
  <li id="list1"></li>
  <li id="list2"></li>
  <li id="list3"></li>
</ul>
<script>
var list1= doucment.getElementById("list1")
var list2= doucment.getElementById("list2")
var list3= doucment.getElementById("list3")
list1.onclick = function () {
   console.log(list1)
}
list2.onclick = function () {
   console.log(list2)
}
list3.onclick = function () {
   console.log(list3)
}
</script>

事件委托写法: 

<ul id="list">
 <li id="list1" >list1</li>
 <li id="list2" >list2</li>
 <li id="list3" >list3</li>
</ul>
 
<script>
var list1= document.getElementById("list1");
var list2= document.getElementById("list2");
var list3= document.getElementById("list");
 
document.addEventListener("click",function(event){
 var target = event.target;
 if(target == list1){
    alert("list1");
 }else if(target == list2){
    alert("list2");
 }else if(target == list3){
    alert("list3");
 }
})