第十六节: JavaScript 事件处理模型与事件对象

一.事件处理模型

当一个dom节点触发事件后，该事件会按照HTML结构在根节点和这个元素节点之间传播，路径上所有的节点都会收到该事件


1. 什么是事件处理模型

事件流就是当你单击了某个元素，单击事件不仅仅发生在这个元素上，你也单击了它的父元素、父元素的父元素、……它的祖先元素，甚至单击了整个页面。

“事件流”描述的是页面上各个元素接收事件的顺序。

我们为了描述事件的传播顺序，特意人为规定了两个阶段：捕获阶段、冒泡阶段。点击页面上的一个元素，事件在哪个阶段触发，这取决于添加事件监听的方法。


2. DOM 0级事件绑定

我们之前学习的

oDiv.onclick = function(){
}

这种注册监听的写法，就是DOM0级的事件绑定方法。就是把onclick当做属性添加给了oDiv元素。

通过实验，我们发现，这种事件添加方法，只能监听冒泡过程。事件的捕获阶段，没有监听成功。

这里需要注意，在IE 9、Chrome里面，事件会冒泡到window对象，而IE 6、7、8仅仅冒泡到document对象。

另外，用这种方法绑定的监听，this指的是触发这个事件的元素，没有任何的浏览器兼容问题。

注意: DOM0级还有一种写法，直接将监听写在标签里面，工作中基本用：

<div id="box1" onclick="alert('我是box1');">
<div id="box2" onclick="alert('我是box2');">
  <div id="box3" onclick="alert('我是box3');">

  </div>
</div>
</div>

写在HTML标签里面代码耦合性很强，三层没有完全分离，工作中不用的。这种写法，也是监听冒泡阶段。


3.DOM 2级事件绑定

DOM 2事件绑定是通过新增的 addEventListener ()来监听事件

oBox.addEventListener("click",function(){
    
},false);

第1个参数：事件名不用写on， click、mouseover 、mouseout

第2个参数：函数可以是匿名函数，也可以是有名函数

第3个参数：布尔值，true表示监听捕获、false表示监听冒泡阶段

比如:

box1.addEventListener("click", function(){
    alert("box1被点击，捕获阶段");
}, true)

第三个参数是true，表示监听box1的捕获阶段的单击事件。

小题目

<div id="box1">
    <div id="box2">
        <div id="box3">

        </div>
    </div>
</div>

对应的js

box2.addEventListener("click", function(){
    alert(1);
}, true);   //捕获阶段

box1.onclick = function(){
    alert(2);   //冒泡阶段
}

box2.addEventListener("click",function(){
    alert(3);
},false);   //冒泡阶段

弹出顺序1、3、2.


4. 低版本IE的事件绑定

IE6、7、8不支持addEventListener()方法，

oDiv.attachEvent("onclick",函数)

没有第三个参数，也就是说，不能选择监听捕获、冒泡。只能监听冒泡。

box1.attachEvent("onclick", function(){
    alert("box1");
});

第一个参数，必须写on，和addEventListener()不一样；

第二个参数，就是事件处理函数

没有第三个参数，只能监听冒泡。所以和on***写法一样。

事件流永远是先下后上，先捕获后冒泡。但是不同的添加监听的方式，决定了能够监听那一部分。


总结

  1. DOM 0级的方式，只能监听冒泡阶段。不能有同名的事件，会覆盖。

    • this是触发事件的这个元素。

    • 高版本浏览器会冒泡到window，

    • 低版本浏览器冒泡到document。

  2. DOM 2级的方法，addEventListener()，

    • 可以自由设置冒泡、捕获。第三个参数: true就是捕获，false就是冒泡。
    • 事件名不加on，可以有同名事件，会顺序执行，不覆盖。
    • this是触发事件的这个元素。
    • 事件会冒泡到window。

  3. IE 6、7、8是自己的方法，attachEvent()，

    • 只能监听冒泡阶段。没有第三个参数。
    • 事件名写on。可以有同名事件，会反着执行（事件栈）。
    • this很蛋疼，是window而不是触发事件的这个元素。
    • 事件仅仅冒泡到document。

<span style='color:red;'>面试意义大于实际意义。</span>


三. 事件对象

任何的事件处理函数，我们的浏览器、JS引擎会默认往里面传一个实参，就是事件对象。

通常用形参event来接收：

oDiv.onclick = function(event){
    console.log(event);
}

浏览器在调用这个事件处理函数，调用的时候还传进去一个实际参数

这个参数是一个对象，表示这次点击事件的所有细节。比如按的什么按钮、点击的位置等等。

所有这次事件的细节，都被封装到了这个event对象里面。

比如获取鼠标当前位置

document.onmousemove = function(event){
    h1.innerHTML = "当前鼠标坐标为" + event.clientX + "," + event.clientY;
}

