찾다

집 >웹 프론트엔드 >JS 튜토리얼 >onclick && addEventListener_javascript 기술에 대한 이벤트 바인딩에 대한 소규모 테스트

onclick && addEventListener_javascript 기술에 대한 이벤트 바인딩에 대한 소규모 테스트

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
2016-05-16 18:03:581527검색

개발 도구에 해당 기능이 있을 거라 테스트해봤습니다.
전제: 단순한 작은 테스트일 뿐이며, 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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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/imghwm/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 class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="drag and drop_jquery를 통해 이미지를 동적으로 변경하는 jQuery Flex 코드" href="https://m.php.cn/ko/faq/19852.html">drag and drop_jquery를 통해 이미지를 동적으로 변경하는 jQuery Flex 코드</a></span><span>다음 기사：<a class="dBlack" title="drag and drop_jquery를 통해 이미지를 동적으로 변경하는 jQuery Flex 코드" href="https://m.php.cn/ko/faq/19854.html">drag and drop_jquery를 통해 이미지를 동적으로 변경하는 jQuery Flex 코드</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' 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>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><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><!-- End Matomo Code --></html>