상세 컨텐츠

본문 제목

[JavaScript] 자바스크립트 이벤트 종류와 이벤트리스너 마우스 움직임, 오른쪽 왼쪽 버튼 이벤트 등등 관련

WEB/JavaScript

by AlrepondTech 2017. 11. 23. 18:13

본문

반응형
728x170

 

 

 

=================================

=================================

=================================

 

 

 

 

 

 

출처: http://mcatcher3.cafe24.com/js-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%A2%85%EB%A5%98%EC%99%80-%EC%9D%B4%EB%B2%A4%ED%8A%B8%EB%A6%AC%EC%8A%A4%EB%84%88/

 

(1) 자바스크립트 이벤트리스너

  • 표준브라우저와 IE의 이벤트리스너는 다르기 때문에 크로스브라우징을 고려해야한다.
  • 표준브라우저와 IE11은 addEventListener()메소드, IE10 ~ IE9는 addEventListener(), attachEvent()둘다 지원한다. 
    IE8이하는 attachEvent()메소드를 사용한다.

① 표준브라우저에서 이벤트리스너

아래는 이벤트 실행시, 정의된 함수를 실행하는 코드 – 첫번째 매개변수는 이벤트, 두번째 매개변수는 함수

아래는 이벤트 실행시, 익명함수를 실행하는 코드 – 첫번째 매개변수는 이벤트, 두번째 매개변수는 실행될 익명함수

② IE8이하에서 이벤트리스너

아래는 이벤트 실행시, 정의된 함수를 실행하는 코드 – 첫번째 매개변수는 이벤트, 두번째 매개변수는 함수 IE는 이벤트앞에 on을 붙여줘야한다.

아래는 이벤트 실행시, 익명함수를 실행하는 코드 – 첫번째 매개변수는 이벤트, 두번째 매개변수는 실행될 익명함수

③ 크로스브라우징 방법

표준브라우저와 IE는 이벤트리스너 메소드가 다르기 때문에 크로스브라우징 코드가 필요하다. 간단하게 if문으로 해당 메소드가 있는지 확인하여 브라우저별로 분기를 하는 방법이다.

아래는 이벤트 실행시, 정의된 함수를 실행하는 크로스브라우징 코드

아래는 이벤트 실행시, 익명함수를 실행하는 크로스브라우징 코드

(2) 자바스크립트 이벤트 종류

자주 사용하는 자바스크립트 이벤트 종류에 대해 정리해봤다.

  • click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다.
  • mouseover – 마우스를 HTML요소 위에 올리면 발생한다.
  • mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다.
  • mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다.
  • mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다.
  • mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
  • focus – HTML요소에 포커스가 갔을때 발생한다.
  • blur – HTML요소가 포커스에서 벗어났을때 발생한다.
  • keypress – 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다.
  • keydown – 키를 누를 때 발생한다.
  • keyup – 키를 눌렀다가 떼는 순간에 발생한다.
  • load – 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생한다.
  • resize – 브라우저 창의 크기를 조절할때 발생한다.
  • scroll – 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생한다. 페이지에 스크롤바가 없다면 이벤트는 발생하지 않다.
  • unload – 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.
  • change – 폼 필드의 상태가 변경되었을 때 발생한다. 라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들수 있다.

 

=================================

=================================

=================================

 

 

 

 

반응형

 

728x90

 

 

 

출처: http://blog.naver.com/PostView.nhn?blogId=qbxlvnf11&logNo=220877806711&parentCategoryNo=&categoryNo=24&viewDate=&isShowPopularPosts=true&from=search

 

 

(파일이 첨부되어 있습니다.)

 

Event(사건)의 수학적인 사전적 정의는 '어떤 실험이나 시행()에서 일어날 수 있는 결과를 들어 주사위를 던질 1이 나온다든가짝수가 나온다든가, 4 이상이 나온다든가 하는 따위이다.'(출처: 네이버 사전)입니다.

 

프로그래밍 언어에서 말하는 event도 이와 유사합니다.

즉, event란 '사용자가 어떤 결과를 유발시킬만한 행동을 하는 것'입니다.

예를 들면, 사용자가 특정 버튼을 클릭(이벤트 발생)하면 경고창을 뜨게 한다던가, 페이지를 넘긴다던가와 같은 경우가 이벤트를 활용하는 경우입니다.

 

자바스크립트에서는 특정 이벤트가 발생했을 시 특정 함수를 실행할 수 있게 해주는 addEventListener라는 기능이 존재합니다.

 

▶ addEventListener 등으로 등록할 수 있는 이벤트 중 자주 쓰이는 이벤트 목록

 

이벤트 명 설명 
 change 변동이 있을 때 발생 
