HTML 이벤트 핸들러는 HTML 요소에서 이벤트가 발생할 때 특정 조치를 트리거하는 데 사용됩니다. 예를 들어, 사용자가 버튼을 클릭하면 이벤트가 트리거되고 이벤트 핸들러 기능이 실행됩니다.
다음은 Onclick 이벤트 핸들러가있는 HTML 버튼의 예입니다.
```
<button onclick = "myFunction ()"> 클릭 </button>
<script>
function myFunction () {
Alert ( "Hello World!");
}
</script>
```
이 예에서는 onclick 이벤트 핸들러가 버튼을 클릭하면 myFunction () 함수를 호출하는 데 사용됩니다. 이 함수는 ""Hello World!""텍스트와 함께 경고 메시지를 표시합니다.
addeventListener () 메소드를 사용하여 JavaScript 이벤트 처리기를 HTML 요소에 추가 할 수도 있습니다. 예는 다음과 같습니다.
```
<button id = ""myButton""> 클릭 </button>
<script>
document.getElementById ( "myButton"). addEventListener ( "click", function () {
Alert ( "Hello World!");
});
</script>
```
이 예에서 addeventListener () 메소드는 ID ""MyButton""을 사용하여 버튼에 클릭 이벤트 핸들러를 추가하는 데 사용됩니다. 버튼을 클릭 할 때 두 번째 인수가 실행되고 ""Hello World!""텍스트가있는 경고 메시지가 표시되면 기능이 전달됩니다.
이벤트 핸들러는 JavaScript 코드를 사용하여 첨부 할 수있어 유연성과 제어가 더욱 높아질 수 있습니다. 예를 들어, 다음 코드를 사용하여 페이지의 모든 버튼에 클릭 이벤트 핸들러를 첨부 할 수 있습니다.
```
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", myFunction);
}
```
이 예에서 "addeventListener"는 "클릭"이벤트를 각 버튼 요소에 첨부하는 메소드이며, "myFunction"은 이벤트가 발생할 때 실행될 함수의 이름입니다.
전반적으로 이벤트 처리기는 JavaScript를 사용하여 동적 및 대화식 웹 페이지를 작성하는 강력한 도구입니다. 사용자 작업 및 브라우저 이벤트에 응답하면보다 매력적이고 반응이 좋은 사용자 경험을 만들 수 있습니다.
Sample code Preview
Click the buttons below:
코드 보기:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Event Handler with for() Loop</title>
</head>
<body>
<h1>Click the buttons below:</h1>
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
<script>
// Get all the buttons on the page
var buttons = document.getElementsByTagName("button");
// Loop through each button and add a click event handler
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
alert("You clicked " + this.id);
});
}
</script>
</body>
</html>'구글덕후의 HTML > 구글덕후의 Javascript' 카테고리의 다른 글
| 자바스크립트 document.getElementById, innerHTML (0) | 2023.03.15 |
|---|