221229 JS 인라인 이벤트 모델

주영재 2022. 12. 29. 12:29

인라인 이벤트 모델

태그 자체에 이벤트 속성을 이용.
onclick같은 이벤트 안에는 모든 스크립트코드가 들어갈 수 있음

ex)

<button onclick="console.log('출력');">

ex)호이스팅을 사용하기 위해 선언적함수 사용. 익명함수 불가

<button onclick="check();">인라인이벤트</button>

<script>
	function check(){
		alert("인라인이벤트");
	}
</script>

1.onclick은 일반적으로 가장 많이 사용되는 이벤트.
2.동일한 함수에 여러 이벤트를 걸어줄 수 있다.
3.어떤 이벤트에 대한 동작인지 확인하는 키워드는 this

<!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>Document</title>
</head>

<body>

    <button onclick="aaa();">인라인이벤트</button>

    <button onclick="bbb(this);">1</button>
    <button onclick="bbb(this);">2</button>
    <button onclick="bbb(this);">3</button>


    <script>
        //인라인이벤트-함수의 선언은 script에 하고, 태그에서 연결
        function aaa() {
            alert(1);
        }

        function bbb(a){
            //this가 태그에서 사용되면 태그 자기 자신을 가르킵니다.
            //console.log(a);//a는 태그 자신
            a.innerHTML='hello';//어느 버튼을 클릭했는지 식별
            
        }


    </script>


</body>

</html>