DOM事件流 :注册事件 -删除事件

注册事件

传统注册方式

     利用on开头事件 例：<button onclick = "alert("hi->
      btn.onclick = function(){}
     特点：注册事件得唯一性

<button>传统注册事件</button>
<script>
	var btns = document.querySelectorAll('button')
      btns[0].onclick = function () {
        alert('123456')
      }
      btns[0].onclick = function () {
        alert('我们都是好孩子')
      }
      //会覆盖上一个事件
</script>

事件侦听事件 addEventListener

     注：里面得事件类型时字符串 必须加引号且不带on
     W3c标准推荐方法
      addEventListener()他是一个方法
      IE9之前不支持 可使用attachEvent()代替
     特点：统一元素同一事件可以注册多个监听器 安注册顺序执行
     addEventListener add添加 EventL事件 Listener听
      EventTarget.addEventListener(type,listener[,useCapture]);
     EventTarget.addEventListener()方法将指定得监听器注册到eventTarget(目标对象)上，当该对象触发指定事件时，就会执行世纪那处理函数
      三个参数：
      type 事件类型字符，例：click。mouseover 注意这里不加on
      listener 时间处理函数，事件发生时就会监听函数
      useCapture 可选参数 是一个布尔型，默认false

	<button>方法监听事件</button>
	//1.
	btns[1].addEventListener('click', function () {
        alert('4567896')
      })
      btns[1].addEventListener('click', function () {
        alert('我喜欢你')
      })
	//2.
	btns[1].addEventListener('click',fn)
	function fn(){
		alert(123)
	}


	

attachEvent事件监听事件

     注：IE9之前用法 IE9之后用addEventListener
     谷歌不支持 以及ie不支持addEventListener

	<button>ie9 用法</button>
	EventTarget.attachEvent()
      btns[2].attachEvent('oncilck', function () {})

解决attachEvent、addEventListener兼容性方法

//注册事件兼容性处理方案
      function addEventListener(element, eventName, fn) {
        //判断当前浏览器是否支持 addEventListener 方法
        if (element.addEventListener) {
          element.addEventListener(element, fn) //第三个参数默认是false
        } else if (element.attachEvent) {
          element.attachEvent('on' + eventName, fn)
        } else {
          //相当于element.oncilckk = fn;
          element['on' + eventName] = fn
        }
      }
      //原则：首先照顾大多数浏览器，在处理特殊浏览器

删除事件

传统方法解绑事件

<div>1</div>
<script>
	var divs = document.querySelector('div')
      divs.onclick = function () {
        alert(11)
        //传统方法解绑事件
        divs.onclick = null
      }
</script>

方法监听事件删除事件 eventTarget.removeEventListener(type,listennrt[,useCapture])

<div>2</div>
var divs = document.querySelector('div')
 divs.addEventListener('click', fn) //里面得fn 不需要调用加小括号
      function fn() {
        alert(22)
        divs.removeEventListener('click', fn)
      }

方法监听事件删除事件 eventTarget.removeEventListener(type,listennrt[,useCapture])

注：该方法只有再IE浏览器及IE9内核以下运行以下

<div>3</div>
var divs = document.querySelector('div')
 div.attachEvent('click'.fn1)
      function fn1() {
        alert(33)
        div.datachEvent('onclick', fn1)
      }

删除事件removeEventListener、datachEvent兼容性解决方法

function removeEventListener(element, eventName, fn) {
        //判断当前浏览器是否支持removeEventListener方法
        if (element.removeEventListener) {
          element.removeEventListener(eventName, fn)
        } else if (element.datachEvent) {
          element.datachEvent('on' + eventName, fn)
        } else {
          element['on' + eventName] = null
        }
      }

JS事件只能执行捕获或者冒泡其中一个得一个阶段 onclick和attachEvent

attachEvent和onclick只能得到冒泡阶段
EventTarget.addEventListener(type,listener[,useCapture]);第三个参数如果为true 表示捕获阶段调用事件处理程序 如果为·false 表示在时间冒泡阶段调用时间处理程序

捕获阶段 如果addEventListener 第三个参数时true 那么处于捕获阶段

	<div class="father">
      <div class="son">son盒子</div>
    </div>

var son = document.querySelector('.son')
      son.addEventListener(
        'click',
        function () {
          alert('son')
        },
        true
      )
      var father = document.querySelector('.father')
      son.addEventListener(
        'click',
        function () {
          alert('father')
        },
        true
      )

这里是 先弹出 father 再弹出 son 体现出执行过程是 document -> html -> body -> father -> son

冒泡阶段 如果addEventListener false 那么处于冒泡阶段

	<div class="father">
      <div class="son">son盒子</div>
    </div>

var son = document.querySelector('.son')
      son.addEventListener(
        'click',
        function () {
          alert('son')
        },
        false
      )

      var father = document.querySelector('.father')
      son.addEventListener(
        'click',
        function () {
          alert('father')
        },
        false
      )

      document.addEventListener('click', function () {
        alert('document')
      })

这里是 先弹出 son 在弹出 father 在弹出 document体现出执行过程为 son -> father -> body -> html -> document

实际开发提议

实际开发中 事件捕获用的比较少 更关注事件冒泡
有些事件也是没有冒泡得 例如：onblur onfocus onmouseennter onmouseleave
事件冒泡也会带来麻烦