<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
</style>
</head>
<body>
<button type="button" id="my-button-id">button</button>
</body>
<script>
const myButton = document.getElementById('my-button-id');
const someString = 'Data';
myButton.addEventListener('click', function () {
console.log(this); // 예상 값: 'Data'
}.bind(someString));
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
</style>
</head>
<body>
<button type="button" id="my-button-id">button</button>
</body>
<script>
const myButton = document.getElementById('my-button-id');
const someObject = {aProperty: 'Data'};
myButton.addEventListener('click', function() {
console.log(someObject.aProperty); // 예상 값: 'Data'
someObject.aProperty = 'Data Again'; // 값 변경
});
window.setInterval(function() {
if (someObject.aProperty === 'Data Again') {
console.log('Data Again: True');
someObject.aProperty = 'Data'; // 다음 이벤트 실행을 기다리기 위해 값 초기화
}
}, 5000);
</script>
</html>
ㅁㅔ모리를 낭비 안하고 이벤트수신기를 넣는법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
</style>
</head>
<body>
<button type="button" id="my-button-id">button</button>
</body>
<script>
const els = document.getElementsByTagName('*');
// 상황 1
for(let i=0 ; i < els.length; i++){
els[i].addEventListener("click", function(e){/*do something*/}, false);
}
// 상황 2
function processEvent(e){
/* do something */
}
for(let i=0 ; i < els.length; i++){
els[i].addEventListener("click", processEvent, false);
}
</script>
</html>
댓글 영역