addEventlistener事件对象

1.事件对象

• 函数里面，event，写在监听函数里面的函数的小括号里面。

• 事件对像只有有了事件之后才会存在。它是系统自创建的不需要参数。

• 事件对象是我们事件的一系列相关数据的集合，跟事件相关，比如数据点击事件就包含鼠标点击的相关信息，鼠标事件是键盘事件包含的键盘事件的信息比如判断用户按下那个键。

• div addEventlistener('click',function(event){
  	console.log(event)
  },true);
  

• 这个事件对象我们可以自己命名，比如：event、evt、e.

• 事件对象也有兼容性的问题，IE浏览器的6、7、8，我们通过window.event.

• div addEventlistener('click',function(event){
  	console.log(event)//普通浏览器
      console.log(window.event)//IE浏览器解决兼容性问题
  },true);
  

• 或者是下面这种写法

• div addEventlistener('click',function(event){
      e=e||window.event
  	console.log(e)//兼容性写法
  },true);
  

2.事件对象常用的方法和属性

1>.e.target返回的触发的对象。this返回的是绑定的事件对象。

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

var ul=document.querySelector('ul');
ul.addEventListener('click',function(e){
    console.log(this);//返回的是绑定的事件对象，和currentTarget一样，但是后者存在兼容性问题，实际开发喜欢前者。
    console.log(e.target);//e.target返回的触发的对象。
    //兼容性问题和上面一样。
})

2>.（1）返回事件类型

var div=document.querySelector('div');
	div.addEventListener('click',fn)
	function(e){
	console.log(e.type);//这个e.type返回的是你的绑定事件的类型。
	}

3>.（2）阻止默认事件行为

//让链接不跳转，或者是让提交按钮不提交。
var a=document.querySelector('a');
	addEvenLitstener('click',function(e){
        e.preventDefault();//dom标准写法
    })

3.阻止冒泡（面试高频）

​ **事件冒泡：**开始是由最具体的元素接受，然后逐级向上传播到DOM最顶层节点。

事件冒泡本身的特性，会带来的坏处，需要我们灵活掌握。

• **标准写法：**利用事件对象里面的e.stopPropagation()方法。

•     var father = document.querySelector('.father');
      var son = document.querySelector('.son');
      son.addEventListener('click', function (e) {
          alert('我是儿子')
          e.stopPropagation();
      }, false
      );
      father.addEventListener('click', function () {
          alert('我是爸爸')
      }, false
      );
      //冒泡阶段
  

• **非标准写法:**IE 6-8利用事件对象e.cancelBubble属性。

•     var father = document.querySelector('.father');
      var son = document.querySelector('.son');
      son.addEventListener('click', function (e) {
          alert('我是儿子')
          //e.stopPropagation();
          //e.cancelBubble=true;
          if(e&&e.stopPropagation){
              e.stopPropagation();
          }else{
              window.e.cancelBubble=true;
          }
      }, false
      );
      father.addEventListener('click', function () {
          alert('我是爸爸')
      }, false
      );
  

4.事件委托（代理、委托）

事件冒泡本身的特性，会带来坏处，也会给我们带来一些好处，需要我们灵活掌握。生活中有如下场景：

事件委托的主要原理：

不是每个子节点单独设置监听器，而是事件事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

事件委托的作用

我们只操作了一次DOM，提高了程序的性能。