js事件及事件对象eventjs事件及事件对象event 事件类型鼠标事件 click 点击 dblclick

js事件及事件对象event

事件类型

鼠标事件

click 点击
dblclick双击
mouseover || mouseenter鼠标移入
mouseout || mouseleave鼠标离开

onmouseover和onmouseenter的区别??

onmouseout和onmouseover 存在冒泡

onmouseout和onmouseover是忽略元素之间的层级关系，只看鼠标在哪个元素显示的范围上，存在事件冒泡

mouseenter和mouseleave会受到元素之间的层级关系，默认阻止了事件冒泡机制键盘事件

键盘事件

keydown键盘按下
keyup键盘抬起
keypress 键盘按键被按下并释放一个键时发生

在所有浏览器中 onkeypress 事件不是适用于所有按键(如： ALT, CTRL, SHIFT, ESC)。监听一个用户是否按下按键请使用 onkeydown 事件,所有浏览器都支持 onkeydown 事件

只有input、textarea、window、document.documentElement、document.body可以绑定键盘事件

表单事件

input 只要内容(value)改变就会触发(移动端用，代替keyup keydown)
change 内容改变并且失焦才触发
focus 获取焦点
blur 失去焦点

系统事件

scroll 监听滚动
load 监听页面渲染
resize 监听页面视口大小改变
$(document).ready() jQuery里的ready事件，原生没有。
ready和load区别：ready是页面DOM结构加载完成就会触发，比onload触发早

移动端事件

click 在移动端可以用，但是有300ms延迟
touchmove 手指移动
touchstart 手指按下
touchend 手指抬起

事件定义（3种方法）

直接在HTML中定义元素的事件相关属性（DOM0）(此语法违反了内容与行为的相分离的原则)

在javascript中为元素的事件相关属性赋值（DOM0）

基于给元素的私有属性赋值，当条件达到触事件发私有属性方法

1.如果元素没有某个事件的私有属性，就不能基于这个方法绑定0级事件

2.只能绑定一个方法，如果多个绑定，只有最后一个绑定上

3.都是冒泡阶段触发

高级事件处理方式（事件监听），一个事件可以绑定多个监听函数（DOM2）

基于浏览器事件池机制来完成的，通过addEventListener往事件池中增加方法，

1.只要浏览器中有这个事件，都可以通过2级事件来绑定,DOMContentLoaded(jquery中的ready事件就是监听这个事件实现的)
2.同一个事件可以绑定多个方法，触发顺序，先绑定的先触发
3.可以人为规定在捕获或冒泡阶段触发，默认是在冒泡阶段
4.DOM2级事件如果不兼容IE的话需要省去on

.移除事件（2种）

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事件流

dom事件流分为三个阶段

1.捕获阶段,事件对象沿dom树向下传播(由外向里)
2.'目标触发,运行事件监听函数
3.事件冒泡,事件沿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中，防止删除元素而没有移除事件而造成的内存溢出

event对象

定义

event就是一个事件对象写到我们监听函数的小括号里面当形参来看,
事件对象只有事件才会存在, 他是系统自动创建的,不需要我们传递参数
事件对象是我们事件的一系列相关数据的集合跟事件相关的比如鼠标点击包含了鼠标相关信息鼠标坐标,如果是键盘事件里面包含了键盘事件的信息,比如判断用户按下了那个键
这个事件对象我们可以自己命名比如event evt e
事件对象有兼容性问题通过window.event

事件对象常用的属性和方法

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那个元素绑定了这个点击事件那么就返回谁

----------------------------------------------------完结,散花------------------------------------------------------------

---------------------------------接受大佬们的批改,欢迎留言------------------------------------------------

js事件 及 事件对象event