JavaScript로 onClick 설정
- JavaScript의 이벤트 및 EventListener란 무엇입니까?
-
JavaScript의 요소에
onClickEventListener를 추가하는 방법 -
JavaScript에서
onClickEventListener에 요소 참조를 전달하는 방법 -
JavaScript에서
onClickEventListener를 Jquery에 추가하는 방법
이 튜토리얼에서는 JavaScript를 사용하여 onClick 리스너를 요소에 연결하는 방법에 대해 설명합니다. 우리는 논의 할 것이다:
- JavaScript에서 이벤트 및 EventListener 또는 EventHandler란 무엇입니까?
- 요소에
onClickEventListener를 추가하는 방법 onClickEventListener에 대한 참조를 전달하는 방법- Jquery를 사용하여
onClickEventListener를 추가하는 방법
JavaScript의 이벤트 및 EventListener란 무엇입니까?
이벤트는 브라우저나 최종 사용자가 하는 것입니다. 이러한 이벤트는 이벤트 핸들러 또는 이벤트 리스너라는 JavaScript 개념으로 처리할 수 있습니다. 이벤트 리스너는 특정 이벤트가 발생할 때 실행됩니다.
onClick은 이러한 이벤트 리스너 중 하나입니다. onClick 이벤트 리스너는 사용자가 요소를 클릭할 때 트리거/실행됩니다.
JavaScript의 요소에 onClick EventListener를 추가하는 방법
<!DOCTYPE html>
<html>
<body>
<div id="textElement" onclick="ChangeColor()">
Change Color to Red
</div>
<script>
function ChangeColor() {
document.getElementById("textElement").style.color = "red";
}
</script>
</body>
</html>
위의 코드는 ChangeColor 메소드를 트리거/실행합니다. 이 메소드는 ID가 textElement이고 텍스트 색상을 빨간색으로 변경하는 Document 개체 모델을 사용하여 요소에 액세스합니다.
onClick은 class, id 등과 유사한 HTML 요소의 속성으로 설정됩니다.
또는 JavaScript를 사용하여 요소의 onClick 속성을 직접 설정할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<div id="textElement">
Change Color to Red
</div>
<script>
document.getElementById("textElement").onclick = function() {
document.getElementById("textElement").style.color = "red";
};
</script>
</body>
</html>
이렇게 하면 textElement에 액세스하고 function을 할당합니다. 이 function은 사용자가 HTML 요소를 클릭할 때 실행되며 결과는 비슷합니다. 예를 들어, textElement의 id가 있는 요소의 색상은 빨간색으로 변경됩니다.
또한 JavaScript 요소의 addEventListener 메소드/기능을 사용하여 동일한 기능을 수행할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<div id="textElement">
Change Color to Red
</div>
<script>
let element = document.getElementById("textElement");
element.addEventListener("click", function(){
element.style.color = "red";
});
</script>
</body>
</html>
addEventListener는 두 개의 인수를 사용합니다. 첫 번째는 HTML 요소에서 수신 대기할 이벤트 유형이고 두 번째는 특정 이벤트가 발생할 때 실행할 콜백 함수입니다.
Internet Explorer를 사용하는 경우 호환성 문제로 인해 addEventListener가 작동하지 않습니다. 이 동작을 복제하려면 attachEvent를 사용하는 폴백을 사용해야 합니다.
<!DOCTYPE html>
<html>
<body>
<div id="textElement">
Change Color to Red
</div>
<script>
let element = document.getElementById("textElement");
if(element.addEventListener){
element.addEventListener('click', function(){
element.style.color = "red";
});
}else if(element.attachEvent){
element.attachEvent('onclick', function(){
element.style.color = "red";
});
}
</script>
</body>
</html>
JavaScript에서 onClick EventListener에 요소 참조를 전달하는 방법
<!DOCTYPE html>
<html>
<body>
<div id="textElement" onclick="ChangeColor(this,'red')">
Change Color to passed Color
</div>
<script>
function ChangeColor(element,color) {
element.style.color = color;
}
</script>
</body>
</html>
예제에서 this와 red라는 두 개의 인수를 전달하고 this는 DOM 요소에 대한 참조를 함수에 전달하지만 red는 단지 문자열입니다.
두 번째 인수만 변경하면 요소의 색상을 변경할 수 있음을 알 수 있습니다. 이 접근 방식은 다른 접근 방식에 비해 재사용성을 높입니다. 예를 들어, 여러 요소와 함께 ChangeColor 메서드를 사용할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<div id="textElement" onclick="ChangeColor(this,'red')">
Change Color to Red
</div>
<div id="textElement" onclick="ChangeColor(this,'blue')">
Change Color to Blue
</div>
<script>
function ChangeColor(element,color) {
element.style.color = color;
}
</script>
</body>
</html>
JavaScript에서 onClick EventListener를 Jquery에 추가하는 방법
Vanilla JavaScript를 사용하지 않고 JavaScript 라이브러리인 Jquery와 같은 것을 사용하는 경우 프로세스는 유사합니다. 유일한 차이점은 구문입니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#textElement").click(function(){
$(this).css('color','red')
});
});
</script>
</head>
<body>
<div id="textElement">Change Color to Red</p>
</body>
</html>
문서가 로드되자마자 textElement의 id가 있는 요소에 이벤트 리스너를 추가합니다.