event.clientX表示触发事件的时候，鼠标的x位置（相对于视口）

不同的事件，就有不同的event值。可以想象到键盘事件，没有鼠标的位置。


1. 通用事件对象属性和方法

  1. event.type 返回事件的类型，没有on， 比如”click”

  2. event.target 返回你点击的最小的那个元素，即使这个元素身上没有监听，也是返回它

  3. event.currentTarget 返回自己，this一定和event.currentTarget是一个元素，都是

  4. event.button 区分左键,中间,右键

  5. 阻止事件流

    stopPropagation() 停止传播事件流

    event.stopPropagation();

  1. 阻止默认事件

    右键出菜单 图片拖动 a标签跳转 表单提交这些网页的默认事件

    preventDefault() 阻止默认事件

    event.preventDefault();


2. 事件对象上储存的常用信息

clientX/clientY 鼠标距离浏览器左上角的水平/竖直距离
pageX/pageY 鼠标距离页面左上角的水平/竖直距离
offsetX/offsetY 鼠标距离触发事件的元素左上角的水平/竖直距离
layerX/layerY 鼠标距离最近定位父级元素左上角的水平/竖直距离
screenX/screenY 鼠标距离计算机屏幕左上角的水平/竖直距离


3. IE6、7、8的兼容问题

超级兼容大坑：在调用事件处理函数的时候，高级浏览器是传给这个事件处理函数一个实际参数event对象。但是IE6、7、8是给window对象绑定一个当前的event属性。

IE中的鼠标位置

document.onmousemove  = function(){
    h1.innerHTML = "当前鼠标坐标为" + window.event.clientX + "," + window.event.clientY;
}
3.1 IE 事件对象兼容方法
//在页面上鼠标移动的时候，触发事件
document.onmousemove  = function(event){
    event = event || window.event;
    h1.innerHTML = "当前鼠标坐标为" + event.clientX + "," + event.clientY;
}

|| 就是或逻辑短路运算符，如果event有定义，那么就event对象；否则就是window.event对象。

3.2 IE 事件对象中的不兼容的方法

  1. 阻止默认事件

    • 主流浏览器

      event.preventDefault();

    • 在IE中是一个属性：

      event.returnValue = false;

    • 这些的兼容性问题，就用能力检测来解决：

      //阻止默认的滚动事件，阻止的方法有浏览器兼容问题：
if(event.preventDefault){
   event.preventDefault();
}else{
   event.returnValue = false;
}

  1. 阻止事件冒泡

    • 主流浏览器

      event.stopPropagation()

    • 在IE中是一个属性：

      event.cancelBubble=true;

    • 这些的兼容性问题，就用能力检测来解决：

      if(event.stopPropagation){
   event.stopPropagation()
}else{
   event.cancelBubble=true;
}

  1. 事件源兼容

    • 主流浏览器

      event.target

    • 在IE中是一个属性：

      event.srcElement;

    • 这些的兼容性问题，就用短路语法：

      var targetElem = event.target || event.srcElement;
  1. 总结IE 6、7、8中不支持方法，我们要记住这三个：

  1. event.preventDefault()不兼容！ 在IE 6、7、8中用event.returnValue=false; 代替

  2. event.stopPropagation()不兼容！在IE 6、7、8中用event.cancelBubble=true;代替

  3. event.target不兼容，在IE 6、7、8中用event.srcElement代替


4. 什么是事件委托

利用事件冒泡的原理把子级的事件委托给祖先元素

优点:

不需要循环绑定每个子元素，可以节约浏览器性能
添加新的子元素时，不需要再给新元素绑定事件


四.滚轮事件

1. 滚轮事件及方向值

1.1 滚轮事件

滚轮事件就是鼠标滚动的时候触发，

oDiv.onmousewheel = function(event){
    oDiv.innerHTML =    event.wheelDelta;
}

onmousewheel就是鼠标滚动事件，mouse鼠标，wheel就是轮子。


1.2 滚轮方向值

event参数最最重要的事就event.wheelDelta属性，表示滚动的方向。这是浏览器的规定：

鼠标往上滚， 120

鼠标往下滚， -120

如果滚动快速，可能出现120的整数倍，正负性是一样的。

onmousewheel事件的触发，是滚轮滚动一“咯噔”触发一次。

{passive: false}


2. 火狐浏览器不兼容

2.1 获取的滚轮事件

火狐使用自己的专用事件DOMMouseScroll，并且这个事件只能通过标准的DOM2级的事件绑定方式添加。

oDiv.addEventListener("DOMMouseScroll",function(event){
    oDiv.innerHTML = event.detail;  
},false);


2.2 火狐的滚轮方向值

火狐表示滚动方向的事件的属性叫做event.detail。

detail就是细节的意思。

注意:火狐滚轮方向值和其他的不一样,并且反着的

