事件模型 dom0和dom2

dom 0级

①来源：在之前IE与Netscape的规范则被称为DOM0
②dom0 级事件简单的来说就是普通的 “on+监听事件”

写法一：

直接在标签内部写入。

<input  id='btn' type="button" value="点击" onclick="console.log('点击了！')" >

写法二：

直接给dom元素添加。

btn.onclick = function(){
   console.log('点击了！')
}

存在参数：

btn.onclick = function(event){
   console.log('点击了！');
   console.log(event);
}

该参数event：
①（MouseEvent）对象存储着screenX/Y 和clientX/Y 屏幕位置的相对信息。
② 关于通过下面的event.srcElement属性拿到点击的dom元素。
③还可以通过event下面的其他元拿到对应所需要的信息。

dom0级相同事件会存在覆盖:

btn.onclick = function(){
   console.log('点击了---1');

}
btn.onclick = function(){
   console.log('点击了---2');

}

这时的btn点击后只会出现’点击了—2’，前面的会被覆盖掉。

解决dom0级覆盖问题:

 function fn1(){
   console.log('点击了---1');
}
 function fn2(){
   console.log('点击了---2);
}

btn.onclick = function(){
  	fn1.call(this);
	fn2.call(this);
}

通过这样改变this指向的方法，调用这两个函数，就间接的解决了覆盖的问题，（实际上时避开了覆盖问题）。

dom1级*

DOM1：开始是W3C规范。专注于HTML文档和XML文档。
所以没有修改事件的内容。

dom2级

DOM2：对DOM1增加了样式表对象模型
添加了 addEventLisener 事件绑定

btn.addEventListener("click", function(event){
      console.log('点击了!);
});

参数：

element.addEventListener(event, function, useCapture)

① event：必须。字符串，指定事件名。
②function：触发时执行的函数。
③useCapture：（布尔值） 默认为false(冒泡)，用于选择是冒泡还是捕获。

可以给一个元素多次绑定相同类型事件

可以给一个元素多次绑定相同类型事件：

btn.addEventListener("click", function(event){
      console.log('点击了---1);
});

btn.addEventListener("click", function(event){
      console.log('点击了---2);
});

点击会先执行’’点击了—1‘‘ 在显示 ’’点击了—2‘‘ ！

冒泡和捕获：

冒泡：（默认 ，第三个参数为false ，可以省略）

<div id="d1">
  <div id="d2">
    <div id="d3">点击</div>
  </div>
</div>

d1.addEventListener("click", function(){
      console.log('点击了---d1');
},false);
d2.addEventListener("click", function(){
      console.log('点击了---d2');
},false);
d3.addEventListener("click", function(){
      console.log('点击了---d3');
},false);

执行顺序：（由内向外）‘点击了—d3’—>‘点击了—d2’—>‘点击了—d1’

捕获：（ 第三个参数为true）

d1.addEventListener("click", function(){
      console.log('点击了---d1');
},true);
d2.addEventListener("click", function(){
      console.log('点击了---d2');
},true);
d3.addEventListener("click", function(){
      console.log('点击了---d3');
},true);

执行顺序：（由外向内）‘点击了—d1’—>‘点击了—d2’—>‘点击了—d3’

移除事件，和阻止冒泡：

移除事件：removeEventListener() ；
阻止冒泡：event.stopPropagation() （低版本IE：event.cancelBubble() ）

标签：function,console,log,模型,---,点击,dom0,dom2,event
来源： https://blog.csdn.net/weixin_42232622/article/details/116888117