javascript_javascript 기술의 요소에 대한 이벤트를 지정하는 세 가지 방법
- WBOY원래의
- 2016-05-16 16:40:101064검색
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은 그렇지 않습니다.
일부 구문 세부정보
(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>