Node.js 팁 1주 collection_javascript 기술
- WBOY원래의
- 2016-05-16 18:30:15954검색
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>< ;/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에서 악마이므로 절대 사용하지 않는 것이 좋습니다. 그러나 때로는
코드 복사
fn()
함수 실행과 함께 변경하고 싶다면
이렇게 작성하는 것이 좋습니다
코드 복사
코드는 다음과 같습니다.
코드는 다음과 같습니다.
이벤트에 대해서는 누구나 알고 있지만 여러 프레임워크에 맞춤 이벤트가 구현되어 있습니다.
코드 복사 코드는 다음과 같습니다.
<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>< ;/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()
함수 실행과 함께 변경하고 싶다면
이렇게 작성하는 것이 좋습니다
코드 복사
코드는 다음과 같습니다.
코드는 다음과 같습니다.
<script> var fn = function(){ <span>var a = 1; <a style="CURSOR: pointer" data="56197" class="copybut" id="copybut56197" onclick="doCopy('code56197')">반환 함수(p){ <u>a = p===undefine?a </u>alert(a) </a>} </span>}() </div>fn(); <div class="codebody" id="code56197">fn(0) <br></script>
4.
전통적인 방법은 el.offsetParent와 el.offsetLeft를 거쳐
를 얻는 것이지만 실제로 가장 좋고 쉬운 방법은 getBoundingClientRect
코드는 다음과 같습니다
제목 없음
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> ; <BR><BR></script>
</div>
</div>
4.
전통적인 방법은 el.offsetParent와 el.offsetLeft를 거쳐
를 얻는 것이지만 실제로 가장 좋고 쉬운 방법은 getBoundingClientRect
코드는 다음과 같습니다
코드 복사 코드는 다음과 같습니다.
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를 클릭하면 위의 빨간색이 회색과 완전히 겹쳐집니다<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>
5. ie 아래의 OuterHTML을 사용해 본 적이 있나요? Fat Sauce는 사용하기 쉽습니다. 특정 요소 아래의 html을 반환하고 싶을 뿐만 아니라 이 요소의 html도 반환하고 싶습니다.
그러나 이 속성은 사용할 수만 있습니다. IE에서는 이 속성이 없습니다.
js 팁을 사용하면 이 문제를 해결할 수 있습니다
코드를 복사하세요. 코드는 다음과 같습니다.
> 성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.