dom元素事件处理机制（dom元素事件流）

一、dom元素事件类型

• 原生js事件全部以on开头

1. 浏览器事件

2. 鼠标事件

3. 键盘事件

4. 表单事件

二、dom元素添加事件

1. 在元素行内直接操作事件绑定

<button id="but" onclick="fun1()">按钮</button>
<script>
   function fun1(){
       console.log("123");
   }
</script>

• 若直接在元素上添加事件，函数不传递this，函数内部的this指window，如果传递this，函数内部的参数指当前的对象

<button id="but" onclick="fun1(this)">按钮</button>
<script>
   function fun1(args){
       console.log("123",args);
   }
</script>

<button id="but" onclick="fun1()">按钮</button>
<script>
   function fun1(){
       console.log(this);
   }
</script>

2. 获取dom元素动态绑定事件

• 对象.事件 = 匿名函数函数回调

btn.onclick = function(){
  console.log("zhao");
}

• this指针指向当前事件的执行对象

btn.onclick = function(){
  console.log("zhao",this);
}

• 若是有两个执行函数，那么后面那个执行函数会覆盖上一个执行函数

btn.onclick = function(){
  console.log("zhao",this);
  this.onclick = null;
}
btn.onclick = function(){
  console.log("jia",this);
  this.onclick = null;
}

移除这个事件

• 下面这个为执行一次再移除

btn.onclick = function(){
  console.log("zhao",this);
  this.onclick = null;//移除事件
}

• 自动触发

btn.click();

获取元素的属性

console.log(but.attributes);//获取属性的集合
but.attributes.removeNamedItem("onmouseover");//移除这个属性
console.log(but.attributes.getNamedItem("onmouseover"));//根据属性获取属性的一组值

设置元素的属性

• 把fun2()设置给but
• 方法1：

var args = document.createAttribute("onmousemove");
args.nodeValue = "fun2()";
but.setAttribute("onmousemove",fun2())

• 方法2：

but.setAttribute("onmousemove",fun2());

给一个集合对象添加事件

<button class="info">集合</button>
<button class="info">集合</button>
<button class="info">集合</button>
<button class="info">集合</button>
<button class="info">集合</button>
<script>
	var btnlist = document.getElementsByClassName("info");
   for(var i = 0;i<btnlist.length;i++){
       btnlist[i].onclick = function(){
           console.log("事件");
       }
   }
</script>

• this指向当前对象的执行对象

for(var i = 0;i<btnlist.length;i++){
   btnlist[i].onclick = function(){
       console.log("事件",this);
   }
}

• 事件闭包，需要手动释放内存

var btnlist = document.getElementsByClassName("info");
for(var i = 0;i<btnlist.length;i++){
   btnlist[i].onclick = function(){
       console.log("事件",this);
   }
}
btnlist = null;

3. 使用事件监听添加

• 先获取dom元素再进行添加。
• addEventListener（“事件类型（不带on）”，事件的执行函数，boolean类型值（捕获-true还是冒泡-false））
• addEventListener 是给同一个对象、相同的事件添加一个或者多个执行函数。
• 一次执行两个

btndate.addEventListener("click",function(){
  console.log("事件执行函数");
});
btndate.addEventListener("click",function(){
  console.log("事件执行函数");
});

• addEventListener里面的this指向的是当前的执行对象

事件监听移除事件执行函数

btndate.addEventListener("click",m1);
function m1(){
  console.log("事件执行函数");
}
btndate.addEventListener("click",m2);
function m2(){
  console.log("事件执行函数");
  console.log(this);
  this.removeEventListener("click",m2);
}

三、事件的捕获（由外向里）和冒泡（由里向外）

1. 捕获机制

• addEventListener第三个参数默认是false，为冒泡，true为捕获。.

<div id="block" style=" width: 100px; height: 100px; border: 1px solid red;">
   <button id="btnlist">按钮</button>
</div>
<script>
	block.addEventListener("click",function(){
       console.log("div的事件");
   },true)
   btnlist.addEventListener("click",function(){
       console.log("button的事件");
   },false)
</script>

2.冒泡机制

<div id="block" style=" width: 100px; height: 100px; border: 1px solid red;">
   <button id="btnlist">按钮</button>
</div>
<script>
	block.addEventListener("click",function(){
       console.log("div的事件");
   },false)
   btnlist.addEventListener("click",function(){
       console.log("button的事件");
   },true)
</script>

• 必须是给父元素设置，因为子元素内部没有事件，设置无效。

四、事件里面的this指针

• 事件里面的this指针指向当前执行该事件的对象。

	var listle=document.querySelectorAll(".list");
    var count=0;
    for(var i=0;i<listle.length;i++)
    {
        listle[i].addEventListener('click',function(){
            count++;
            console.log(this);
        },true);
    }