笔记
2. DOMContentLoaded 2014.1.7
DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。
与DOM中的onLoad事件与其相近。但onload要等到所有页面元素加载完成才会触发, 包括页面上的图片等等。
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 而在Ajax运用中, 常常需要在onload中加入许多初始化的动作, 如果由于网络问题引起的图片加载过慢( 见: Ajax优化(2) -- lazierLoad img && js), 则必然影响用户的体验。
在这种情况下firefox的DOMContentLoaded事件, 恰恰是我们需要的。
3.getBoundingClientRect() ------返回元素在视口坐标中的位置。
有 left/right/top/bottom属性对象。
4.getBoundingClientRect() //返回坐标包含元素的边框和内边距,不包含元素的外边距。
在用户滚动或改变浏览器窗口大小时不会更新他们
5.触摸屏和移动设备事件
介绍运行在Apple的iphone和ipad设备上的Safari所产生的手势和触摸事件,还包括用户旋转这些设备时锁产生的orientationchange事件。---横屏竖屏转换触发,window对象的orientation属性给出当前方位,0,90,180,-90.
1)
手势开始:gesturestart
手势结束:gestureend。
在这两个事件之间是跟踪手势过程的gesturechange事件队列。
传递事件对象的数字属性scale和rotation.
scale:两个手指之间当前距离和初始距离的比值。<1.0........>1.0;
rotation:从事件开始手指旋转的角度,以度为单位,正值是顺时针方向。
2)
手指触摸 : touchstart
手指移动:touchmove,
手指离开:touchend ,
事件对象有 changedTouches属性。类数组对象,都描述触摸的位置。
而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):
touches:当前位于屏幕上的所有手指的列表。
targetTouches:位于当前DOM元素上手指的列表。
changedTouches:涉及当前事件手指的列表。
每个触摸点由包含了如下触摸信息(常用):
identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)
target:DOM元素,是动作所针对的目标。
pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。
radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。
/*单指拖动*/ var obj = document.getElementById('id'); obj.addEventListener('touchmove', function(event) { // 如果这个元素的位置内只有一个手指的话 if (event.targetTouches.length == 1) {
event.preventDefault();// 阻止浏览器默认事件,重要 var touch = event.targetTouches[0]; // 把元素放在手指所在的位置 obj.style.left = touch.pageX-50 + 'px'; obj.style.top = touch.pageY-50 + 'px'; } }, false);
3)、重力感应重力感应较简单,只需要为body节点添加onorientationchange事件即可。在此事件中由window.orientation属性得到代表当前手机方向的数值。window.orientation的值列表如下:
0:与页面首次加载时的方向一致
-90:相对原始方向顺时针转了90°
180:转了180°
90:逆时针转了90°据我测试,Android2.1尚未支持重力感应。以上即目前的触屏事件,这些事件尚未并入标准,但已被广泛使用。本人Android2.1,未在其他环境下测试。
6.
解决方案:在“相对定位的父容器”上加入 zoom:1 来触发ie的haslayout即可解决
小技巧:通常我们在设置一个容器为position:relative的时候,都会加上zoom:1来解决很多ie下的问题.
7.jquerymoblie
1)data-rel="back"属性给某个链接,那对于该链接的任何点击行为,都是后退的行为,会无视链接的herf,后退到浏览器历史的上一个地址.
2)data-direction="reverse":
如果你只是要看到一个翻转的页面转场而不是真正的回到上一个历史记录的地址,你就要使用data-direction="reverse"属性,而不是后退链接。
3)当连接到的是一个目录地址(比如href="typesofcats/"而不是href="typesofcats/index.html"),你必须在地址后面加一个斜杠("/")。因为Jquery Mobile假定最后一个斜杠后的部分为文件名,当接下来引用到的页面生成基地址的会的时候会删除它。
8.jquerymobile event
http://www.jqmapi.com/api/events.html
触摸事件:
tab:轻击
taphole
swipe:划动 swipeleft,swiperight,
虚拟鼠标事件
vmouseover touch/mouseover
vmousedown: touchstart/mousedown
vmousemove: touchmove/mousemove
vmouseup: touchend/mouseup
vmousecancel: touch/mouse的 mousecancel
vclick:touchend或者鼠标点击。
设备方向变化事件
orientationchange, 回调函数第二个参数,portrait,landscape作为class值加入到html元素中。
滚屏事件:
scrollstart,
scrollstop
页面加载事件
pagebeforeload
pageload
页面显示/隐藏事件
pagebeforeshow
pagebeforehide
pageshow
pagehide
页面初始化事件
pagebeforecreate
pagecreate
动画事件:
animationComplete插件
9.js 与 flash
http://bbs.blueidea.com/home.php?mod=space&uid=294163&do=blog&id=24537
http://cloud21.iteye.com/blog/729676
JavaScript与ActionScript通讯(ExternalInterface类),阅读JavaScript与ActionScript通 讯(ExternalInterface类),需要引入import flash.external.ExternalInterface;一、ActionScript调用JavaScript的方法 这里要用到ExternalInterface类的call方法 Externa 需要引入import flash.external.ExternalInterface;
一、ActionScript调用JavaScript的方法
这里要用到ExternalInterface类的call方法
ExternalInterface.call(functionName:String,...arguments):*
fuctionName:要调用的JavaScript函数名
arguments:参数,可选
1.不带参数的情况
JavaScript:function Show() { alert("I am a func!");}
ActionScript://直接用一条语句调用ExternalInterface.call("Show");
2.带参数的情况
JavaScript:function Show(message) { alert(message);}
ActionScript:ExternalInterface.call("Show","I am a message from AS"); 另外,也可以用getURL方法来调用
getURL("javascript:show('i am a message from as)","_self");
二、JavaScript调用ActionScript的方法
这要用到ExternalInterface类的addCallback方法
ExternalInterface.addCallback( functionName:String, closure:Function):void
functionName:要注册的函数名
closure:对应的执行函数
ActionScript:ExternalInterface.addCallback("Show",OnShow);private function OnShow(message:String):string{return message;}
JavaScript:function thisMovie(movieName){
if(navigator.appName.indexOf("Microsoft") != -1){
return window[movieName]; }
else{ return document[movieName]; }}
function CallAS( ) {
thisMovie("ViewLesson").Show("i am a message from js"); //ViewLesson是flash媒体的ID
}
1.14日
滚轮事件:
1) 除firefox之外的所有浏览器都支持“mousewheel”事件,firefox使用”DOMMouseScroll”。
3级使用“wheel“替代了mousewheel
2) 属性不同,尤其 Mac上,有左右滚动。 3级包括支持三维鼠标,除上下左右滚轮,有顺时和逆时。.
1,Mousewheel事件的属性,wheelDelta : 分别远离一次120和靠近一次-120;
2,Apple鼠标,二维的,wheelDelta, wheelDeltaX,wheelDeltaY, , 而wheelDelta == wheelDeltaY。
3,DOMMousewheel事件属性 detail,而detail*-40 == wheelDelta;
4,3级的wheel事件 的属性 deltaX/deltaY/deltaZ 指定三个维度的旋转。*-120 ==wheelDelta
6.19
1.捕获错误的目的在于避免浏览器以默认的方式处理他们;而抛出错误(throw)的目的在于提供错误发生的具体原因的消息。
2.基本类型的值用typeof检测,对象的值用instanceof来检测。
2015.1.19
¥2119.00 表示¥2119.00
posted on 2013-12-28 11:17 rainbow661314 阅读(317) 评论(0) 收藏 举报
浙公网安备 33010602011771号