반응형

EVENT 2

[JavaScript] 이벤트 생성 및 트리거 하기

오늘은 이벤트 생성하여 트리거 하는 방법에 대해 알아보도록 하겠습니다. 일반적으로 이벤트는 브라우저가 알아서 처리를 해주는 구조입니다. 예를 들어, 개발자가 Div에 Click 이벤트를 추가했다면, 브라우저가 해당 Div가 Click 된 것을 감지하여 Click 이벤트 핸들러를 호출해주는 구조입니다. 그렇다면, 실제로 Click이 발생하지 않았지만, 이벤트 핸들러를 호출하고 싶다면 어떻게 해야할까요? 그 방법에 대해 알아보겠습니다. 제가 JSFiddle을 이용해 샘플을 만들어보았습니다. Div와 Button이 하나씩 있습니다. Div에는 Click 이벤트를 등록해 놓았고, Div가 Click되면 'Clicked Div!'라는 메세지를 포함한 Alert창이 출력됩니다. Button에는 onclick으로 o..

JavaScript 2020.05.25

[JavaScript] 마우스 왼쪽/오른쪽 클릭 판단하기

마우스 이벤트를 이용하여 개발을 하다보면 마우스 왼쪽 클릭인지 오른쪽 클릭인지 구분해서 개발해야할 때가 있습니다. 일반적으로 mousedown 이벤트를 추가하면 왼쪽 클릭을 해도 호출되고 오른쪽 클릭을 해도 호출이 되기 때문입니다. 오른쪽 클릭의 경우엔 mousedown 이벤트도 호출되고 메뉴바까지 나오게 됩니다.그렇다면, 마우스 왼쪽 클릭인지 오른쪽 클릭인지 판단하기 위해서는 어떻게 해야할까요? 아래 JSFiddle 샘플을 준비했습니다. 빨간색 Div를 왼쪽 마우스로 클릭하면 "Right mouse button was not clicked" 라는 alert이 뜨고 오른쪽 마우스로 클릭하면 "Right mouse button clicked" 라는 alert 창이 뜨는 것을 확인할 수 있습니다. mouse..

JavaScript 2020.04.23
반응형