滚动方向往上，-3；

滚动方向往下，3


3.兼容性封装

当我们给Chrome或者IE添加一个DOMMouseScroll事件的时候，会静默，不会报错。

function mousewheelhandler(event){
    event = event || window.event;   //→ 解决IE6、7、8和高级浏览器的不兼容
    
    //Chrome、IE用的是event.wheelDelta;
    if(event.wheelDelta){  //→ 解决火狐和其他浏览器的不兼容
        var direction = event.wheelDelta > 0 ? 1 : -1;
    }else if(event.detail){
        //火狐用的是event.detail;
        var direction = event.detail > 0 ? -1 : 1;
    }

    console.log( direction);
}

这个事件处理程序中，已经屏蔽不兼容。

//给IE、Chrome添加事件
oDiv.onmousewheel = mousewheelhandler;
//给火狐添加事件
oDiv.addEventListener("DOMMouseScroll",mousewheelhandler,false);

例子:

/*
    ie/chrome : onmousewheel
      event.wheelDelta
        上：120
        下：-120

    firefox : DOMMouseScroll 必须用addEventListener
      event.detail
        上：-3
        下：3

    return false阻止的是  obj.on事件名称=fn 所触发的默认行为
    addEventListener绑定的事件需要通过event下面的preventDefault();
*/

var oBox = document.getElementById('box');

oBox.onmousewheel = fn;

if(oBox.addEventListener){
    oBox.addEventListener('DOMMouseScroll',fn,false);
}

function fn (e){
    e = e || window.event;
    // console.log(1)
    // console.log(e.wheelDelta)
    // console.log(e.detail)
    var direction
    if(e.wheelDelta){  //→ 解决火狐和其他浏览器的不兼容
        direction = e.wheelDelta > 0 ? 1 : -1;
    }else if(e.detail){
        //火狐用的是event.detail;
        direction = e.detail > 0 ? -1 : 1;
    }
    this.style.height = this.offsetHeight - (direction * 10) + 'px';
    if (e.preventDefault) {
        e.preventDefault();
    }
    return false;
}


五. 键盘事件

1. onkeydown 键盘按下

当键盘按下时触发的事件

oInp.onkeydown = function(){
  console.log(1)   
}


2. onkeyup 键盘抬起

当键盘抬起时触发的事件

oInp.onkeyup = function(){
  console.log(1)   
}


3. onkeypress 键盘按下

键盘按下触发,和onkeydown相似,

onkeypress不是按下所有键都触发,功能键触发,

onkeydown是键盘上所有按键都会触发

oInp.onkeypress = function(){
  console.log(1)   
}


4. 常用功能键

ctrlKey shiftKey altKey

对应的keyCode为17,16,19

如果功能键被按下了就是true,没按下就是false

box.onkeydown= function(e){
    console.log(e.altKey);  //返回布尔值
}

Enter 键对应的keyCode 为13

左上右下键 对应的keyCode 为37,38,39,40


5 例子

5.1 留言功能
oInp.onkeyup = function(e){
    e = e || window.event;

    if(this.value != ''){
        console.log(e.keyCode)
        if(e.keyCode == 13 && e.ctrlKey){
            var oLi = document.createElement('li');
            oLi.innerHTML = this.value;

            if(oUl.children[0]){
                oUl.insertBefore(oLi,oUl.children[0])
            }else{
                oUl.appendChild(oLi)
            }
        }
    }
}


5.2 方向键移动
var oBox = document.getElementById('box');

document.onkeydown = function(e){
    e = e || window.event;

    switch(e.keyCode){
        case 37:
            oBox.style.left = oBox.offsetLeft - 10 + 'px';
            break;
        case 38:
            oBox.style.top = oBox.offsetTop - 10 + 'px';
            break;
        case 39:
            oBox.style.left = oBox.offsetLeft + 10 + 'px';
            break;
        case 40:
            oBox.style.top = oBox.offsetTop + 10 + 'px';
            break;
    }
}


五.捕获错误

try{……}catch(ex){}

try表示尝试，里面的语句可能有错误，catch(ex)参数ex就是try语句段里面出现的错误。在catch里面进行了一个捕获，可以把错误控制在这个catch语句块里，而不向浏览器抛出。

try{
    console.log("123");
    var a = b;  //这行语句有错误，b没有被定义
    console.log("哈哈");
}catch(err){

}
console.log("456");

程序的执行逻辑是这样的： 运行try语句块里面的语句，如果遇见了错误的语句，不向浏览器抛出错误。而是执行catch语句段里的语句。try语句里面没有执行完的语句，不执行了。catch语句块执行完毕之后，执行后面的语句。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,080评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,422评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,630评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,554评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,662评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,856评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,014评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,752评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,212评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,347评论 4赞 331
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,973评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2赞 349