[javascript] 함수의 인자로 event를 받을때 질문
조회수 7965회
안녕하세요. 아래의 링크는 제가 만든 계산기 코드인데요.
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; }로 작성해주어야 하더라구요.
감사합니다!
-
(•́ ✖ •̀)
알 수 없는 사용자
2 답변
-
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라고 이름을 지어주는것 뿐이죠. -
event 만 매개변수로 받을 경우
<button id="myBtn" onclick="handleClick(e)">1</button>function handleClick(e) { console.log(e.target.tagName); // BUTTON } var btn = document.getElementById('myBtn'); btn.onclick = handleClick;event 객체 외 추가 변수를 매개변수로 받을 경우 받는 event 변수명은 event로 정확히 짚어줘야하는 듯
<button id="myBtn" onclick="handleClick(event, value)">1</button>function handleClick(e,value) { console.log(e.target.tagName); // BUTTON } var btn = document.getElementById('myBtn'); btn.onclick = handleClick;
댓글 입력