Node.js 팁 1주 collection_javascript 기술-JS 튜토리얼-php.cn

Node.js 팁 1주 collection_javascript 기술

WBOY

풀어 주다： 2016-05-16 18:30:15

원래의

927명이 탐색했습니다.

1. 오늘은 맞춤 이벤트에 대해 이야기해 보겠습니다.
이벤트에 대해서는 누구나 알고 있지만 여러 프레임워크에 맞춤 이벤트가 구현되어 있습니다.

코드 복사 코드는 다음과 같습니다.

 
<script> var cusEvent = function(){ <br>var 캐시 = {}; <br>return { <br>addEvent:function(type,fn){ <br>cache[type]?cache[type].push(fn):(cache[type]= [fn ]); <br>}, <br>removeEvent:function(type,fn){ <br>if(cache[type]){ <br>if(fn){ <br>for(var i=0 ,ci ;ci=cache[유형][i];i ){ <br>ci===fn&&cache[유형].splice(i,1) <br>} <br>}else{ <br>캐시 삭제 [유형] ]; <br>} <br>} <br>}, <br>//e는 사용자 정의 객체 또는 문자열일 수 있습니다. <br>fire:function(e){ <br>if( typeof e =='string '){ <br>e = {type:e} <br>}; <br>var t = 캐시[e.type] <br>if(t){ <br>for( var i=0,ci ;ci=t[i];i ){ <br>//e는 자체 타겟을 가질 수 있습니다. 그렇지 않은 경우 대신 이것을 사용하세요 <br>ci.call(e.target||this,e) <br>} <br>} <br>} <br>} <br>}() <br>//<br>cusEvent.addEvent('start',function(e){alert(e.type) }) 사용 <br> cusEvent.addEvent('start',function(e){alert(e.type "1")}) <br>cusEvent.fire('start') <br>cusEvent.removeEvent('start' ) <br>&lt ;/script> <br><br> </div>2. 모두 잘 작동하지만 IE에서는 작동하지 않는 경우가 있습니다. select의 innerHTML은 읽기 전용입니다. 물론 이 외에도 tr, table 등의 요소도 있습니다. IE에서 innerHTML로 이러한 요소의 사용과 호환되도록 작은 메서드를 작성했으면 합니다. 영감을 줄 수 있습니다<br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="57265" class="copybut" id="copybut57265" onclick="doCopy('code57265')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code57265"><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <br> <br> <br><body> <br>Hello World! <br><select id="aa"><option><option>sdfsdf</option> /select> <br><input onclick= "html(document.getElementById('aa'),'<option>change1</option><option>change</option>')" type="버튼" value="use innerHTML"/> <br></html> <br><script>var html = function(){ <br>var div = document. createElement('div'); <br>return document.all?function(pN,h){ <br>div.innerHTML = '<select>' h '</select>' <br>for(var i=0,ci=pN.firstChild ;) pN.removeChild(ci) <br>디버거; <br>for(;ci=div.firstChild.firstChild;) pN.appendChild(ci); :function(pN,h){ <br> pN.innerHTML = h; <br>} <br>}() <br></script> 

 
IE에서는 , 임시 요소 div를 사용하여 innerHTML을 건너뛰는데 사용할 수 없습니다. 사용법의 문제로 로드 포인트를 더 작성하면 됩니다. 즉, 전달된 것이 tr 또는 table이라고 판단되면 해당 요소와 함께 적용하면 됩니다. . 
이 방법은 select에서 옵션을 추가하고 수정하기 어려운 문제도 해결할 수 있습니다
3. 
전역 g-add 변수는 js에서 악마이므로 절대 사용하지 않는 것이 좋습니다. 그러나 때로는 

코드 복사

코드는 다음과 같습니다. var a = 1 function fn(){ alert( a) fn()

 
fn() 
함수 실행과 함께 변경하고 싶다면
 이렇게 작성하는 것이 좋습니다

코드 복사

코드는 다음과 같습니다.

코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

제목 없음

body>

<script> <br>var offset = function(o){ <br>var d = document,m = Math.max,bl = m(d.body. clientLeft,d.documentElement.clientLeft),st,sl, <br>bt = m(d.body.clientTop,d.documentElement.clientTop),b,bb = document.getElementById('bb') <br>return function(o) { <br>b = o.getBoundingClientRect(); <br>st = m(d.body.scrollTop,d.documentElement.scrollTop),sl = m(d.body.scrollLeft,d.documentElement. scrollLeft); <br>bb.style.cssText =";top:" (b.top st-bt) 'px;left:' (b.left sl-bl) "px" <br>} <br> }() <br></script>

하단의 회색 div를 클릭하면 위의 빨간색이 회색과 완전히 겹쳐집니다
5. ie 아래의 OuterHTML을 사용해 본 적이 있나요? Fat Sauce는 사용하기 쉽습니다. 특정 요소 아래의 html을 반환하고 싶을 뿐만 아니라 이 요소의 html도 반환하고 싶습니다.
그러나 이 속성은 사용할 수만 있습니다. IE에서는 이 속성이 없습니다.
js 팁을 사용하면 이 문제를 해결할 수 있습니다

코드를 복사하세요. 코드는 다음과 같습니다.

<br> <br><div> <br><div id="aa " ksjfkls="sdf" ><p>sdf</p> <br><p djkfjd="df"></p> <br></div> <br><div id="bb" sdfksf= 333 > <br></div> <br></html> ><script> <BR>var html = function( ){ <BR>var d = document,div = d.createElement('div') <BR>return function(id){ <BR>var o = d .getElementById(id); <BR>if(o.outerHTML) <BR>return o.outerHTML; <BR>else{ <BR>div.innerHTML = '' <BR>var h = ''; .appendChild(o.cloneNode(true)); <BR>return div.innerHTML <BR>} <BR>} <BR>}() <BR>alert(html('aa')) <BR>alert(html ('bb')) <BR></script&gt ; <BR><BR></script>
</div>
</div>