DOM级别及DOM事件级别
一、HTML事件处理程序
缺点：HTML和JS强耦合
二、DOM0级事件处理程序
绑定与解绑：<button id=”btn”>按钮</button>
绑定：
1、获取按钮var btn = document.getElementById(“btn”);
2、绑定事件btn.onclick = function(){alert(1)}
3、解绑事件：btn.onclick = null;
三、DOM2级事件处理程序
绑定语法：obj.addEventListener(事件类型，函数名称，布尔值);
解绑语法：obj.removeEventListener(事件类型，函数名称，布尔值);
<button id=”btn”>按钮</button>
绑定：
1、获取按钮var btn = document.getElementById(“btn”);
2、绑定事件DOM2级：btn.addEventListener(“click”,show,false);
3、定义函数：function show(){alert(1)}
4、区别：可以同时绑定多个处理函数
5、btn.addEventListener(“click”,han_shu,false);
6、定义函数2：function han_shu(){alert(2)}
7、解绑：btn.removeEventListener(“click”,show,false);
四、命名法则
熊出没—xiongchumo
匈牙利xcm（每个发音的首字母）
驼峰：小驼峰xiongChuMo（除了第一个发音以外，后面的首字母都大写）
大驼峰XiongChuMo（所有的首字母都大写）
下划线：xiong_chu_mo（每个发音用下划线）
五、DOM级别和DOM事件级别
DOM级别：DOM0、DOM1、DOM2、DOM3
DOM事件级别：DOM0级事件、DOM2级事件、DOM3级事件
最原始的事件处理程序：HTML事件处理程序；缺点：HTML和JS强耦合
DOM0级事件处理程序：耦合性较小；缺点：无法同时绑定多个处理函数。
DOM2级事件处理程序：对DOM0级事件的一个弥补，可以使用DOM2级语法进行多个事件的绑定。
DOM0级事件的解绑：btn.onclick = null;
DOM2级事件的解绑：btn.removeEventListener("click",show,false)
六、属性拓展
语言属性、键盘属性、核心属性
语言属性：lang=“en”
键盘属性、核心属性style、class、id、href、src、title、alt等等。
七、兼容
浏览器的内核不同，浏览器的内核分为渲染引擎和JS引擎
八、DOM2级事件的兼容处理
备注：IE的绑定 ：attachEvent、解绑 ：detachEvent
九、页面加载事件
JS：window.onload = function(){};-----函数表达式结构创建函数
当页面所有资源加载完毕之后执行，无法同时绑定多个处理程序–DOM0级
DOM2级加载：
document.addEventListener("DOMContentLoaded",function(){
alert(2)
},false);
jQuery加载：
jQuery是由JS封装好的代码库，所以jQuery的加载事件属于DOM2级事件
事件模型与事件对象Event
一、事件模型- - - 事件流
二、事件流分类：
事件冒泡–自下而上、由内到外
事件捕获–自上而下、由外到内
三、事件冒泡：设置为false时为冒泡
阻止事件冒泡----通过event事件对象的stopPropagation()来阻止其向上传播。
四、顶级对象
五、事件捕获（自上而下）
1.window
2.document
3.html
4.body
5.目标节点
六、event对象- - -事件
1.阻止事件冒泡
event.stopPropagation();
2.阻止默认事件
七、事件源的概述
事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标（target）
事件冒泡阶段：事件从事件目标（target）开始，往上冒泡直到页面的最上一级标签。
转载：https://blog.csdn.net/weixin_45343973/article/details/101032689