Javascript 마우스 이벤트

티스토리 뷰

Javascript

seop8044 2022. 2. 24. 13:15

mouseover메서드와 mouseenter메서드, mouseout메서드와 mouseleave의 차이점으로는 자식 요소들까지 영향을 주느냐 안 주느냐의 차이 입니다. 깊이의 차이라고 할 수 있습니다.

마우스가 올라가지는 영역이 지정된 요소 혹은 자신에게만 한정되게 할 것인지, 아니면 자식요소들까지 영역을 확장할 것인지에 대한 차이라고 이해하시면 좋을 것 같습니다.

mouseover와 mouseoout은 마우스 이동할때마다 이벤트 발생 하는 반면, mouseenter와 mouseleave는 이벤트 영역을 진입 혹은 벗어났을때만 이벤트를 발생 합니다.

move your mouse

지정된 태그 요소(혹은 자신)는 물론이며, 자식 요소가 있다면 해당 자식요소의 영역까지 포함됩니다.

지정된 태그 요소(혹은 자신)의 영역에만 해당되며, 만약 자식요소가 있다면 해당 자식요소의 영역은 제외됩니다.

이벤트 명	발생시기
mouseover	DOM과 *하위DOM* 에 마우스를 올리면 발생
mouseout	DOM과 *하위DOM*에서 다른 DOM으로 마우스가 이동될때 발생합니다.
mouseenter	이벤트가 걸려있는 DOM에서만 mouseover가 발생합니다.(하위DOM은 이벤트가 발생하지 않음)
mouseleave	이벤트가 걸려있는 DOM에서만 mouseout이벤트가 발생합니다.(하위DOM은 이벤트가 발생하지 않음)
mousemove	DOM에서 마우스아 움직일때 발생합니다.
mousedown	DOM에서 마우스가 눌려졌을때 발생합니다.
mouseup	DOM에서 마우스를 눌렀다가 눌렀다가 땟을때 발생합니다.
click	mousedown이벤트와 mouseup이벤트가 종료가 되면 발생합니다.
dblclick	마우스를 더블클릭하면 발생합니다.
wheel	마우스의 휠을 내리면 발생합니다.