javaScript - html의 event, this 활용하기

html 태그에서 해당 태그의 정보나 이벤트를 추출하여 js에서 사용할 수 있게 하려면,

html에서 태그의 정보나 이벤트를 넘겨주어여합니다.

 

<input type="text" onchange="testEvent(event, this)">

 

input 태그의 이벤트와 태그 정보를 넘기기 위해 바인딩된 함수에 event와 this 키워드를 사용합니다.

 

function testEvent($event, $element) {
    var strLength = $event.target.value.length;
    if(strLength > 40) {
        $event.target.value = $event.target.value.substring(0, 40);
    }

    if($event.keyCode == 13 || $event.code == "Enter") {
        ...
    }
}

event와 this를 각각 $even와 $this로 받아 console.log 를 출력하시면,

해당 값들의 세부 내역을 확인할 수 있습니다.

그러한 값들을 이용하여 js에서 여러 방식으로 활용가능합니다.

 

만약 다른 프레임워크를 사용한다면 html에서 정보와 이벤트를 추출하는 방식이 다를 수도 있으니 참고하길 바랍니다.

angularJS 에서는 ng-click="test(event, this)" 의 결과값이 전혀 달랐습니다.

event는 null이고 this는 해당 페이지의 angularJS 전체를 가리키고 있었습니다.