addEventListener 대 JavaScript의 Onclick
이 기사에서는 JavaScript addEventListener와 onclick의 차이점에 대해 설명합니다.
JavaScript의 addEventListener 대 onclick
addEventListener와 onclick 모두 동일한 목적을 수행할 수 있지만 알아야 할 몇 가지 미묘한 차이가 있습니다.
자, 이것이 이 기사의 전부입니다. 또한 코드 예제와 함께 설명을 제공합니다.
‘onclick’은 HTML 속성입니다. addEventListener는 <Script> 요소에서만 작동합니다.
onclick은 HTML 속성이므로 HTML 요소에 직접 추가하거나 <script> 요소 내에 추가할 수 있습니다. 한편 <script> 요소 내에서만 addEventListener를 사용할 수 있습니다.
예를 들어 다음 코드에서 버튼 요소의 속성으로 onclick을 추가했습니다. 뿐만 아니라 onclick의 값은 JavaScript 경고 메시지입니다.
따라서 버튼을 클릭하면 웹 브라우저에 JavaScript 경고가 표시됩니다. 그러나 addEventListener를 HTML 속성으로 추가할 수 없습니다.
예제 코드:
<head>
<meta charset="utf-8">
<title>1-onlick-HTML-attribute-addEventlistener-Via-Script-Element</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 1.2em;
background-color: #0004ff;
color: #ffffff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<main id="main">
<!-- Add onclick as an attribute of the button -->
<button id="button" onclick="alert('Perform click actions with onclick attribute.')">Default button</button>
</main>
</body>
출력:
<script> 요소에서 버튼을 선택하고 속성으로 onclick을 추가할 수 있습니다. 동시에 addEventListener를 사용하여 버튼에 클릭 이벤트 리스너를 추가할 수도 있습니다.
따라서 다음에서 HTML 버튼에는 onclick 속성과 addEventListener가 있습니다. 결과적으로 버튼을 클릭하면 두 개의 JavaScript 경고 메시지가 표시됩니다.
예제 코드:
<head>
<meta charset="utf-8">
<title>1-onlick-HTML-attribute-addEventlistener-Via-Script-Element-V2</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 1.2em;
background-color: #6800ff;
color: #ffffff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<main id="main">
<button id="button">Default button</button><br/>
</main>
<script>
let button = document.getElementById('button');
// Here, we are in the <script> element, we can
// also add onclick to the button
button.onclick = function() {
alert("Perform click actions with onclick.")
}
// Also add click event via addEventListener
button.addEventListener("click", function() {
alert("Perform click actions with addEventListener");
}, false);
</script>
</body>
출력:
하나의 요소에 여러 addEventListener를 가질 수 있지만 onclick은 하나만 가질 수 있습니다.
addEventListener를 사용하면 여러 클릭 이벤트를 요소에 연결할 수 있습니다. 그러나 단일 onclick 속성만 요소에 첨부할 수 있습니다.
한편, 요소는 addEventListener를 통해 추가된 모든 클릭 이벤트를 실행합니다. 따라서 요소에 addEventListener를 통해 3개의 클릭 이벤트가 있는 경우 요소를 클릭하면 모두 실행됩니다.
HTML 버튼에는 아래 코드에서 addEventListener를 통한 두 개의 클릭 이벤트가 있습니다. 버튼을 클릭하면 모든 클릭 이벤트가 실행됩니다.
결과적으로 웹 브라우저에 두 개의 JavaScript 경고 메시지가 표시됩니다.
예제 코드:
<head>
<meta charset="utf-8">
<title>2-Multiple-Events-With-addEventListener-One-with-Onclick</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 1.2em;
background-color: #ff0054;
color: #ffffff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<main id="main">
<button id="button">Default button</button><br/>
</main>
<script>
let button = document.getElementById('button');
// Also add click event via addEventListener
button.addEventListener("click", function () {
alert("Perform First click action with addEventListener");
}, false);
// Yet another click event via addEventListener
button.addEventListener("click", function () {
alert("Perform Second click action with addEventListener");
}, false);
</script>
</body>
출력:
요소에 하나의 onclick만 있을 수 있다고 언급했습니다. 그러나 둘 이상인 경우에는 어떻게 됩니까? 어떤 onclick이 실행됩니까?
여러 onclick 속성이 서로 덮어씁니다.
단일 요소에 여러 onclick이 있는 경우 마지막 항목만 작동합니다. onclick은 요소 속성이므로 요소에 하나만 존재할 수 있기 때문입니다.
따라서 웹 브라우저는 요소에 onclick을 두 개 이상 추가하는 경우에만 마지막 항목을 실행합니다.
따라서 다음 코드에서 onclick을 통해 두 개의 클릭 이벤트를 추가했습니다. 한편 웹 브라우저에서 코드를 실행하면 마지막 onclick에 대한 JavaScript 경고가 표시됩니다.
예제 코드:
<head>
<meta charset="utf-8">
<title>3-Overwrite onClick</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 1.2em;
background-color: #a03c32;
color: #ffffff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<main id="main">
<button id="button">Default button</button><br/>
</main>
<script>
let button = document.getElementById('button');
// Define a first click event with onclick
button.onclick = function () {
alert("Perform First click action with addEventListener");
}
// Define another click event with onclick.
// Meanwhile, this one overwrites the first one.
button.onclick = function () {
alert("The second onclick runs, not the first!!!");
}
</script>
</body>
출력:
Element.onclick의 문자열 값이 자동으로 실패합니다. addEventListener에서 오류 발생
<script> 요소의 onclick 함수 값이 문자열인 경우 자동으로 실패합니다. 그러나 addEventListener의 함수 대신 문자열을 제공하면 오류가 발생합니다.
다음 예에는 Say what?이라는 문자열이 있습니다. button.onclick의 값으로. 한편 Say what?이라는 동일한 문자열도 addEventListener의 함수 위치에 있습니다.
코드를 실행하면 콘솔에 TypeError가 표시됩니다. 게다가 버튼을 클릭해도 아무 일도 일어나지 않으며 오류가 전혀 발생하지 않습니다.
onclick에는 함수 대신 문자열 값이 있기 때문입니다. 한편 addEventListener는 코드를 처음 실행할 때 이미 오류를 발생시킵니다.
예제 코드:
<head>
<meta charset="utf-8">
<title>4-Onclick-does-not-respond-to-Errors</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 1.2em;
background-color: #4aa032;
color: #ffffff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<main id="main">
<button id="button">Default button</button><br/>
</main>
<script>
let button = document.getElementById('button');
// This will not throw an error.
button.onclick = "Say what?";
// This throws an error.
button.addEventListener("click", "Say what?")
</script>
</body>
출력:
‘addEventListener’는 클릭 수를 제어할 수 있게 해줍니다. ‘Onclick’은 항상 사용 가능합니다.
addEventListener는 once라는 부울 값을 허용합니다. 이 값은 수신기가 실행되는 횟수를 나타냅니다.
따라서 once를 true로 지정하면 이벤트 리스너가 처음 실행된 후 자동으로 제거됩니다. 다음 코드에서 버튼에는 onclick 및 addEventListener를 통한 클릭 이벤트가 있습니다.
한편, addEventListener에는 부울 once가 true로 설정되어 있습니다. 결과적으로 버튼을 처음 클릭하면 두 개의 JavaScript 경고 메시지가 표시됩니다.
그러나 후속 클릭은 onclick의 클릭 이벤트만 표시합니다. addEventListener가 더 이상 존재하지 않기 때문입니다.
예제 코드:
<head>
<meta charset="utf-8">
<title>5-Control-addEventListeners-onlclick-always-run</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 1.2em;
background-color: #5f32a0;
color: #ffffff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<main id="main">
<button id="button">Default button</button><br/>
</main>
<script>
let button = document.getElementById('button');
// Attach click event via onclick that'll always
// run every time you click the button.
button.onclick = function () {
alert("I always run. Click OK and click the button again.")
}
// We'll execute this function one time, with addEventListener
function sayOnce () {
alert("This is the only time you'll see me. Good Bye.");
}
// You can pass a third Boolean value to addEventListener
// This boolean value defines the number of times you
// the event listener can work on the element. Here,
// the event listener will work once.
button.addEventListener("click", sayOnce, { once: true })
</script>
</body>
출력:
‘onclick’은 메모리 누수를 일으킬 수 있습니다. 요소와 함께 addEventListener가 제거됨
onclick을 통해 클릭 이벤트가 있는 요소를 제거하면 onclick과 해당 값이 메모리에 남아 있습니다. MutationObserver의 제거된 노드 배열에서 element.onclick을 확인하여 확인합니다.
요소는 onclick이 연결된 제거된 노드입니다. 또한 이를 실행하려면 MutationObserver를 설정해야 합니다.
두 개의 HTML 버튼에는 다음 코드에서 onclick을 통한 클릭 이벤트가 있습니다. 한편 상위 버튼 제거를 클릭하면 상위 버튼이 제거됩니다.
그러나 MutationObserver를 사용하면 Parent Button의 onclick을 콘솔에 기록합니다. 이는 Parent Button을 삭제한 후에도 onclick이 여전히 존재함을 증명합니다.
<head>
<meta charset="utf-8">
<title>6-Memory-Leak-via-Onclick.html</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 1.2em;
background-color: #8832a0;
color: #ffffff;
border: none;
cursor: pointer;
margin-top: 0.2em;
}
</style>
</head>
<body>
<main id="main">
<button id="parent_button">Parent Button</button><br/>
<button id="remove_parent_button">Remove Parent Button</button>
</main>
<script>
let main = document.getElementById('main');
let parent_button = document.getElementById('parent_button');
let remove_parent_button = document.getElementById('remove_parent_button');
// Add a function via onclick
parent_button.onclick = function amIleaking() {
alert("This onclick function exist after the Parent button dies. \n Remove the Parent button, and Check the console!.");
}
// Setup a mutation observer to observe changes
// in the DOM.
const observer = new MutationObserver(function(mutations_list) {
mutations_list.forEach(function(mutation) {
mutation.removedNodes.forEach(function(removed_node) {
if (removed_node.id === 'parent_button') {
console.log('#parent_button has been removed');
observer.disconnect();
}
// Even after removal, the onclick function
// is available in the removedNodes. Here, [0]
// represents the first element of the removed
// node, which the parent_button.
console.log(mutation.removedNodes[0].onclick);
/*To see the function details in Firefox
console.log(mutation.removedNodes[0].onclick.toString());*/
});
});
});
// Observe changes in the main element. Meanwhile,
// the main element consists of the parent button
// and the button that removes it.
observer.observe(document.querySelector("#main"), { subtree: false, childList: true });
// Setup onclick to remove the parent button
remove_parent_button.onclick = function () {
document.querySelector("#parent_button").remove();
}
</script>
</body>
출력:
addEventListener는 IE<9에서 작동하지 않습니다. ‘onclick’은 IE<9에서 작동합니다.
IE<9를 지원하려는 경우 addEventListener가 작동하지 않습니다. IE<9가 비표준 attachEvent를 지원하기 때문입니다.
그럼에도 불구하고 IE<9를 지원하려면 유틸리티 함수를 작성할 수 있습니다. 이 기능은 웹 브라우저가 attachEvent 또는 addEventListener를 지원하는지 확인합니다.
따라서 브라우저가 attachEvent를 지원하는 경우 attachEvent를 사용합니다. 그렇지 않으면 addEventListener를 사용합니다. 한편, IE<9에서 항상 onclick을 사용하여 작업할 수 있습니다.
따라서 IE<9를 지원하려면 다음 코드를 사용할 수 있습니다.
예제 코드:
// Define an addEvent function and check if
// the element supports attachEvent. Otherwise
// we use addEventListner.
function add_event(element, evnt, funct) {
if (element.attachEvent) { // element supports attachEvent
return element.attachEvent('on' + evnt, funct);
} else { // Element does not support attachEvent
// Use addEventListnere instead
return element.addEventListener(evnt, funct, false);
}
}
// How you can use it
add_event(document.getElementById('HTMLElement'), 'click', function() {
alert('Hello World!');
});
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn