一、call和apply
函数中的this在定义的时候，无法确定，只有当函数执行的瞬间this才能确定下来。
简单来说就是： 谁调用，指向谁。
举例:
1 // 定义函数 2 function fun(a, b, c) { 3 console.log(this, arguments); 4 } 5 6 // 函数单独执行 7 // fun(1, 2, 3); 8 9 // 作为事件函数执行 10 // document.onclick = fun; 11 12 document.body.onclick = fun; |
当我们需要改变函数中的this指向固定元素的时候，此时我们就要用到call或者apply
1.1 call
call方法是每一个函数天生可以调用的。
作用： 执行函数并改变函数的this指向
使用方式：fun.call()
可以接受多个参数：
第一个参数就是要改变的this指向
从第二个参数开始都是原函数所需要的参数
举例：
1 // 使用call改变函数的this指向 2 fun.call(document, 1, 2, 3); |
如果fun函数中需要传递参数，就可以往call第二个参数开始传递。
1.2 apply
和call方法作用一致都是执行函数并改变函数中的this指向
使用方式： fun.apply()
与call方法不同的是参数
可以接受两个参数：
第一个参数是改变函数的this指向
第二个参数是一个数组， 数组中每一项就是原函数所需要的参数
举例：
1 // 使用apply改变函数中this指向 2 fun.apply(document.body, [1, 2, 3]); |
二、事件流程
整个事件流程分为捕获和冒泡：
捕获: 事件从最顶层元素开始执行，一层一层往下，直到最精确的元素。
冒泡: 事件从最精确的元素开始执行，一层一层往上，直到最顶层元素。
当处于最精确元素的时候是不区分捕获和冒泡的。
DOM结构：
1 <div id="box"> 2 <div id="box1"> 3 <div id="box2"></div> 4 </div> 5 </div> |
执行代码：
1 // 获取元素 2 var box = document.getElementById("box"); 3 var box1 = document.getElementById("box1"); 4 var box2 = document.getElementById("box2"); 5 // 绑定点击事件 6 box.onclick = function() { 7 console.log("box"); 8 } 9 box1.onclick = function() { 10 console.log("box1"); 11 } 12 box2.onclick = function() { 13 console.log("box2"); 14 } |
输出结果:
1 |
三、DOM2级绑定方式
事件名称： addEventListener
这是一个方法，每一个元素都可以调用
使用方式：
dom.addEventListener(type, fn, boolean)
type: 事件类型 注意： 不带“on” 比如： click, mousedown, mouseup
fn: 要执行的函数
boolean: 是一个布尔值，决定绑定的事件是在捕获还是冒泡阶段，默认是false, 表示绑定到了冒泡阶段，如果是true表示绑定到了捕获阶段。
DOM结构：
1 <div id="box"> 2 <div id="box1"> 3 <div id="box2"></div> 4 </div> 5 </div> |
执行代码：
1 // 获取元素 2 var box = document.getElementById("box"); 3 var box1 = document.getElementById("box1"); 4 var box2 = document.getElementById("box2"); 5 // 绑定到冒泡阶段 6 box.addEventListener("click", function() { 7 console.log("box 冒泡") 8 }, false); 9 10 box1.addEventListener("click", function() { 11 console.log("box1 冒泡"); 12 }, false) 13 14 box2.addEventListener("click", function() { 15 console.log("box2 冒泡"); 16 }, false) 17 18 // 绑定到捕获阶段 19 box.addEventListener("click", function() { 20 console.log("box 捕获"); 21 }, true) 22 23 box1.addEventListener("click", function() { 24 console.log("box1 捕获"); 25 }, true) 26 27 box2.addEventListener("click", function() { 28 console.log("box2 捕获"); 29 }, true) 30 |
输出结果：
1 |
四、IE中的高级绑定方式
IE不支持addEventListener 而是支持自己的attachEvent事件
使用方式：
dom.attachEvent(type, fn)
type: 字符串， 表示事件类型 注意： 是带“on” 比如： onclick , onmousedown, onmouseup
fn： 表示要执行的事件函数
没有第三个参数，也就是不支持捕获
举例：
1 box.attachEvent("onclick", function() { 2 console.log("box"); 3 }) 4 5 6 box1.attachEvent("onclick", function() { 7 console.log("box1"); 8 }) 9 10 box2.attachEvent("onclick", function() { 11 console.log("box2"); 12 }) |
输出结果：
1 |
五、DOM2级绑定方式和DOM0级绑定方式的区别
5.1 绑定数量
DOM0级： 只可以给一个元素的一个事件绑定一个函数
DOM2级： 可以给一个元素的一个事件绑定多个函数
5.2 执行顺序
按照绑定的顺序执行
5.3 是否可以同时存在
可以
5.4 函数中的this指向
dom0级和dom2级函数中的this都指向触发事件的元素
六、attachEvnet和DOM0级绑定方式的区别
6.1 绑定数量
DOM0级： 只可以给一个元素的一个事件绑定一个函数
attachEvent: 可以绑定多个事件函数
6.2 执行顺序
优先执行dom0级事件然后再逆序执行attachEvent事件
6.3 是否可以同时存在
可以
6.4 函数中的this指向
dom0级事件函数中的this指向触发事件的元素
attachEvent事件函数中this指向window
七、移除事件
7.1 DOM2级移除事件方式
该方法用于移除addEventListener绑定的事件
使用方式：
dom.removeEventListener(type, fn, boolean)
type: 事件类型
fn： 执行函数
boolean: 该参数决定要移除捕获还是冒泡阶段
错误的移除方式：
1 // 添加Dom2事件 2 box.addEventListener("click", function() { 3 console.log("函数执行了"); 4 }) 5 6 // 点击btn的时候移除box上事件 7 btn.onclick = function() { 8 box.removeEventListener("click", function() { 9 console.log("函数移除了"); 10 }) 11 } |
正确的移除方式：
1 // 将函数提取为有名函数 2 function click() { 3 console.log("函数执行了"); 4 } 5 // 添加Dom2事件 6 box.addEventListener("click", click) 7 8 // 点击btn的时候移除box上事件 9 btn.onclick = function() { 10 box.removeEventListener("click", click); 11 } |
7.2 detachEvent
作用： 移除attachEvent事件
使用方式与removeEventListener一致， 只是没有了第三个参数。
举例：
1 // 将函数提取为有名函数 2 function click() { 3 console.log("函数执行了"); 4 } 5 // 添加Dom2事件 6 box.attachEvent("onclick", click) 7 8 // 点击btn的时候移除box上事件 9 btn.onclick = function() { 10 box.detachEvent("onclick", click); 11 } |
爱创课堂是一家专门做前端培训的机构，由百度高级工程师，《JavaScript设计模式》作者张容铭老师亲自授课，全程20个项目实战，真正做到学习完即可到企业正常工作！
我们前端课程的五大优势：
1. 名师亲自授课，根据企业需求 实时跟进课程大纲，保证学员学到的都是最新的、企业最需要的前端知识点
2. 采取小班教学、上二休一的模式（一个班20—30人，保证老师可以照顾到每一位同学，学员有充足的时间练习）
3. 签订就业协议，帮助学员制作简历，投递简历，模拟面试，不用担心就业问题，目前学员平均就业薪资12K
4. 免费学习一周，不满意不收取任何费用
5. 与中国石油，中国电信，软通等知名企业合作，进行企业内训，并进行学员就业推荐
从小白到就业，我们全权负责！
爱创课堂 言行一致、从不忽悠！
请把自己放心的交给我们吧！
6月12日前端培训班仅剩最后几个名额。。。
扫描下方二维码添加微信：haomei0452，领取 前端资料、学费优惠 ！
