事件对象event

事件对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等等。
当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.

ex: document.getElementById("div").onclick = function(event){}

注册事件的几种方式

//1.句柄绑定 ：
<div onclick="alert(‘我被调用了‘) </div>
//这种地方方式的缺点很明显，事件的代码太多，会使HTML的页面会乱掉 。未有分离HTML和Js代码。
//2.零级绑定：
<input type="button" value="第二种方法" id="btn">    
<script>
	document.getElementById("btn").onclick = fcuntion(){alert("123")};
</script>
//3.二级绑定/事件监听器
<input type="button" value="第三种方法" id="btn">    
<script>
	document.getElementById("btn").addEventListener("click",function(){
		alert(123)
},false)//注意：addEventListener在这里参数是没有on的
</script>

解绑事件

//解绑事件：用什么方法绑定的就用相同的方法解绑：

	document.getElementById("btn").onclick = "";
	
	document.getElementById("btn").removeEventListener("click",function(){	});
	

事件的三个阶段

事件监听器的第三个参数为布尔类型，代表了事件的阶段（默认为false ，即冒泡阶段）

事件有三个阶段：
1.事件的捕获阶段：是从外层向内层捕获，参数true；
2.事件的目标阶段
3.事件的冒泡阶段：是从里层向外层冒泡，参数为false，（默认）；

事件冒泡的特殊用法：事件委托

//在我们动态添加数据时，总会出现这样的问题，即添加数据后，为他绑定的事件没有作用，此时我们可以用事件委托来解决这个问题
  <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <input type="button" id="btn" value="点击添加li">
    <script>
        var ul = document.getElementById("ul");
        var lists = document.getElementsByTagName("li");
        document.getElementById("btn").onclick=function(){
            var li = document.createElement("li")//创建li标签
            li.innerText = 6;
            ul.append(li)//将li标签追加到ul中
        }
    //for(let i = 0; i< lists.length; i++ ){
    //    lists[i].onclick=function(){
      //      console.log(this.innerText); //此时点击之前存在的li可以触发事件，但是点击新创建的li没有任何反应
   //     }
//    }  

 //用事件委托的方式来注册事件：给li的父级ul绑定相同的事件，因为事件冒泡，点击li也触发相同的事件
    ul.onclick = function(event){
        var target = event.target || event.srcElement;    //event.target:事件源对象
        console.log(target.innerText)
    }

    </script>