第十五节: JavaScript 事件及事件绑定

1. 事件理解

1.1 什么是事件

事件是用户或浏览器自身执行的某个动作，诸如点击click，

JavaScript制作交互效果，离不开事件。所谓的事件，就是用户的某个行为，能够触发一个函数的执行


1.2 绑定事件绑定:
oDiv.onclick = function(){
}

这个匿名函数，平时永远不会执行，必须等到事件的发生才执行。

响应某个时间的函数叫做事假处理程序，通常我们俗称为事件处理函数，事件的处理程序是以‘on-’开始的，

因此点击click的事件处理程序是onclick


2. DOM0事件绑定

DOM分为级别，DOM的标准分0级、1级、2级、3级，不同的标准，标准一直在升级。

DOM1级没有定义相关的内容，

DOM3级只是在DOM2级基础上增加了更多的时间类型，

所以我们学习的重点还是DOM0级和DOM2的事件绑定

接下来先了解DOM标准中的0级的事件绑定方法：

2.1 DOM0 级事件绑定的用法

语法：

dom.on+type = fn;

  1. dom: 绑定事件的对象

  2. type： 为事件的类型

  3. fn : 为事件触发时执行的函数

// 得到这个box
var oDiv = document.getElementById("box");

//事件
oDiv.onclick = function(){
    alert("你好，点我干嘛，我烦着呢！！");
}

也可以绑定一个有名的函数，当做事件处理程序：:

oDiv.onclick = fun; //绑定的是函数，而不是函数的执行，所以不加圆括号。

function fun(){
    alert("你好，点我干嘛，我烦着呢！！");
}

所以现在你就人格升华了，原来我们想要一个函数执行，必须调用这个函数，比如fun();

但是现在你知道了，一个函数可以当做一个事件的处理函数，当这个事件发生的时候，函数也能执行了。


2.2 DOM0级绑定事件处理函数的次数

注意：一个dom对象同一个事件类型只能绑定一个事件处理函数

// 得到这个box
var oDiv = document.getElementById("box");

// 第一次绑定点击事件事件
oDiv.onclick = function(){
    alert("第一次绑定点击事件事件");
}
//第二次绑定点击事件
oDiv.onclick = function(){
    alert("第二次绑定点击事件事件！");
}

我们会发现弹出的是“第二次绑定点击事件”，后面的会把前面的覆盖，就好像给一个对象的属性付了两次值，发生覆盖


2.3 DOM0级解除事件绑定

语法：

dom.on+type = null

通过给元素的事件属性上绑定空对象null 来达到解除事件绑定

oDiv.onclick = null;


3.批量绑定事件和事件排他

3.1 批量绑定事件


  1. 利用for循环批量绑定事件。

    for(var i = 0 ; i < ps.length ; i++){
    ps[i].onclick = function(){
        alert("你好");
    }
}

    for循环包裹添加绑定事件的语句。


  1. 对序号的影响

    for(var i = 0 ; i < ps.length ; i++){
    ps[i].onclick = function(){
        alert("我是老" + i + "点我干嘛？！！");
    }
}

    异步造成的问题又出现了，所以每个盒子点击之后，都是7了，而不是我们预想的0、1、2、3、4、5、6。


  1. 利用闭包解决异步语句造成影响：

    for(var i = 0 ; i < ps.length ; i++){
    (function(m){
        ps[m].onclick = function(){
            alert("我是老" + m + "点我干嘛？！！");
        }
    })(i);
}


  1. 除了IIFE之外，还有一种方法，就是强制添加属性的方法：

    任何一个对象，我们都可以通过点语法来设置新的属性。

    for(var i = 0 ; i < ps.length ; i++){
    aBox[i].idx= i;   //先不要着急设置监听，先编号

    aBox[i].onclick = function(){
        alert("我是老" + this.idx+ "点我干嘛？！！"); //自己的编号
    }
}


3.2 对应和排他

  1. 对应：点击第一排的p，第二排对应的p变红：

    aBox[this.idx].style.backgroundColor = “red”;


  1. 排他:

    for(var i = 0 ; i < ps.length ; i++){
    aBox[i].onmouseover = function(){
        //让所有的p都是灰色
        for(var j = 0 ; j < ps.length ; j++){
            aBox[j].style.backgroundColor = "#ccc";
        }
        //让自己变红
        this.style.backgroundColor = "red";
    }
}


4. DOM2级事件监听

DOM2级做了新的规范，不用on***来绑定监听了，而是使用一个方法


