鼠标事件
onmouseover和onmouseenter的区别??
onmouseout和onmouseover 存在冒泡
onmouseout和onmouseover是忽略元素之间的层级关系，只看鼠标在哪个元素显示的范围上，存在事件冒泡
mouseenter和mouseleave会受到元素之间的层级关系，默认阻止了事件冒泡机制 键盘事件
键盘事件
在所有浏览器中 onkeypress 事件不是适用于所有按键(如： ALT, CTRL, SHIFT, ESC)。监听一个用户是否按下按键请使用 onkeydown 事件,所有浏览器都支持 onkeydown 事件
只有input、textarea、window、document.documentElement、document.body可以绑定键盘事件
表单事件
系统事件
移动端事件
直接在HTML中定义元素的事件相关属性（DOM0）(此语法违反了内容与行为的相分离的原则)
在javascript中为元素的事件相关属性赋值（DOM0）
基于给元素的私有属性赋值，当条件达到触事件发私有属性方法
- 1.如果元素没有某个事件的私有属性，就不能基于这个方法绑定0级事件
- 2.只能绑定一个方法，如果多个绑定，只有最后一个绑定上
- 3.都是冒泡阶段触发
高级事件处理方式（事件监听），一个事件可以绑定多个监听函数（DOM2）
基于浏览器事件池机制来完成的，通过addEventListener往事件池中增加方法，
1.只要浏览器中有这个事件，都可以通过2级事件来绑定,DOMContentLoaded(jquery中的ready事件就是监听这个事件实现的)
2.同一个事件可以绑定多个方法，触发顺序，先绑定的先触发
3.可以人为规定在捕获或冒泡阶段触发，默认是在冒泡阶段
4.DOM2级事件如果不兼容IE的话需要省去on
1.DOM0级和普通绑定事件,移除事件 btn.οnclick=null;
2.DOM2级, 移除事件
var btn = document.getElementById("myBtn");
var handler = function () {
alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);
事件流描述的是从页面中接受事件的顺序,事件发生时会在元素节点之间 按照特定的顺序传播,这个传播过程即DOM事件流
dom事件流分为三个阶段
我们向水面扔一块石头,首先他会有一个下降的过程,这个过程我们可以理解为从最顶层向事件发生的具体元素(目标点)的捕获过程,之后产生泡泡,会在最低点(最具体元素)之后漂浮到水面上,这个过程相当于事件冒泡
事件冒泡 IE最早提出 事件开始由具体的元素接收,然后逐级向上传播到dom最顶层节点对的过程
事件捕获 网景最早提出 由DOM最顶层节点开始 然后逐级向下传播到具体的元素接受的过程
[注意]
js只能执行捕获或者冒泡其中的一个阶段
onclick 和attachEvent只能得到冒泡阶段
addEventListener{事件属性, 监听函数,冒泡或捕获阶段}
第三个参数如果是true表示在事件捕获阶段调用事件处理程序如果是false(不写默认是false)表示在事件冒泡阶段调用事件处理函数
<div id="diva">
<p id="pb">
<span id="spanc"></span>
</p>
</div>
<script>
var diva = document.getElementById("diva");
var pb = document.getElementById("pb");
var spanc = document.getElementById("spanc");
// 冒泡阶段 方向-- -> 由里向外（span-- -> p-----> div）
diva.onclick = function () {
alert("div");
}
pb.onclick = function () {
alert("p");
}
spanc.onclick = function () {
alert("span");
}
//捕获阶段 方向--->由外向里（div--->p----->span）
diva.addEventListener("click", function () {
alert("div");
}, true)
pb.addEventListener("click", function () {
alert("p");
}, true)
spanc.addEventListener("click", function () {
alert("span");
}, true)事件代理（event delegation）：事件代理又称事件委托，是javaScript中绑定事件的常用技巧。顾名思义，‘事件代理’就是把原本需要绑定的事件委托给父元素，让父元素负责事件监听。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能
事件委托的好处：
1.减少事件数量，提高性能
2.预测未来元素，新添加的元素仍然可以触发该事件
3.避免内存外泄，在低版本的IE中，防止删除元素而没有移除事件而造成的内存溢出
定义
事件对象常用的属性和方法
e.target e.srcElement 返回触发事件对象
e.type返回事件类型 不带on
e.preventDefult()阻止默认行为
e.stopPropagation 阻止冒泡 (阻止传播)
鼠标事件对象
e.clientX clientY 返回鼠标相对于浏览器窗口可视区的xy坐标
e.pageX e.pageY 返回鼠标相对于文档页面的xy坐标
e.screenX e.screenY 返回鼠标相对于电脑屏幕xy坐标
e.offsetX e.offset.Y 返回鼠标相对于自身的xy坐标
键盘事件对象
e.key键盘按键内容a--->a
e.code 英文键盘字符a--->keyA
e.keyCode是键盘数字a--->65
e.target和this的区别?
e.target返回的是触发事件的对象, this返回的是绑定事件对象(元素)
区别:e.target点了那个元素就返回那个元素, this那个元素绑定了这个点击事件那么就返回谁
----------------------------------------------------完结,散花------------------------------------------------------------
---------------------------------接受大佬们的批改,欢迎留言------------------------------------------------