이 기사에서는 JavaScript 이벤트 대표단의 사용에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
1. 페이지의 모든 부분을 클릭하여 이벤트를 트리거합니다.
script1.js 파일을 만듭니다.
다음과 같이 코드를 복사합니다. (function () {
eventUtility.AdDevent (문서, "클릭", 함수 (EVT) {
경고 ( 'Hello');
});
} ());
페이지 섹션.
다음과 같이 코드를 복사하십시오. <head>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8"/>
<제목> </title>
</head>
<body>
<script src = "eventutility.js"> </script>
<script src = "script1.js"> </script>
</body>
</html>
출력 결과 : 페이지 중 하나를 클릭하면 나타납니다.
그러나 때로는 문서의 요소를 클릭하여 이벤트를 트리거하려고합니다.
2. 대의원을 사용하여 이벤트를 트리거하십시오
페이지에 태그를 추가하십시오.
다음과 같이 코드를 복사하십시오. <head>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8"/>
<제목> </title>
</head>
<body>
<div>
<p> <a href = "#"> 나를 클릭하십시오 </a> </p>
</div>
<script src = "eventutility.js"> </script>
<script src = "script1.js"> </script>
</body>
script1.js를 수정하십시오.
다음과 같이 코드를 복사합니다. (function () {
eventUtility.AdDevent (문서, "클릭", 함수 (EVT) {
// 클릭 객체를 가져옵니다
var target = everitility.getTarget (EVT);
// 클릭 객체의 태그 이름을 가져옵니다
var tagname = target.tagname;
// 태그 인 경우
if (tagname === "a") {
Alert ( "Click Me");
// 링크의 기본 동작을 차단합니다
EveritUtility.preventDefault (EVT);
}
});
} ());
출력 결과 : 페이지의 A 태그를 클릭 한 경우에만 상자가 나타납니다.
위의 이점은 다음과 같습니다. 문서에 태그 요소가 얼마나 많이 추가 되더라도 모든 태그는 트리거 될 수 있습니다. 이것은 행사의 시운전입니다. 우리는 아동 요소에 대한 이벤트를 등록하고 싶지만 먼저 아동 요소의 부모 요소와 이벤트를 등록합니다. 이러한 방식으로, 동적으로 추가되고 자식 요소와 동일한 유형의 요소가 부모 요소에 등록됩니다.
아동 요소에 이벤트를 등록하고 문서의 어린이 요소와 동일한 유형의 요소를 동적으로 추가하는 경우 방금 추가 된 이러한 어린이 요소에 대한 이벤트를 등록해야합니다.
또한 이벤트 대표단은 "이벤트 버블"을 잘 활용합니다. "Event Bubble"에 따르면 자식 요소를 클릭 할 때 Child 요소의 부모 요소는 클릭 이벤트를 캡처하고 자체 방법을 트리거합니다.
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.