JavaScript中的DOM事件

DOM事件

• DOM
  什么是DOM？，JavaScript由ECMA、DOM、BOM三部分组成，其中ECMA是JS的基础语法，规定了JS的关键字，运算符，数据类型，变量的声明，语法等。BOM是浏览器对象模型的缩写（BrowserObjectMode），核心对象是 window,它表示浏览器的一个实例，也是ECMAScript规定的Globle对象，是各个浏览器厂商根据DOM在各自浏览器上的实现，通过JS来操作浏览器。DOM是文档对象模型的缩写，是W3C制定的，简单来说，html标签在被浏览器渲染的时候会生成一颗标签树，我们把这颗由标签树称为文档树或者文档，而每一个标签在JS中都可以被抽象成一个对象，既 DOM就是标签文档在JS中的对象映射，通过JS来操作html元素，定义了访问和操作这些文档的方法（API），使用DOM，可以构建文档导航其结构以及添加删除元素和内容

• DOM树
  
  1.根据DOM树可知，出现在html中的标签在被浏览器解析时都会被挂在dom树上
  2.dom树上每个标签都是独立的，都有自己的属性和方法，方法也和dom的事件是挂钩的，通常会在标签上注册一个事件，当事件满足条件被触发以后，就会执行我们预定义好的方法
  3.事件就是：让html在某些特定条件下执行了一段js脚本，特定事件如：点击，鼠标经过，键盘输入等，这些条件以属性的形式呈现在html代码中，而触发执行的js脚本则称为方法：如

  <div onclick = "fn()"></div>
  <script>
      function fn(){
          alert("我被点击了");
      }
  </script>
  

  onclick为某些条件的事件句柄，fn为事件满足后要执行的函数，事件分为以下几种写法：原始写法（和html混合在一起），dom0级，dom2级
  原始写法：和html混合在一起，缺点代码高冗余，无法添加多个事件处理函数。
  dom0级：将html代码和js代码分离，且支持匿名函数，可以看到完美的改进了1的冗余缺憾，所有的事件相关操作都在js中完成

  //html代码
  <div id="a"></div>
  
  //js代码
  var div1 = document.getElementById("a");
  a.onclick=function(){
     alert("我被单击了");
  }
  

  dom2级：ie使用attachEventListener其他非ie使用addEventListener，支持绑定多个事件。

  //html代码
   <div id="one">one</div>
  
  //js代码
    one.addEventListener('click',function fn1(){
  	console.log('1')
  	})
    one.addEventListener('click',function fn2(){
  	console.log('2')
  	})
  //输出 1  2（因为one拥有一个队列，采用先进先出，先输出1后输出2）
  
  
  使用removeEventListener可以出队
  	one.removeEventListener('click',fn2)
  	//这时只输出1
  	    
  
  
  

• 事件流
  描述的是从页面中接收事件的顺序。接收的顺序，则有两种，事件捕获和事件冒泡。事件捕获（w3c）：从最不具体的到最具体的，从最外层的window到内层的具体元素。事件冒泡（ie提出）：从最具体的到最不具体的，从内层的具体元素到最外层的window。现在的浏览器执行顺序，事件捕获-》目标阶段-》事件冒泡，一句话就是，先捕获后冒泡， addEventListener这个方法的第三参数，如果不设置，默认是false，表示该事件是冒泡阶段，如果设置为true，则为捕获。

  		<div id="one">one
  		  <div id="two">two
  		    <div id="three">three
  		    </div>
  		  </div>
  		</div>
  	one.addEventListener('click',function fn1(){
  	console.log('1')
  	})
  	two.addEventListener('click',function fn2(){
  	console.log('2')
  	},true)
  	three.addEventListener('click',function fn3(){
  	console.log('3')
  	})
  

  以上代码，点击three,因为fn2被设置为true，为捕获事件，所以先输出fn2上，其余事件为冒泡事件，按照从内到外进行打印输出，先3后1。
  注：如果最里层，元素绑定了两个事件，一个设置为冒泡，一个设置为捕获，则按照代码先后顺序依次执行。

• target、This、currentTarget
  target:触发事件的某个具体对象，只会出现在事件流的目标阶段（谁触发谁命中，所以肯定是目标阶段）
  currentTarget:绑定事件的对象，恒等于this，可能出现在事件流的任意一个阶段中
  通常情况下terget和currentTarget是一致的，我们只要使用terget即可，父子嵌套关系中，父元素绑定了事件，这个时候currentTarget指向的是父元素，因为他是绑定事件的对象，而target指向了子元素，因为他是触发事件的那个具体对象，如下代码和截图所示：

  <div id="one">
     <div id="three"></div>
  </div>
  
  one.addEventListener('click',function(e){
      console.log(e.target);  //three
      console.log(e.currentTarget);  //one
  },false);
  

  本篇文章借鉴了https://www.cnblogs.com/54td/p/5936816.html