2016年4月25日案例笔记课堂_第1页
2016年4月25日案例笔记课堂_第2页
2016年4月25日案例笔记课堂_第3页
2016年4月25日案例笔记课堂_第4页
2016年4月25日案例笔记课堂_第5页
免费预览已结束，剩余10页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、爱前端 - 专业前端开发培训JavaScript 进阶第 2 天课堂笔记（本课程共 6 天）班级：北京前端1 期讲师：日期：2016 年 4 月 25 日第 1 页 共 15页爱前端 - 专业前端开发培训：: shaoshanhuan爱前端官网：第 2 页 共页15爱前端 - 专业前端开发培训目录JavaScript 进阶1目录3一、对象41.1对象是什么41.2 IE6、7、8 的兼容问题4二、各种值72.1鼠标位置 event.clientX、event.screenX72.2得到盒子在页面内的净位置92.3页面的卷动值102.4在盒子内的位置10三、窗口卷动12第 3 页 共 15页爱前

2、端 - 专业前端开发培训一、对象1.1我们可以把对象是什么的处理函数，当做一个回调函数。click发生的时候，才调用这个 function()浏览器在调用这个处理函数，调用的时候还传进去一个实际参数，这个参数是一个对象，表示这次点击事件的所有细节。比如按的什么按钮、点击的位置等等。所以，我们的处理函数，就要通过一个形式参数来接收。比如，获得鼠标当前的位置：event.clientX 表示触发的时候，鼠标的 x 位置（相对于视口）不同的，就有不同的 event 值。可以想象到键盘，没有鼠标的位置。而是有 event.keyCode 按下去的键盘码的值。1.2 IE6、7、8 的兼容问题超级兼容大

3、坑：在调用处理函数的时候，高级浏览器是传给这个处理函数一个实际参数 event 对象。但是 IE6、7、8 是给 window 对象绑定一个当前的 event 属性。IE 中：第 4 页 共 15页1 document.onmousemove = function()2 h1.innerHTML = "当前鼠标坐标为" + window.event.clientX + "," + window.event.clientY;1 document.onmousemove = function(event)2 h1.innerHTML = "当前鼠标

4、坐标为" + event.clientX + "," + event.clientY;31oDiv.onclick = function(event)231oDiv.onclick = function()23爱前端 - 专业前端开发培训所以现在就有一个兼容性的处理的小窍门：| 就是或逻辑短路运算符，如果 event 有定义，那么就 event 对象；否则就是 window.event 对象。第 5 页 共 15页1 /在页面上鼠标移动的时候，触发2 document.onmousemove = function(event)3 event = event | w

5、indow.event;4 h1.innerHTML = "当前鼠标坐标为" + event.clientX + "," + event.clientY;53爱前端 - 专业前端开发培训IE 中有很多方法的名字和高级浏览器不一样，比如昨天说的默认：在 IE 中是一个属性：这些的兼容性问题，就用能力检测来解决：包括 preventDefault()方法在 IE6、7、8 中不支持在内，我们要记住这三个：event.target 兼容解决，就是用一个短路语法：第 6 页 共 15页1var targetElem = event.target | event.

6、srcElement;event.preventDefault()不兼容！ 在 IE6、7、8 中用 event.returnValue=false; 代替event.stopPropagation()不兼容！在 IE6、7、8 中用 event.cancelBubble=true; 代替event.target 不兼容，在 IE6、7、8 中用 event.srcElement 代替1 /默认的滚动，的方法有浏览器兼容问题：2 if(event.preventDefault)3 event.preventDefault();4 else5 event.returnValue = false;

7、61event.returnValue = false;1event.preventDefault();爱前端 - 专业前端开发培训二、各种值2.1 鼠标位置 event.clientX、event.screenX下面 4 个值是全线兼容的：这四个值都没有。拖拽的算法：第 7 页 共 15页clientX 表示鼠标距离视口左边 x 值screenX 表示鼠标距离整个屏幕左边 x 值1 event.clientX2 event.clientY3 event.screenX4 event.screenY爱前端 - 专业前端开发培训第 8 页 共页15爱前端 - 专业前端开发培训2.2 得到盒子在页

8、面内的净位置我们之前学习过 oDiv.offsetTop 指的是这个盒子的 border 外层到条 border），至于 offsetParent 是谁，IE6、7 有不同的理解。的 offsetParent 的border 内侧（IE8 多算了一我们现在说的，是 oDiv 这个元素在页面中的净位置，起一个名字 allTop。得到 allTop 不难，迭代，一层一层的累加 offsetTop 值。第 9 页页共 151 /返回这个元素在页面中的净位置2 /就是这个元素所有 offsetParent 的 offsetTop 值的和3 function glTop(obj)4 /累加器，累加器的初

9、始值不是 0，而是现在 offsetTop 值5 /一会儿 while 语句直接从它爸开始了6 var allTop = obj.offsetTop;7 /当前正在算高度的元素8 var currentObj = obj;9 while(currentObj = currentObj.offsetParent)10 allTop += currentObj.offsetTop;1112return allTop;13爱前端 - 专业前端开发培训2.3 页面的卷动值页面被滚动条卷动走的量窗口的卷动onscroll，无论因为什么（比如鼠标拖拽滚动条、鼠标滚轮、键盘 pagedown、键盘下箭头）导

10、致了页面的卷动，触发这个。高级浏览器认为 scrollTop 是 body 元素的属性。而 IE6、7、8 坚决认为是<html>的属性。所以，我们要这么写：document.documentElement 就是<html>事实上，很多东西都有这个区分，比如浏览器窗口的宽度。2.4 在盒子内的位置表示鼠标在盒子的位置，火狐不兼容，但是我们发现现在的火狐嗷嗷兼容。第 10 页 共 15页event.offsetXevent.offsetY1document.body.scrollTop | document.documentElement.scrollTop;1 /当窗口

11、卷动的时候发生这个2 window.onscroll = function()34爱前端 - 专业前端开发培训要想全线兼容，必须进行周转：应该用 event.clientY 和glLeft(smallPic)和页面的 scrollTop 值进行减法比较。第 11 页 共 15页var x = event.clientX - (glLeft(smallPic) - scrollLeft) var y = event.clientY - (glLeft(smallPic) - scrollTop)爱前端 - 专业前端开发培训三、窗口卷动窗口卷动的时候触发的：卷动值：卷动值不是可读的，也可以设置。甚

12、至是动画。oDiv.offsetLeftoDiv.offsetTopoDiv.clientWidth/width+paddingoDiv.clientHeightoDiv.offsetWidth/width+padding+borderoDiv.offsetHeightevent 对象的鼠标当前位置/鼠标到视口event.clientXevent.clientY/鼠标到屏幕event.screenXevent.screenY/说是不兼容火狐，但现在火狐兼容，到最小盒子的左上角event.offsetXevent.offsetY第 12 页 共 15页窗口的元素的、位置：1document.body.scrollTop | document.documentElement.scrollTop1window.onscroll = function()2爱前端 - 专业前端开发培训/卷动值document.body.scrollTo

人人文库> 全部分类> 应用文书

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论