상세 컨텐츠

본문 제목

[자바스크립트] 함수에 선택적으로 this.를 전해넣는다.

카테고리 없음

by esoesmio 2023. 5. 19. 18:34

본문

<!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>

 

댓글 영역