[JavaScript] 이벤트 onclick

이벤트(event)

이벤트(event)

"마우스 버튼을 클릭하는 경우", "키보드를 누르는 경우" 등 어떤 특정한 사건이나 동작을 의미.

 

이벤트 핸들러(event handler)

이벤트가 발생 할 때 마다 적당한 처리가 이루어지기 위해 이벤트 핸들러가 필요하다. 이벤트에 대응하는 처리 내용을 이벤트 핸들러로 작성하고 등록하면 이벤트가 발생 시 자동으로 등록 된 이벤트 핸들러가 수행된다.

이벤트 이름 앞에 on을 붙여 표기하며, HTML 태그의 한 속성으로 사용된다.

형식 : <태그 속성="값" onclick="이벤트 핸들링을 위한 코드(JS코드)"

 

사용 방법 : 주야간모드 선택 버튼 만들기

    <input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor = 'black';
    ">

 1. 제어 할 태그 선택 : JS코드(이벤트 핸들러)에서 CSS선택자를 이용해서 제어 할 선택자 선택.

document.querySelector('선택자');

'javascript select tag by css selector' 검색하면 더 많은 선택자를 알 수 있다.

​

2. CSS 속성인 style을 JS코드에 넣기.

제어 할 태그.style

'javascript element style' 검색하면 더 많은 요소 스타일을 알 수 있다.

 

​

3. style 속성='속성값' JS코드에 넣기

제어 할 태그.style.backgroundColor = '색';

'javascript style 원하는 속성(background color)' 검색하면 더 많은 스타일 속성과 속성값을 알 수 있다.

​

    <input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
    ">
    <input type="button" value="day" onclick="
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    ">