[javascript] 함수의 인자로 event를 받을때 질문

조회수 55회

안녕하세요. 아래의 링크는 제가 만든 계산기 코드인데요.

계산기 소스코드

html : <button id="1" onclick="input.getStr()">1</button>

JS : input.getStr = function() { var str = event.target.id; }

input.getStr 함수는 계산기의 숫자를 클릭했을때 클릭한 숫자를 입력받는 함수인데요. function(event){}로 선언하지 않았는데도 event.target을 가져오더라구요

질문1) 아래와같이 함수의 인자로 이벤트객체를 넣어주지 않을때에도 input.getStr = function() { var str = event.target.id; } 이벤트 핸들러에 매개변수로 event객체가 전달되는것인가요? (그렇지 않으면 event.target 에 값이 들어올 수 없기떄문에 event객체는 항상 전달되는것같습니다.)

질문2) parameter로 event를 넣었을때와 안넣었을때의 차이가 있는지 여쭤보고싶습니다. <button onclick="input.getStr(event)">1</button>로 작성할때는 input.getStr = function(event) { var str = event.target.id; }로 작성해주어야 하더라구요.

감사합니다!

1 답변

  • 좋아요

    3

    싫어요
    채택 취소하기

    GlobalEventHandlers.onclick() 같은 이벤트 핸들러 함수를 사용할 때 함수 선언부에 아무런 매개변수가 없어도 함수 내부에서 event 변수를 사용할 수 있는 몇몇 '브라우저'가 있습니다. 브라우저마다 차이가 있는 비표준이기 때문에 이 방법은 권장하지 않습니다.


    보충 설명:

    <button id="myBtn" onclick="handleClick(e)">1</button>
    

    위의 onclick 속성을 풀어서 보면 아래와 같습니다.

    function handleClick(e) {
       console.log(e.target.tagName); // BUTTON
    }
    
    var btn = document.getElementById('myBtn');
    btn.onclick = handleClick;
    

    클릭 이벤트가 발생하면 구현체(여기서는 브라우저가 되겠죠?)에 의해, 버튼 태그의 onclick 프로퍼티에 할당된 함수가 실행됩니다. 이 때 유일한 매개변수로 Event 객체가 전달됩니다. 그 객체를 우리가, 이 예시에서는 e라고 이름을 지어주는것 뿐이죠.

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.