[javascript] 마우스 관련 이벤트 / 마우스 좌표

[javascript] 마우스 관련 이벤트 / 마우스 좌표

---

✔️ 마우스 관련 이벤트

: 마우스와 사용자가 상호 작용하여 발생하는 이벤트를 나타낸다.

 

 

👩‍💻 인라인에서 마우스 관련 이벤트

onmouseover : 마우스가 영역 안으로 들어왔을 때 실행되는 이벤트

onmouseout : 마우스가 영역 밖으로 나갔을 때 실행되는 이벤트

<div class="box" onmouseover="this.style.background='#ffff00';"
	onmouseout="this.style.background='';"></div>

 

👩‍💻 마우스 버튼 이벤트

document.addEventListener("mousedown", function(e){
	if(e.button===2 || e.button === 3){
		alert('우측 누르면 혼난다..');
	}
});

 

✔️ 마우스 좌표

const objBox = document.querySelector("#resultLayout");

objBox.addEventListener("click", function(e){
	let x = e.clientX; //document의 가장 왼쪽 지점부터 x(스크롤바 제외)
	let y = e.clientY;

	let x1 = e.pageX; //clientX 와 동일하지만 스크롤바가 이동된 것 만큼 포함
	let y1 = e.pageY; 

	let x2 = e.offsetX; //이벤트가 발생된 객체 내에서의 x좌표
	let y2 = e.offsetY; 
	
	let x3 = e.screenX; //화면 가장 왼쪽 위 기준 x좌표
	let y3 = e.screenY; 
	
	let s;
	s = "client - x: " + x + ", y:" + y + "<br>";
	s += "page - x: " + x1 + ", y:" + y1 + "<br>";
	s += "offset - x: " + x2 + ", y:" + y2 + "<br>";
	s += "screen - x: " + x3 + ", y:" + y3 + "<br>";
	
	objBox.innerHTML = s;
	
	
});

 

✔️ 마우스 클릭

const box = document.querySelector(".box");

box.addEventListener("click", (e)=> {
	//e.ctrlKey , e.shiftKey, e.ctrlKey && e.shiftKey
	if(e.ctrlKey){
		alert("click+Ctrl")
	}
});