개발 도구에 해당 기능이 있을 거라 테스트해봤습니다.
전제: 단순한 작은 테스트일 뿐이며, addEventListener는 표준 바인딩 기능으로 IE에서는 이와 호환되지 않습니다(해당 IE는 attachmentEvent입니다). )이므로 이번에는 테스트를 위해 먼저 IE를 포기하고 Firefox 5.0.1, Chrome 14.0, Opera 11.50을 사용하세요.
테스트 페이지:
Test< /title> <br><style type= "text/css"> <br>.test { <br>배경색: #FFF; <br>테두리: 1px 단색 회색; <br>너비: 100px; <br>여백: 10px 0; <br>float: 왼쪽 <br>} <br></style> <br><div id="test1" class="test" onclick="console.log('test1 : click!');" onmouseover="console.log('test1 : mouseover!');"> TEST1</div> <br><div id="test2" class="test">TEST2</div> <br><div id="test3" class="test">TEST3</div> ; <BR><script type="text /javascript"> <br>(function(){ <br>var $ = function(o){//간단한 도구 <br>return document.getElementById(o); <br>} <br>//Test2의 경우: <br>$('test2').onclick = function(){console.log('test2 : click!');} <br>$('test2') .onmouseover = function(){console.log( 'test2 : mouseover!');} <br>//Test3의 경우: <br>$('test3').addEventListener('click', function(){ <br>console.log('test3 : click!' ); <br>}, false) <br>$('test3').addEventListener('mouseover', function(){ <br>console.log('test3 : mouseover!'); <br>})(); <br></body> 🎜> <br>
<p>页面效果如下截图：</p>
<p> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233144777.png" class="lazy" border="0" alt="onclick && addEventListener_javascript 기술에 대한 이벤트 바인딩에 대한 소규모 테스트" ></p>
<p>测试代码中采用了三种最常见的事件绑定方法</p>
<p>FIREFOX:</p>
<p>1，Firefox 的 Firebug 中选中<strong> test1 </strong>元素：</p>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028556.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0"> </p>
<p>右侧 DOM 标签中选择显示所有属性：</p>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028301.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0"> </p>
<p>在其中找到了 attributes 数组，如下：</p>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028825.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0"> </p>
<p>这是因为 test1 元素的两个事件句柄直接写到了元素中，再往下的列表中找不到更多相关的信息，此种绑定模式下只能在 firebug 的 DOM 标签的 attributes 中找到事件句柄。</p>
<p>2，选中<strong> test2</strong> 元素：</p>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028602.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0"> </p>
<p>右侧 DOM 标签：</p>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028132.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0"> </p>
<p></p>
<p>test2 采用在 javascript 中绑定事件句柄的方式，被作为“用户自定义属性”显示在了 DOM 标签中，右击鼠标可以查看相关信息：</p>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028317.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0"> </p>
<p>3，选中 <strong>test3 </strong>元素：</p>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028974.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0"> </p>
<p>这次在 DOM 标签中没有找到任何相关此元素绑定事件的信息。。。</p>
<p></p>
<p>总而言之，firebug 中<strong>在标准绑定事件函数下</strong>（addEventListener），并不好检测到某个元素已绑定的事件函数，（不要说尝试打印一下那个元素的 onclick 属性，addEventListener 绑定和 onclick 绑定毫不相干，此种情况下你会得到 nudefined）；如果是<strong>在前两种事件绑定下</strong>，可以得到一些简单信息。</p>
<p>-----</p>
<p>OPERA：</p>
<p>1，在 Opera 的 Dragonfly 中选中 <strong>test1 :</strong></p>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028363.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0"> </p>
<p>在右方的属性列表中可以找到相关的信息：</p>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028301.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0"> </p>
<p>点击加号同样可以查看绑定的函数信息：</p>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028558.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0"> </p>
<p>想查看某个函数体的话，有一种简单的方法，在控制台中直接输入：</p>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028490.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0"> </p>
<p>直接就打印出函数体，更加的方便！</p>
<p>2，选择 <strong>test2 </strong>和<strong> test1</strong> 几乎相同，就不在赘述了；</p>
<p>3，选择 <strong>test3：</strong></p>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028905.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0"> </p>
<p>오른쪽 속성 태그에는 아무것도 찾을 수 없습니다. onclick 및 onmouseover 값은 모두 null입니다. </p>
<p>요컨대 Opera Dragonfly와 Firefox Firebug는 비슷한 성능을 발휘하며 표준 바인딩 기능에서 어떤 이벤트가 요소에 바인딩되는지는 명확하지 않습니다. </p>
<p>------</p>
<p>크롬:</p>
<p>Chrome에서 훨씬 더 명확해졌습니다. </p>
<p>1, 디버깅 도구에서 <strong>test1(또는 test2, 이 둘은 유사함)을 선택합니다. </strong></p>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028982.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0"> </p>
<p>오른쪽 정보 부분을 살펴보세요. </p>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028243.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0"> </p>
Chrome의 <p><strong>이벤트 리스너</strong>는 현재 선택된 요소에 바인딩된 청취 기능을 직접 나열하는 좋은 도구입니다. 작은 검은색 삼각형을 클릭하면 바인딩된 기능에 대한 정보를 볼 수 있습니다. </p>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028969.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0"> </p>
<p>click에는 두 가지 항목이 있습니다. 첫 번째 항목은 우리가 바인딩한 onclick 함수 정보이고, 두 번째 항목인 document는 볼 필요가 없습니다(Chrome 자체 처리).
</p>
<p>isAttribute: true: <strong>이 onclick 함수 핸들이 요소 속성으로 처리됨을 나타냅니다(test1이든 test2이든 onclick = function(){…}을 사용하기 때문입니다).</strong>
</p>
<p>lineNumber: 18: <strong>은 바인딩된 함수의 위치를 나타냅니다.
</strong></p>useCapture: false :<p> 이벤트 캡처가 사용되지 않음을 나타냅니다. 다른 의미는 매우 강력하므로 언급하지 않겠습니다. <strong>
</strong>마찬가지로 </p>속성<p>의 첫 번째 HTMLDivElement 목록에서 test1과 test2 모두 다음을 볼 수 있습니다. <strong>
</strong></p> <p>
<img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028338.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0">2, </p>test3<p> 선택: <strong>
</strong></p> <p>
<img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028218.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0"></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>속성에서는 onclick과 onmouseover가 모두 null이 되지만 이벤트 리스너는 여전히 다음과 같습니다. </p>
<p></p> <p>
<img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028340.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0">하지만 div#test3에 주목하세요:</p>
<p></p> <p>
<img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110731233028889.png" class="lazy" title="image" style="max-width:90%" style="max-width:90%" alt="image" style="max-width:90%" border="0">onclick 속성을 사용하지 않고 addEventListener를 사용하므로 isAttribute가 false가 됩니다. </p>
<p></p>
<p></p>
<p>먼저 이것을 기억하세요! 글이 좀 지저분하네요~</p>
<p></p>
</div>
</div>
</div>
<div class="wzconShengming_sp">
<div class="bzsmdiv_sp">본 웹사이트의 성명</div>
<div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- <div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>인기 기사</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780570.html" title="R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780641.html" title="R.E.P.O. 최고의 그래픽 설정" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 최고의 그래픽 설정</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796785841.html" title="어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션" class="phpgenera_Details_mainR4_bottom_title">어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 몇 주 전</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780520.html" title="R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796785857.html" title="Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다" class="phpgenera_Details_mainR4_bottom_title">Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 몇 주 전</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/article.html">더보기</a>
</div>
</div>
</div> -->
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>핫 AI 도구</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>사실적인 누드 사진을 만들기 위한 AI 기반 앱</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>사진에서 옷을 제거하는 온라인 AI 도구입니다.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>무료로 이미지를 벗다</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI 옷 제거제</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title">
<h3>AI Hentai Generator</h3>
</a>
<p>AI Hentai를 무료로 생성하십시오.</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/ai">더보기</a>
</div>
</div>
</div>
<script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>인기 기사</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780570.html" title="R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780641.html" title="R.E.P.O. 최고의 그래픽 설정" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 최고의 그래픽 설정</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796785841.html" title="어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션" class="phpgenera_Details_mainR4_bottom_title">어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 몇 주 전</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780520.html" title="R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796785857.html" title="Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다" class="phpgenera_Details_mainR4_bottom_title">Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 몇 주 전</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/article.html">더보기</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>뜨거운 도구</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="메모장++7.3.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_title">
<h3>메모장++7.3.1</h3>
</a>
<p>사용하기 쉬운 무료 코드 편집기</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 중국어 버전" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_title">
<h3>SublimeText3 중국어 버전</h3>
</a>
<p>중국어 버전, 사용하기 매우 쉽습니다.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="스튜디오 13.0.1 보내기" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_title">
<h3>스튜디오 13.0.1 보내기</h3>
</a>
<p>강력한 PHP 통합 개발 환경</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="드림위버 CS6" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_title">
<h3>드림위버 CS6</h3>
</a>
<p>시각적 웹 개발 도구</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac 버전" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac 버전</h3>
</a>
<p>신 수준의 코드 편집 소프트웨어(SublimeText3)</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/ai">더보기</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>뜨거운 주제</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/gmailyxdlrkzn" title="Gmail 이메일의 로그인 입구는 어디에 있나요?" class="phpgenera_Details_mainR4_bottom_title">Gmail 이메일의 로그인 입구는 어디에 있나요?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>7417</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>15</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/cakephp-tutor" title="Cakephp 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">Cakephp 튜토리얼</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1359</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>52</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/steamdzhmcssmgs" title="Steam의 계정 이름 형식은 무엇입니까?" class="phpgenera_Details_mainR4_bottom_title">Steam의 계정 이름 형식은 무엇입니까?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>76</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>11</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/winactivationkeyper" title="Win11 활성화 키 영구" class="phpgenera_Details_mainR4_bottom_title">Win11 활성화 키 영구</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>27</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>19</span>
</div>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/faq/zt">더보기</a>
</div>
</div>
</div>
</div>
</div>
<div class="Article_Details_main2">
<div class="phpgenera_Details_mainL4">
<div class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div class="phpgenera_Details_mainL4_info">
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796777123.html" title="JavaScript로 문자열 문자를 교체하십시오" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174162283166996.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript로 문자열 문자를 교체하십시오" />
</a>
<a href="https://www.php.cn/ko/faq/1796777123.html" title="JavaScript로 문자열 문자를 교체하십시오" class="phphistorical_Version2_mids_title">JavaScript로 문자열 문자를 교체하십시오</a>
<span class="Articlelist_txts_time">Mar 11, 2025 am 12:07 AM</span>
<p class="Articlelist_txts_p">JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명
이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다.
JavaScript 코드 내부의 문자열을 교체하십시오
가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다.
str = str.replace ( "find", "replace");
이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오.
str = str.replace (/fi</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796776142.html" title="자신의 Ajax 웹 응용 프로그램을 구축하십시오" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174145028943934.png?x-oss-process=image/resize,m_fill,h_207,w_330" alt="자신의 Ajax 웹 응용 프로그램을 구축하십시오" />
</a>
<a href="https://www.php.cn/ko/faq/1796776142.html" title="자신의 Ajax 웹 응용 프로그램을 구축하십시오" class="phphistorical_Version2_mids_title">자신의 Ajax 웹 응용 프로그램을 구축하십시오</a>
<span class="Articlelist_txts_time">Mar 09, 2025 am 12:11 AM</span>
<p class="Articlelist_txts_p">그래서 여기 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다.
원래 Jesse J에 의해 만들어진 Ajax라는 용어</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796775896.html" title="10 JQuery Fun 및 Games 플러그인" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174136573481488.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="10 JQuery Fun 및 Games 플러그인" />
</a>
<a href="https://www.php.cn/ko/faq/1796775896.html" title="10 JQuery Fun 및 Games 플러그인" class="phphistorical_Version2_mids_title">10 JQuery Fun 및 Games 플러그인</a>
<span class="Articlelist_txts_time">Mar 08, 2025 am 12:42 AM</span>
<p class="Articlelist_txts_p">10 재미있는 jQuery 게임 플러그인 웹 사이트를보다 매력적으로 만들고 사용자 끈적함을 향상시킵니다! Flash는 여전히 캐주얼 웹 게임을 개발하기위한 최고의 소프트웨어이지만 JQuery는 놀라운 효과를 만들 수 있으며 Pure Action Flash 게임과 비교할 수는 없지만 경우에 따라 브라우저에서 예기치 않은 재미를 가질 수 있습니다.
jQuery tic 발가락 게임
게임 프로그래밍의 "Hello World"에는 이제 jQuery 버전이 있습니다. 소스 코드
jQuery Crazy Word Composition 게임
이것은 반은 반은 게임이며, 단어의 맥락을 알지 못해 이상한 결과를 얻을 수 있습니다. 소스 코드
jQuery 광산 청소 게임</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796781074.html" title="내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202503/18/2025031815123131507.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까?" />
</a>
<a href="https://www.php.cn/ko/faq/1796781074.html" title="내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까?" class="phphistorical_Version2_mids_title">내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까?</a>
<span class="Articlelist_txts_time">Mar 18, 2025 pm 03:12 PM</span>
<p class="Articlelist_txts_p">기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796775894.html" title="jQuery 시차 자습서 - 애니메이션 헤더 배경" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174136555176328.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="jQuery 시차 자습서 - 애니메이션 헤더 배경" />
</a>
<a href="https://www.php.cn/ko/faq/1796775894.html" title="jQuery 시차 자습서 - 애니메이션 헤더 배경" class="phphistorical_Version2_mids_title">jQuery 시차 자습서 - 애니메이션 헤더 배경</a>
<span class="Articlelist_txts_time">Mar 08, 2025 am 12:39 AM</span>
<p class="Articlelist_txts_p">이 튜토리얼은 jQuery를 사용하여 매혹적인 시차 배경 효과를 만드는 방법을 보여줍니다. 우리는 멋진 시각적 깊이를 만드는 계층화 된 이미지가있는 헤더 배너를 만들 것입니다. 업데이트 된 플러그인은 jQuery 1.6.4 이상에서 작동합니다.
다운로드</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796781075.html" title="브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202503/18/2025031815143476606.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까?" />
</a>
<a href="https://www.php.cn/ko/faq/1796781075.html" title="브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까?" class="phphistorical_Version2_mids_title">브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까?</a>
<span class="Articlelist_txts_time">Mar 18, 2025 pm 03:14 PM</span>
<p class="Articlelist_txts_p">이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796775906.html" title="Matter.js : 소개를 시작합니다" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174136638986028.png?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Matter.js : 소개를 시작합니다" />
</a>
<a href="https://www.php.cn/ko/faq/1796775906.html" title="Matter.js : 소개를 시작합니다" class="phphistorical_Version2_mids_title">Matter.js : 소개를 시작합니다</a>
<span class="Articlelist_txts_time">Mar 08, 2025 am 12:53 AM</span>
<p class="Articlelist_txts_p">Matter.js는 JavaScript로 작성된 2D 강성 신체 물리 엔진입니다. 이 라이브러리를 사용하면 브라우저에서 2D 물리학을 쉽게 시뮬레이션 할 수 있습니다. 그것은 단단한 몸체를 생성하고 질량, 면적 또는 밀도와 같은 물리적 특성을 할당하는 능력과 같은 많은 기능을 제공합니다. 중력 마찰과 같은 다양한 유형의 충돌 및 힘을 시뮬레이션 할 수도 있습니다.
Matter.js는 모든 주류 브라우저를 지원합니다. 또한, 터치를 감지하고 반응이 좋기 때문에 모바일 장치에 적합합니다. 이러한 모든 기능을 사용하면 엔진 사용 방법을 배울 수있는 시간이 필요합니다. 이는 물리 기반 2D 게임 또는 시뮬레이션을 쉽게 만들 수 있습니다. 이 튜토리얼에서는 설치 및 사용을 포함한이 라이브러리의 기본 사항을 다루고</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796775910.html" title="jQuery 및 Ajax를 사용한 자동 새로 고침 DIV 컨텐츠" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174136669185332.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="jQuery 및 Ajax를 사용한 자동 새로 고침 DIV 컨텐츠" />
</a>
<a href="https://www.php.cn/ko/faq/1796775910.html" title="jQuery 및 Ajax를 사용한 자동 새로 고침 DIV 컨텐츠" class="phphistorical_Version2_mids_title">jQuery 및 Ajax를 사용한 자동 새로 고침 DIV 컨텐츠</a>
<span class="Articlelist_txts_time">Mar 08, 2025 am 12:58 AM</span>
<p class="Articlelist_txts_p">이 기사에서는 jQuery 및 Ajax를 사용하여 5 초마다 DIV의 컨텐츠를 자동으로 새로 고치는 방법을 보여줍니다. 이 예제는 RSS 피드의 최신 블로그 게시물을 마지막 새로 고침 타임 스탬프와 함께 가져오고 표시합니다. 로딩 이미지는 선택 사항입니다</p>
</div>
</div>
<a href="https://www.php.cn/ko/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p>
</div>
<div class="footermid">
<a href="https://www.php.cn/ko/about/us.html">회사 소개</a>
<a href="https://www.php.cn/ko/about/disclaimer.html">부인 성명</a>
<a href="https://www.php.cn/ko/update/article_0_1.html">Sitemap</a>
</div>
<div class="footerbottom">
<p>
© php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>
<script src="/static/js/common_new.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js?1744078091"></script>
<script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '9']);
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
g.async = true;
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<script>
// top
layui.use(function () {
var util = layui.util;
util.fixbar({
on: {
mouseenter: function (type) {
layer.tips(type, this, {
tips: 4,
fixed: true,
});
},
mouseleave: function (type) {
layer.closeAll("tips");
},
},
});
});
document.addEventListener("DOMContentLoaded", (event) => {
// 定义一个函数来处理滚动链接的点击事件
function setupScrollLink(scrollLinkId, targetElementId) {
const scrollLink = document.getElementById(scrollLinkId);
const targetElement = document.getElementById(targetElementId);
if (scrollLink && targetElement) {
scrollLink.addEventListener("click", (e) => {
e.preventDefault(); // 阻止默认链接行为
targetElement.scrollIntoView({
behavior: "smooth"
}); // 平滑滚动到目标元素
});
} else {
console.warn(
`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
);
}
}
// 使用该函数设置多个滚动链接
setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
// 可以继续添加更多的滚动链接设置
});
window.addEventListener("scroll", function () {
var fixedElement = document.getElementById("Article_Details_main1Lmain");
var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
var scrollHeight = document.documentElement.scrollHeight; // 页面总高度
// 计算距离底部的距离
var distanceToBottom = scrollHeight - scrollTop - clientHeight;
// 当距离底部小于或等于300px时，取消固定定位
if (distanceToBottom <= 980) {
fixedElement.classList.remove("Article_Details_main1Lmain");
fixedElement.classList.add("Article_Details_main1Lmain_relative");
} else {
// 否则，保持固定定位
fixedElement.classList.remove("Article_Details_main1Lmain_relative");
fixedElement.classList.add("Article_Details_main1Lmain");
}
});
</script>
</body>
</html> 