click 클릭시 발생 
 focus  포커스를 얻었을 때 발생
 keydown 키를 눌렀을 때 발생 
keyup 키에서 손을 땟을 때 발생 
 load 로드가 완료 되었을 때 발생 
 mousedown  마우스를 클릭 했을 때 발생
 mouseout 마우스가 특정 객체 밖으로 나갔을 때 발생 
 mouseover 마우스가 특정 객체 위로 올려졌을 때 발생 
 mousemove 마우스가 움직였을 때 발생 
 mouseup 마우스에서 손을 땟을 때 발생 
 select option 태그 등에서 선택을 햇을 때 발생 

 

▶ addEventListener / removeEventListener

 addEventListener가 특정 이벤트 발생 시 특정 함수를 실행시킨다면, removeEventListener는 등록된 이벤트리스너를 지우는 역할을 합니다.

 

- 사용법

● addEventListener 

var st = document.getElementById("stalker"); st.addEventListener('이벤트종류''함수이름');

 

● addEventListener

(이벤트리스너가 등록된 후)st.removeEventListener('이벤트종류''함수이름');

 

- 예제

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
<head>
    <title>addEventListener,removeEventListener</title>
    <script type="text/javascript">
        var color1;
        var color2;
        var btnExample;
 
        window.onload = function () {
            color1 = document.getElementById("green");
            color2 = document.getElementById("red");
            btnExample = document.getElementById("btnExample");
            color1.addEventListener("mouseover", changecolor);
            color2.addEventListener("mouseover", changecolor2);
            btnExample.addEventListener("click", btnExampleClickHandler);
        }
        function changecolor(){
            s1.style.color = 'green';
        }
        function changecolor2() {
            s1.style.color = 'red';
        }
        function btnExampleClickHandler() {
            alert("메세지입니다. 저는 다시는 보이지 않습니다.");
            btnExample.removeEventListener("click", btnExampleClickHandler);
        }
    </script>
</head>
<body>
    <h1 id="s1">change color</h1><br />
    마우스만 올려도 색깔 바뀌는 버튼: <button id="green">green</button> <button id="red">red</button><br />
    <button id="btnExample">한번만 메세지 띄우는 버튼</button>
</body>
</html>
 

 

 

 

 

=================================

=================================

=================================

 

 

 

 

출처: http://blog.naver.com/PostView.nhn?blogId=greefin&logNo=70098292665
onclick으로 보통 처리 하는데 onclick 대신 onmousedown이나 onmouseup을 사용하고 event의 button속성값으로 구분하여 처리

 


function Mymouse() {
  var btn=event.button;
  if (btn==1) {
    alert("left");
  } else if(btn==2) {
    alert("right");
  }
}

onmousedown="Mymouse()">링크

 

 

 

 

 

 

=================================

=================================

=================================

 

 

 

 

출처: https://stackoverflow.com/questions/2405771/is-right-click-a-javascript-event

 

Easiest way to get right click done is using

 $('classx').on('contextmenu', function (event) {   });

However this is not cross browser solution, browsers behave differently for this event especially firefox and IE. I would recommend below for a cross browser solution

$('classx').on('mousedown', function (event) {     var keycode = ( event.keyCode ? event.keyCode : event.which );     if (keycode === 3) {        //your right click code goes here           } });
shareimprove this answer

 

 

=================================

=================================

=================================

 

 

 

출처: https://stackoverflow.com/questions/11925358/javascript-left-and-right-click-function

 

 

 

12down voteaccepted
You want to use the e.button property to check which mouse event was called. The value for the left mouse button being clicked is different in IE. Your code would look like this:
var left, right; left = mie ? 1 : 0; right = 2; document.body.addEventListener('mousedown', function (e){ if(e.button === left){ Player1.isLeftClick = true; } else if(e.button === right){ Player1.isRightClick = true; } }, false); document.body.addEventListener('mouseup', function (e){ if(e.button === left){ Player1.isLeftClick = false; } else if(e.button === right){ Player1.isRightClick = false; } }, false);
Demo
 

 

 

 

 

=================================

=================================

=================================

 

 

 

출처: https://www.w3schools.com/jsref/event_button.asp

 

 

Technical Details

Return Value: A Number, representing which mouse button that was pressed when the mouse event occured.

Possible values:
  • 0 : Left mouse button
  • 1 : Wheel button or middle button (if present)
  • 2 : Right mouse button
Note: Internet Explorer 8 and earlier has different return values:
  • 1 : Left mouse button
  • 2 : Right mouse button
  • 4 : Wheel button or middle button (if present)
Note: For a left-hand configured mouse, the return values are reversed
DOM Version: DOM Level 2 Events

 

 

=================================

=================================

=================================

 

 

 

반응형
그리드형


관련글 더보기

댓글 영역