下午复习:
call和apply:
作用: 执行函数并改变函数中的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一致 只是没有第三个参数
八、 事件绑定函数
1 /* 2 * bindEvent 实现多浏览器事件绑定 3 * @dom 要绑定事件的元素 4 * @type 事件类型 5 * @fn 执行的函数 6 */ 7 8 function bindEvent(dom, type, fn) { 9 // 使用能力检测, 检测浏览器支持哪种能力 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 } |
九、 事件对象和属性
当函数执行的时候,会产生一列的信息, 浏览器会将这些信息收集起来并封装成对象传递到事件对象中。
举例:
1 // 获取元素 2 var box = document.getElementById("box"); 3 // 绑定事件 4 box.onclick = function(e) { 5 console.log(e); // 事件对象 6 } |
输出结果:
9.1 offsetX、 offsetY
这两个属性标记了鼠标位于元素内部的位置,会受到子元素的影响。
举例:
1 |
9.2 clientX、 clientY
这两个属性标记的是鼠标位于视口中的位置。
1 |
整个页面:
1 |
视口:
1 |
9.3 pageX、 pageY
这两个属性标记的是鼠标位于页面中的位置,当页面打开的时候默认是首屏的位置, 此时clientX,clientY与pageX,pageY的值是相同的,当页面滚动条位置改变之后, 它们的值将不一致。
1 |
9.4 screenX, screenY
这两个属性标记的是鼠标位于屏幕中的位置
1 |
9.4 IE中的事件对象
经过测试, 在IE中没有将事件对象传递到函数中。
其实,在window.event身上
由于在IE中不能输出, 我们用for in循环输出:
1 // 添加点击事件 2 box.onclick = function(e) { 3 // 输出事件对象 4 // console.log(e); 5 6 // IE中没有将事件对象传递 而是在window.event身上 7 console.log(window.event) 8 for (var i in window.event) { 9 console.log(i); 10 } 11 } |
兼容方式:
var e = e || window.event
总结:
dom0级:
在高级浏览器中:事件对象可以被传递到事件函数中
在IE中: 事件对象没有被传递进来
this指向是触发事件的对象
dom2级:
事件对象可以被传递到事件函数中
this指向触发事件的对象
attachEvent:
事件对象可以被传递到事件函数中
this指向的是window
十、 阻止冒泡
在高级浏览器中阻止冒泡的方式:
1 e.stopPropagation(); |
在IE中阻止冒泡的方式:
1 e.cancelBubble = true; |
十一、 阻止默认事件
有些标签在点击或者有其他操作的时候,会有一些默认的行为。
比如:
submit会默认提交表单
a标签如果有href属性, 会跳转页面
页面出现滚动条的时候,当我们滚动鼠标滚轮的时候, 滚动条的位置将被改变,这些叫做默认行为、事件。
在高级浏览器中阻止默认事件的方式:
1 e.preventDefault(); |
在IE中阻止默认事件的方式:
1 e.returnValue = false; |
如果是dom0级绑定方式还可以使用 return false 来阻止默认事件
爱创课堂是一家专门做前端培训的机构,由百度高级工程师,《JavaScript设计模式》作者张容铭老师亲自授课,全程20个项目实战,真正做到学习完即可到企业正常工作!
我们前端课程的五大优势:
1. 名师亲自授课,根据企业需求 实时跟进课程大纲,保证学员学到的都是最新的、企业最需要的前端知识点
2. 采取小班教学、上二休一的模式(一个班20—30人,保证老师可以照顾到每一位同学,学员有充足的时间练习)
3. 签订就业协议,帮助学员制作简历,投递简历,模拟面试,不用担心就业问题,目前学员平均就业薪资12K
4. 免费学习一周,不满意不收取任何费用
5. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐
从小白到就业,我们全权负责!
爱创课堂 言行一致、从不忽悠!
请把自己放心的交给我们吧!
6月12日前端培训班仅剩最后几个名额。。。
扫描下方二维码添加微信:haomei0452,领取 前端资料、学费优惠 !