dom事件

术语

事件：发生一件事
事件类型：发生什么事情；点击、鼠标按下、鼠标抬起、鼠标移入、鼠标移出、键盘按下、键盘抬起...
事件处理程序：一个函数，当某件事情发生时运行。
事件注册：将一个事件处理程序，挂载到某个事件上。

事件流

事件流：当某个事件发生的时候，哪些元素会监听到该事件发生，这些元素发生该事件的顺序。

当一个元素发生了某个事件时，那该元素的所有祖先元素都发生了该事件

事件冒泡：先触发最里层的元素，然后再依次触发外层元素事件捕获：先触发外层的元素，然后再依次触发里面元素

目前，标准规定，默认情况下，事件是冒泡的方式触发。

事件源、事件目标：事件目标阶段的元素

事件注册

事件绑定

dom0

将事件名称前面加上on，作为dom的属性名，给该属性赋值为一个函数，即为事件注册。

移除：重新给事件属性赋值，通常赋值为null和undefined

   var dom = document.getElementById("div1")
   dom.onclick = function(){
      console.log("123");
   }

   dom.onclick=null;

dom2

dom对象.addEventListener：注册事件

与dom0的区别

dom2可以为某个元素的同一个事件，添加多个处理程序，按照注册的先后顺序运行
dom2允许开发者控制事件处理的阶段，使用第三个参数，表示是否在捕获阶段触发
1. 如果元素是目标元素（事件源），第三个参数无效

事件的移除：dom对象.removeEventListener(事件名, 处理函数);

dom2中如果要移除事件，不能使用匿名函数

细节：

dom2在IE8及以下不兼容，需要使用attachEvent，detachEvent添加和移除事件
添加和移除事件时，可以将第三个参数写为一个对象，进行相关配置
如果设置了捕获阶段配置，那么在移除事件时也要加上。

var btn = document.getElementById("btn1");

// 绑定事件
btn.addEventListener("click", function() {
   console.log("btn1");
}, false);

btn.addEventListener("click", function() {
   console.log("btn2");
}, true);


// 移除事件
const handler2=()=>{
   console.log("事件2");
};

btn.removeEventListener('click',handler2)

   div.addEventListener("click", divHandler1, {
      once:true,
      capture: true
   })

   btn.removeEventListener('click',handler2,true);//要配置捕获才能移除

dom事件 ​

术语 ​

事件流 ​

事件注册 ​

dom0 ​

dom2 ​

dom事件

术语

事件流

事件注册

dom0

dom2