技术文章 | Technical articles

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

下午复习:

callapply:

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

call:

接收多个参数

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

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

apply:

接收两个参数

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

第二个参数: 是一个数组

 

事件流程:

分为捕获和冒泡

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

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

 

绑定方式与区别:

DOM0级绑定方式: dom.onclick = function() {}
可以给一个元素的一个事件绑定一个函数

执行顺序:

IE中优先执行

在高级浏览器中顺序执行

this指向触发事件的元素

 

DOM2级绑定方式: dom.addEventListener(type, fn, boolean)

可以给元素绑定多个事件函数

执行顺序 绑定顺序

this指向触发事件的元素

 

IE中的高级绑定方式: dom.attachEvent(type, fn)

可以给元素绑定多个事件函数

执行顺序是 优先执行dom0级再逆序执行attachEvent事件

this指向window

 

移除事件:

DOM2级事件的移除方式:

dom.removeEventListener(type, fn, boolean)

删除的时候一定要与addEventListener绑定的函数是同一个

 

attachEvent移除事件的方式:

dom.detachEvent 使用方式与removeEventListener一致 只是没有第三个参数

 

八、 事件绑定函数

/*

 * bindEvent 实现多浏览器事件绑定

 * @dom 要绑定事件的元素

 * @type 事件类型

 * @fn 执行的函数

 */

function bindEvent(dom, type, fn) {

// 使用能力检测, 检测浏览器支持哪种能力

10  // 能力检测就是利用: 当一个元素读取一个属性的时候,如果能读取到那么就输出,如果属性不存在就会输出undefined ,而不是报错的这个特点。

11  if (dom.addEventListener) {

12   // 说明是高级浏览器

13   dom.addEventListener(type, fn, false);

14  } else if (dom.attachEvent) {

15   // 说明是IE中的高版本

16   dom.attachEvent("on" + type, fn);

17  } else {

18   // 说明是IE中的低版本或者一些不知名的浏览器

19   dom["on" + type] = fn;

20  }

21 }

 

九、 事件对象和属性

当函数执行的时候,会产生一列的信息, 浏览器会将这些信息收集起来并封装成对象传递到事件对象中。

举例:

// 获取元素

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

// 绑定事件

box.onclick = function(e) {

console.log(e); // 事件对象

}


 

输出结果:

图片4.png

 

9.1 offsetXoffsetY

这两个属性标记了鼠标位于元素内部的位置,会受到子元素的影响。

举例:

图片5.png

图片6.png

 

9.2 clientXclientY

这两个属性标记的是鼠标位于视口中的位置。

图片7.png

 

整个页面:

图片8.png

 

 

 

 

 

 

 

视口:

图片9.png

 

9.3 pageXpageY

这两个属性标记的是鼠标位于页面中的位置,当页面打开的时候默认是首屏的位置, 此时clientXclientYpageX,pageY的值是相同的,当页面滚动条位置改变之后, 它们的值将不一致。

 

图片10.png

 

9.4 screenX, screenY

这两个属性标记的是鼠标位于屏幕中的位置

 

图片11.png

 

9.4 IE中的事件对象

经过测试, IE中没有将事件对象传递到函数中。

其实,在window.event身上

由于在IE中不能输出, 我们用for in循环输出:

 

// 添加点击事件

box.onclick = function(e) {

// 输出事件对象

// console.log(e);

// IE中没有将事件对象传递 而是在window.event身上

console.log(window.event)

for (var i in window.event) {

 console.log(i);

10  }

11 }

图片12.png

 

兼容方式:

var e = e || window.event

 

总结:

dom0级:

在高级浏览器中:事件对象可以被传递到事件函数中

IE中: 事件对象没有被传递进来

this指向是触发事件的对象

 

dom2级:

事件对象可以被传递到事件函数中

this指向触发事件的对象

 

attachEvent:

事件对象可以被传递到事件函数中

this指向的是window

 

十、 阻止冒泡

在高级浏览器中阻止冒泡的方式:

e.stopPropagation();

 

IE中阻止冒泡的方式:

e.cancelBubble = true;

 

十一、 阻止默认事件

有些标签在点击或者有其他操作的时候,会有一些默认的行为。

比如:

submit会默认提交表单

a标签如果有href属性, 会跳转页面

页面出现滚动条的时候,当我们滚动鼠标滚轮的时候, 滚动条的位置将被改变,这些叫做默认行为、事件。

 

在高级浏览器中阻止默认事件的方式:

e.preventDefault();

 

IE中阻止默认事件的方式:

e.returnValue = false;

 

如果是dom0级绑定方式还可以使用 return false 来阻止默认事件




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

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

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

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

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

 

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

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

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


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


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

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

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