上课培训版javascript1、与相关的属性方法

event:，在IE浏览器中是个全局属性，表示浏览器的对象target:目标，指的是在标准浏览器中触发的那个，就是传翻的开始的那个setCapture();IE方法，让一个HTML元素一直捕捉鼠标，使这个元素不会丢掉鼠标。当一个元素上调用这个方法时，所有后续的鼠标都被引导到这个元素上。标的捕捉。IE。e.cancelBubble=true：IE中取消冒泡的方法，IEpreventDefault:标准浏览器中HTML元素默认行为的的方法event.returnValue=false：IE浏览器中元素默认行为的属性varE={}//定义一个命名空间varnewFn=function(){fn.apply(ele);}}//下面主要是解决IE中用这种方式绑定，this关键字的指向问//varnewFn=function(){fn.apply(ele);}fn方法包装一下，生成newFn.photo=fn;//photofn的}}E.unBind=function}elseif(ele.attachEvent){vara=ele['arr'+type];}}ele['on'+type]=null;//DOM0级的绑}}}else{//IE678方}}returnt;}//}

//e.pageXvaro.x=e.pageX||(.Element.scrollLeft||.body.scrollLeft+e.X);returno;} 右 选

=function(){return<bodyoncontext="returnfalse"ondragstart="returnfalse"onselectstart="returnfalse"onselect=".selection.empty()"oncopy=".selection.empty()"onbeforecopy="returnfalse"onmouseup=".selection.empty()> 粘<inputtype=textonpaste="return<linkrel="ShortcutIcon"favicon.ico名字最好不变16*16的16色,放虚 <linkrel="Bookmark"<inputtype=buttonvalue=onclick="window.locationview-source:'+''"><inputstyle="ime-<inputtype=textname=text1value="123"<input解决DOM2级绑定，IE中函数执行顺序和this关键字function//IEthis//IE//还可以解决其它IE的兼容性问 1、用自定义属性来给不同的保存绑定在各自上的方法。比如用aclick属性来保存绑定在click上的各个方法2aevent.type里的字符串来自定义会和元素自身的一些属性。就是为了避免。前缀，可以避免，也表示这是一个数组。//给不同的，保存不同的绑定方法function//IEevent.target=this;//IEtargetif(typeof//IEpageXpageY }//event.type是当前的这个类varif(a)returnafor(vari=0,len=a.length;i<len;i++){}}}//offfunctionoff(ele,type,fn){if(ele["a"+type]instanceofArray){varfor(vari=0,len=a.length;i<len;i++){}}}}functionfn0(){this.innerHTML="fn0";}functionfn1(){this.innerHTML+="fn1";}functionfn2(e){this.innerHTML+="fn2"+e. functionfn3(e){this.innerHTML+="fn3"+e.pageY}}<script//javaScript//有一位（镁铝//1、假装偶遇。2、给人家添个菜。3、给人家//当她散步的时候，你也要各种//那现在，这个被定义成一个对象，叫varvarfor(vari=0,len=a.length;i<len;i++){}}}//发布这个，这是发布}//发布这个}functionfn1(){console.log("你好，这么巧啊，你也在这儿啊！")}functionfn2(){console.log("买个菜");};functionfn3(){console.log("学妹，我来吧");}//beauty.addHandler("eat",fn1);//这些是定阅者，就相当于绑定，beauty可以称做被观察的1：4，大图的显示区域和小的本身的区域是一边大的其实也就是说大图和显示区域之比也分大图（overflow:hidden）（onmouseenterscrollTopscrollLeft以下代码只考虑非IE浏览器，因为IE中有mouseenter处理这个问<style#div1{width:300px;height:300px;background:#F30;position:relative;margin:150px#mask{width:80px;height:80px;position:absolute;top:0;left:0;background:black;opacity:0.2;filter:alpha(opacity=20);}<div<scriptvaroDiv=.gevarele=.createElement('div');ele.style.top=e.Y-}说明：这种做有一个明显的bug，就是由于mouseover的（冒泡会导致创建一oDiv，则不应该再创建了。 e.stopPropagation();再次说明使用冒泡的方式，不能解决解决问题2，如果鼠标在div1内部时，进入遮罩里，遮罩会mouseover，遮罩是的子元素，则会到div1里，这样就再一次创建元素了，也是不可以的2、如果离开的元素是div1本身（就是由冒泡或引起的mouseover也在JS中，在触发时，什么属性表示的是离开的那个元素，这个属性叫relatedTarget和target，这两个属性是相对的概念，target表示当前进入了此元素，relatedTarget一个表示当前从这个元素中离开【以下代包含在示例文件：1_43-解决.html】functioncreateMask(e){varele=.createElement('div');}oDiv.onmouseover=function(e){varrelated=e.relatedTarget;//为什么会出错：以循环方式找任何元素的parentNode,最后一级的parentNode是 }}}trycatchtrycatch//把上面的直接绑定的这个方法独立成一个单独的函//为什么要在函数里再返回一个函数，主要是为了传方便传参数。fn是指定要运行的那个函数。由于fn函数本身还需要对象为参数，所以这是一个很好的技巧。functionreturnfunction(e){//这个函数才是。这个函数是来做上面解释那些判断的，一fn（函数）参数varrelated=e.relatedTarget;}}}}functionon(ele,type,fn){vartempFn=within(fn);/fn（参数）有条件的执行}elseif(type=="mouseleave"){}}}}functionvarfor(vari=0,len=a.length;i<len;i++){}}}function}elseif(type=="mouseleave"){}varif(!a){//如果不存在绑定的，则直接退

for(vari=0;i<a.length;i++){vartempFn=a[i];}}}else{//正常的移var，}for(vari=0,len=a.length;i<len;i++){}}}}其实所谓的mouseenter和mouseleave就是有条件执行的mouseover和mouseout件【附带的代码中还有一个完整的测试文件，请见：1_53-解决-测试.html】<scriptvaroDiv=.ge//e.X-this.offsetLeft-mask.offsetWidth/2这个是让遮罩出现在中间//X的值是相对于浏览器当前窗口的，mask的定位是相对于这个div的，所以e.X-this.offsetLeft40/*创建遮罩*/functioncreateMask(e){varmask=.createElement('div');mask.style.left=e.X-this.offsetLeft-40+"px";//40是遮罩宽度的一半，为了} functionvaroMask=.geementById('mask');}

oMask.style.top=e.Y-this.offsetTop-}/*删除遮罩functionvaroMask=.geementById('mask');}}//绑定functionvaroMask=.geementById('mask');varx=e.X-this.offsetLeft-40;//过右}vary=e.Y-this.offsetTop-40;//过下}}}那一部分大图（overflow:hidden）（onmouseenter1：4scrollTopscrollLeft<htmlxmlns="<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"<style#default{width:300px;height:223px;position:relative;background:#CCF;_overflow:hidden;}#defaultimg{border:none;}#mask{opacity:0.2;filter:alpha(opacity=20);background:blue;position:absolute;top:0;left:0;}#show{position:absolute;background:#606;overflow:hidden;}#showimg{border:none;}<div<imgsrc="珠峰培训-放大镜效果/img/smallPeony.jpg"<scripttype="text/ecmascript"<scriptfunctioncreateMask(e){varoMask=.createElement('div');varx=e.pageX-this.offsetLeft-300/950*300/2;//vary=e.pageY-this.offsetTop-223/760*223/2;//让鼠标居中}else}}elseif(y>=this.offsetHeight-}}functionvaroMask=.geementById('mask');varw=oMask.offsetWidth;//遮罩的宽varh=oMask.offsetHeight;//遮罩的高varx=e.pageX-this.offsetLeft-w/2;vary=e.pageY-this.offsetTop-h/2;}elseif(x>=this.offsetWidth-w){}}elseif(y>=this.offsetHeight-h){}}varsrollX=x*(950/300);varvaroShow=.geementById('show');}}functionvaroMask=.geementById('mask');}}functionvarx=this.offsetWidth+10;vary=0;varoShow=.createElement('div');varoImg=newoImg.src="珠峰培训-放大镜效果/img/peony.jpg"}//moveShowfunctionvaroMask=.geementById('mask');varx=oMask.offsetLeft;//先得到遮罩的偏移量vary=oMask.offsetTop;varsrollX=x*(950/300);//按比例算出大图向左卷出去的那一部分varsrollY=y*(760/223);varoShow=.geementById('show');}}functiondeleteShow(){varoShow=.geementById('show');}}varele=.geementById('default');CSS<style overflow:hidden;top:0;left:0;opacity:1;_visibility:hidden;}#content{width:270px;height:250px;position:absolute;left:0;top:0;top:100px;left:- px;top:-1000px;}#contentul{color:#f00; font-size:36px;text-align:center;list-style:none;margin:0;padding:0;}#closed{position:absolute;top:0;right:0;width:15px;height:15px;background:red;disy:block;}#mask{background:green;opacity:0.2;position:absolute;top:0;<bodystyle="height:4000px;"<inputstyle="position:fixed;bottom:0;left:0;"id="btn"name=""type="button"value="弹出"/><div<ulid="ul2"<li>珠峰<li>们<scripttype="text/javascript"<scripttype="text/javascript"<scripttype="text/ecmascript">functionmyAlert(content,btn){btncontentvarw=content.offsetWidth;varvarcenL=BOM.getWBox().centerL;//获得浏览器窗口的中间位置varcenT=BOM.getWBox().centerT;varl=cenL-w/2;//弹出框的最终的坐标vart=cenT-h/2;varbox=.geementById('box');varmask=.geementById('mask');DOM.setGrou}varbox=.createElement('div'); varmask=.createElement('div'); varclosed=.createElement('span');}}}varcontent=.geementById('content');varbtn=.geementById('btn');拖拽和墙效<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"<style#content{position:relative;list-style:none;padding:0;margin:50pxauto;border:none;width:480px;background:#0CF;height:660px;-webkit-user-select:none;-moz-user-select:none; #contentli{float:left;margin:5px;background:#FF9; }}#contentliimg{border:none;}#content.test{background:#C33;}#content.current{background:#0F6;}#content*{-webkit-user-select:none;-moz-user-select:none;<ul<li><imgsrc="img/1.png"width="150"height="150"<li><imgsrc="img/2.png"width="150" <li><img width="150"height="150"<li><imgwidth="150"<li><imgwidth="150"<li><imgwidth="150"<li><imgwidth="150"<li><imgwidth="150"<li><imgwidth="150"<li><imgwidth="150"<li><imgwidth="150"<li><imgwidth="150"<scripttype="text/ecmascript"<scripttype="text/ecmascript"