一、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,领取 前端资料、学费优惠 !