jQuery 이벤트 객체

jQuery 이벤트 객체 사용

이벤트를 사용하려면 당연히 이벤트 객체가 필요합니다. 이벤트 객체의 획득과 이벤트 객체의 속성이 브라우저마다 다르기 때문에 브라우저 간에 이벤트 객체를 사용하는 것은 어렵습니다.

이벤트 객체는 jQuery로 통합됩니다. 이벤트 처리 기능을 바인딩할 때 jQuery 형식의 이벤트 객체가 유일한 매개변수로 전달됩니다.

$("#testDiv").bind("click", function(event) { });

이벤트 객체에 대한 자세한 설명은 jQuery 공식 문서를 참조하세요. : http: //docs.jquery.com/Events/jQuery.Event

jQuery 이벤트 객체는 서로 다른 브라우저 간의 차이점을 병합합니다. 예를 들어 모든 브라우저에서 event.target 속성을 통해 이벤트 트리거를 얻을 수 있습니다. IE 네이티브 이벤트 객체를 사용하려면 event.srcElement에 액세스해야 합니다.

다음은 jQuery 이벤트 객체가 브라우저에서 지원할 수 있는 속성입니다.

EventObjType.jpg

위는 jQuery 공식 문서에서 제공하는 이벤트 객체의 속성이며, 여러 브라우저에서 지원하는 속성도 다음과 같습니다. 아래에 제공됩니다.

EventObjTypeMore.jpg


이벤트 객체에는 속성 외에도 이벤트가 있습니다. 버블링 stopPropagation() 취소 등과 같이 반드시 사용되는 몇 가지 이벤트가 있습니다. 다음은 jQuery 이벤트 객체의 함수 목록입니다.

EventObjFun.jpg


이 함수들 중에서 가장 일반적으로 사용되는 함수는 stopPropagation()이며 우리가 반드시 사용할 함수입니다. 버블링을 취소하기 위해 원래 이벤트 객체에 대해 event.cancelBubble=true를 작동하는 것과 동일합니다.


지속적인 학습
||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(function() { $("a").click(function(event) { alert(event.type); //获取事件类型(此处弹出 click) alert(event.target.href); //获取触发事件的元素的 href 属性值 alert("当前鼠标坐标:" + event.pageX + ", " + event.pageY); //获取鼠标当前坐标 event.preventDefault(); //阻止链接跳转 }); }); </script> </head> <!-- HTML --> <body> <a href="http://www.google.com/">Google</a> </body> </html>
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!