4.1 主流浏览器事件的绑定和解绑方法

  1. 绑定事件方法

    // 绑定事件的方法
addEventListener()；

    add添加，Event事件，Listener监听

    它接受三个参数：什么事件、函数、是否监听捕获阶段。

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

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

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

    第3个参数：布尔值(默认false，可以省略)，true表示监听捕获、false表示监听冒泡阶段

示例:

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

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


  1. 事件绑定的this指向

    oBox.addEventListener('click',function(){
  console.log(this); 
},false)

    发现this指向oBox元素自身


  1. 可以绑定多个事件处理程序

    addEventListener可以重复添加相同事件名的事件：

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

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

    我们给box1的绑定了两个事件监听，不会覆盖，两个监听的函数都会执行，按照代码执行顺序。

以下写法不是多个，而是同一个事件处理程序

```js
oBox.addEventListener("click", fn, false);

oBox.addEventListener("click",fn, false);

function fn(){
    alert("哈哈");
}
```


  1. 解绑事件

    使用方法removeEventListener

    oBox.addEventListener("click", fn, false);
// 解绑有名函数
oBox.removeEventListener("click",fn, false);
function fn(){
    alert("哈哈");
}

// 解绑匿名函数
oBox.addEventListener("click",function(){
    console.log(11);
    oBox.removeEventListener("click",arguments.callee, false);
}, false);


4.2. 低版本IE的事件的绑定和解绑方法

IE永远是个奇葩，

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


  1. IE 8及以下的事件绑定

    需要加on

    oBox.attachEvent("onclick",函数)

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

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

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

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

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


  1. 低版本IE的事件监听方法的this指向

    oBox.attachEvent("onclick", function(){
    console.log(this === window);   //true
});

    低版本IE的事件监听attachEvent：**事件处理函数里面的this，不是触发事件的这个元素，而是window


  1. 可以绑定多个事件处理程序

    同一个事件名的多个监听，会反着执行：

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

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

oBox.attachEvent("onclick", function(){
    alert(3);
});
// 弹出3、2、1。


  1. 解绑事件

    使用方法removeEventListener

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

//  绑定事件
oBox.attachEvent("onclick", fn);

// 解除事件绑定
oBox.detachEvent('onclick' ,fn)；

function fn(){
    alert("嘻嘻");
}


4.3 封装兼容方法

  1. DOM2级事件监听兼容

    function addEvent(obj,type,callback){
    if(obj.addEventListener){
        obj.addEventListener(type,callback,false);
    }else if(obj.attachEvent){
        obj.attachEvent("on" + type,function(){
            callback.call(obj);
        });
    }else{
        obj["on" + type] = callback;
    }
}

    上面我们学习的就是一些理论知识，总结一下：


4.4 DOM2级事件的绑定和解绑罗列

  1. 事件监听的兼容问题

    1. IE8以上主流浏览器
      dom.addEventListener(type,fn,false)

      <span style='color:red;'>this指向dom本身</span>

    2. IE8及以下
      dom.attachEvent(‘on‘+type,fn)

      <span style='color:red;'>this指向window</span>


  1. 解绑事件处理函数
  1. IE8以上主流浏览器
    dom.removeEventListener(type,fn,false)
  2. IE8及以下
    dom.detachEvent(‘on’+type,fn)


5. 事件的分类

5.1 鼠标事件

onclick 点击鼠标左键触发

oncontextmenu 点击鼠标右键触发（浏览器有默认的右键行为）不常用

ondblclick 双击鼠标左键触发

onmousedown 鼠标任意键按住时触发

onmouseup 鼠标任意键抬起时触发

onmouseenter 鼠标进入元素时触发

onmouseleave 鼠标离开元素时触发

onmouseover 鼠标进去元素时触发

onmouseout 鼠标离开元素时触发

onmousemove 鼠标在元素上移动触发 ===>持续触发

注意：

​ onclick = onmousedown + onmouseup


5.2 滚轮事件

onmousewheel 鼠标滚轮在元素上滚动时触发(IE+chrome)

DOMMouseScroll 鼠标滚轮在元素上滚动时触发(firefox)


5.3 键盘事件

onkeydown 按住键盘上任意键触发 ==>持续触发

onkeypress 按住键盘上部分键触发 ==>持续触发

onkeyup 键盘上按键抬起时触发


5.4 资源事件

onload 页面或者图片加载完成时触发


5.5 window事件

onresize 在窗口大小改变时触发

onscroll 在页面滚动的时候触发


5.6 焦点事件

onfocus 得到焦点

onblur 失去焦点

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