javascript_javascript 기술의 요소에 대한 이벤트를 지정하는 세 가지 방법-JS 튜토리얼-php.cn

javascript_javascript 기술의 요소에 대한 이벤트를 지정하는 세 가지 방법

WBOY

풀어 주다： 2016-05-16 16:40:10

원래의

1111명이 탐색했습니다.

JavaScript에서는 요소에 대한 이벤트를 지정할 수 있습니다.
1. HTML에서는 onclick 속성을 사용하세요
2. 자바스크립트에서는 onclick 속성
을 사용하세요. 3. javascipt에서 addEvenListener() 메소드를 사용하세요

세 가지 방법 비교
(1) 두 번째와 세 번째 방법에서는 이벤트 객체를 함수에 전달하고 해당 속성을 읽을 수 있지만 방법 1은 그렇지 않습니다.
(2) 두 번째와 세 번째 옵션이 선호됩니다. 첫 번째 옵션은 이벤트에서 콘텐츠를 분리하는 데 도움이 되지 않으며 이벤트 개체의 관련 콘텐츠를 사용할 수 없습니다.

일부 구문 세부정보
(1) 첫 번째 방법에서는 onclick이 대소문자를 구분하지 않지만, 두 번째 방법에서는 소문자를 사용해야 합니다. HMTL은 대소문자를 구분하지 않지만 JS는 대소문자를 구분합니다.
(2) 두 번째와 세 번째 방법은 함수명을 지정할 때 큰따옴표가 없고, 첫 번째 방법은 HTML 속성으로 큰따옴표가 필요합니다.
(3) 첫 번째 방법에는 괄호가 필요하지만 두 번째와 세 번째 방법에는 괄호가 필요하지 않습니다.

onclick="clickHandler()"
document.getElementById("jsOnClick").onclick = clickHandler2; 
document.getElementById("addEventListener").addEventListener("click", clickHandler2);

로그인 후 복사

전체 코드는 다음과 같습니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Even Deom</title> 

</head> 
<body> 
<button id="htmlOnClick" onclick="clickHandler()">htmlOnClick</button> 
<button id="jsOnClick">jsOnClick</button> 
<button id="addEventListener">addEventListener</button> 

<script defer> 
function clickHandler() { 
alert("onclick attribute in html"); 
} 
function clickHandler2(e) { 
alert(e.target.innerHTML); 
} 
document.getElementById("jsOnClick").onclick = clickHandler2; 
document.getElementById("addEventListener").addEventListener("click", 
clickHandler2); 
</script> 
</body> 
</html>

로그인 후 복사

JavaScript에서는 요소에 대한 이벤트를 지정할 수 있습니다.
1. HTML에서는 onclick 속성을 사용하세요

2. 자바스크립트에서는 onclick 속성을 사용하세요
(1) 함수 이름에는 큰따옴표가 없습니다.

3. javascipt에서 addEvenListener() 메소드를 사용하세요

세 가지 방법 비교
(1) 두 번째와 세 번째 방법에서는 이벤트 객체를 함수에 전달하고 해당 속성을 읽을 수 있지만 방법 1은 그렇지 않습니다.

onclick="clickHandler()"
document.getElementById("jsOnClick").onclick = clickHandler2; 
document.getElementById("addEventListener").addEventListener("click", clickHandler2);

로그인 후 복사

전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Even Deom</title>

</head>
<body>
<button id="htmlOnClick" onclick="clickHandler()">htmlOnClick</button>
<button id="jsOnClick">jsOnClick</button>
<button id="addEventListener">addEventListener</button>

<script defer>
function clickHandler() {
alert("onclick attribute in html");
}
function clickHandler2(e) {
alert(e.target.innerHTML);
}
document.getElementById("jsOnClick").onclick = clickHandler2;
document.getElementById("addEventListener").addEventListener("click",
clickHandler2);
</script>
</body>
</html>

로그인 후 복사