技术文章 | Technical articles

JavaScript进阶课堂笔记 第二天(上午)

一、callapply

函数中的this在定义的时候,无法确定,只有当函数执行的瞬间this才能确定下来。

简单来说就是: 谁调用,指向谁。

 

举例:

// 定义函数

function fun(a, b, c) {

console.log(this, arguments);

}

// 函数单独执行

// fun(1, 2, 3);

// 作为事件函数执行

10 // document.onclick = fun;

11 

12 document.body.onclick = fun;

当我们需要改变函数中的this指向固定元素的时候,此时我们就要用到call或者apply

 

1.1 call

call方法是每一个函数天生可以调用的。

作用: 执行函数并改变函数的this指向

使用方式:fun.call()

可以接受多个参数:

第一个参数就是要改变的this指向

从第二个参数开始都是原函数所需要的参数

举例:

// 使用call改变函数的this指向

fun.call(document, 1, 2, 3);

如果fun函数中需要传递参数,就可以往call第二个参数开始传递。

 

1.2 apply

call方法作用一致都是执行函数并改变函数中的this指向

使用方式: fun.apply()

call方法不同的是参数

可以接受两个参数:

第一个参数是改变函数的this指向

第二个参数是一个数组, 数组中每一项就是原函数所需要的参数

举例:

// 使用apply改变函数中this指向

fun.apply(document.body, [1, 2, 3]);

 

二、事件流程

整个事件流程分为捕获和冒泡:

捕获: 事件从最顶层元素开始执行,一层一层往下,直到最精确的元素。

冒泡: 事件从最精确的元素开始执行,一层一层往上,直到最顶层元素。

当处于最精确元素的时候是不区分捕获和冒泡的。

 

DOM结构:

<div id="box">

<div id="box1">

 <div id="box2"></div>

</div>

</div>

 

执行代码:

// 获取元素

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

var box1 = document.getElementById("box1");

var box2 = document.getElementById("box2");

// 绑定点击事件

box.onclick = function() {

console.log("box");

}

box1.onclick = function() {

10  console.log("box1");

11 }

12 box2.onclick = function() {

13  console.log("box2");

14 }


输出结果
:

图片1.png

三、DOM2级绑定方式

事件名称: addEventListener

这是一个方法,每一个元素都可以调用

使用方式:

dom.addEventListener(type, fn, boolean)

type: 事件类型  注意: 不带“on” 比如: click, mousedown, mouseup

fn: 要执行的函数

boolean: 是一个布尔值,决定绑定的事件是在捕获还是冒泡阶段,默认是false, 表示绑定到了冒泡阶段,如果是true表示绑定到了捕获阶段。

 

DOM结构:

<div id="box">

<div id="box1">

 <div id="box2"></div>

</div>

</div>

 

执行代码:

// 获取元素

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

var box1 = document.getElementById("box1");

var box2 = document.getElementById("box2");

// 绑定到冒泡阶段

box.addEventListener("click", function() {

console.log("box 冒泡")

}, false);

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 

输出结果:

图片2.png

 

四、IE中的高级绑定方式

IE不支持addEventListener 而是支持自己的attachEvent事件

使用方式:

dom.attachEvent(type, fn)

type: 字符串, 表示事件类型 注意: 是带“on” 比如: onclick , onmousedown, onmouseup

fn: 表示要执行的事件函数

没有第三个参数,也就是不支持捕获

举例:

box.attachEvent("onclick", function() {

console.log("box");

})

box1.attachEvent("onclick", function() {

console.log("box1");

})

10 box2.attachEvent("onclick", function() {

11  console.log("box2");

12 })

 

输出结果:

图片3.png

 

五、DOM2级绑定方式和DOM0级绑定方式的区别

5.1 绑定数量

DOM0级: 只可以给一个元素的一个事件绑定一个函数

DOM2级: 可以给一个元素的一个事件绑定多个函数

5.2 执行顺序

按照绑定的顺序执行

5.3 是否可以同时存在

  可以

5.4 函数中的this指向

dom0级和dom2级函数中的this都指向触发事件的元素


六、attachEvnetDOM0级绑定方式的区别

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: 该参数决定要移除捕获还是冒泡阶段

 

错误的移除方式:

// 添加Dom2事件

box.addEventListener("click", function() {

console.log("函数执行了");

})

// 点击btn的时候移除box上事件

btn.onclick = function() {

box.removeEventListener("click", function() {

 console.log("函数移除了");

10  })

11 }

 

正确的移除方式:

// 将函数提取为有名函数

function click() {

console.log("函数执行了");

}

// 添加Dom2事件

box.addEventListener("click", click)

// 点击btn的时候移除box上事件

btn.onclick = function() {

10  box.removeEventListener("click", click);

11 }

 

7.2 detachEvent

作用: 移除attachEvent事件

使用方式与removeEventListener一致, 只是没有了第三个参数。

举例:

// 将函数提取为有名函数

function click() {

console.log("函数执行了");

}

// 添加Dom2事件

box.attachEvent("onclick", click)

// 点击btn的时候移除box上事件

btn.onclick = function() {

10  box.detachEvent("onclick", click);

11 }

 


爱创课堂是一家专门做前端培训的机构,由百度高级工程师,《JavaScript设计模式》作者张容铭老师亲自授课,全程20个项目实战,真正做到学习完即可到企业正常工作!

 
我们前端课程的五大优势:
 
1. 名师亲自授课,根据企业需求 实时跟进课程大纲,保证学员学到的都是最新的、企业最需要的前端知识点
 
2. 采取小班教学、上二休一的模式(一个班20—30人,保证老师可以照顾到每一位同学,学员有充足的时间练习

3. 签订就业协议,帮助学员制作简历,投递简历,模拟面试,不用担心就业问题,目前学员平均就业薪资12K

4. 免费学习一周,不满意不收取任何费用

5. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐

 

从小白到就业,我们全权负责!

爱创课堂 言行一致、从不忽悠!

请把自己放心的交给我们吧!


6月12日前端培训班仅剩最后几个名额。。。
扫描下方二维码添加微信:haomei0452,领取 前端资料、学费优惠 !


上一篇文章: JavaScript进阶课堂笔记 第一天(下午)
下一篇文章: JavaScript进阶课堂笔记 第二天(下午)

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>