下午复习：
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，领取 前端资料、学费优惠 ！
