Javascript & JQuery & CSS

Event Handler?

버튼을 누르거나, Text에 글자를 쳐 넣거나, 브라우저가 새로운 문서를 읽어 들이거나, 브라우저를 닫거나 하는 것들이 바로 이벤트인 것이다. 

초기에 웹 환경, 정확히 말하자면, HTML에서는 이러한 것이 없었다.

그래서, 사용자의 입력에 반응하지 못함에 따라 웹 서버와 네트워크에 부하를 주었던 것이다.

그러한 문제 때문에 자바스크립트가 추가되면서 이러한 문제점을 줄여주었던 것이다.  

자바스크립트를 HTML문장에 사용할 수 있게 되면서, 사용자의 행동에 따라 적절한 조치를 취할 수 있게 됨에 따라 HTML 문서의 내용만을 단순히 보여주는

브라우저환경을 벗어날 수 있게 된 것이다.  즉, 자바스크립트가 이벤트를 처리(Handle)하게 됨에 따라 HTML문서가 보다 동적인(Dynamic) 페이지가 될 수 있었다.

대부분 이벤트가 발생하면, 이 이벤트를 처리(Handle)할 수 있는 함수를 만들어서 해당 이벤트에 대응하게 하는데,

이렇게 이벤트와 처리함수를 묶어주는 것을 이벤트 핸들러(Event Handler)라고 부른다. 

다음은 Jquery 에서 사용하는 이벤트의 종류와 그에 대한 설명이다.

 

Method	Description
bind()	Attaches event handlers to elements
blur()	Attaches/Triggers the blur event
change()	<input />, <textarea />, <select /> 요소의 값이 변경 되엇을 때
click()	마우스를 클릭 했을 경우
dblclick()	마우스를 더블클릭 했을 경우
delegate()	Attaches a handler to current, or future, specified child elements of the matching elements
die()	Removed in version 1.9. Removes all event handlers added with the live() method
error()	Deprecated in version 1.8. Attaches/Triggers the error event
event.currentTarget	The current DOM element within the event bubbling phase
event.data	Contains the optional data passed to an event method when the current executing handler is bound
event.delegateTarget	Returns the element where the currently-called jQuery event handler was attached
event.isDefaultPrevented()	Returns whether event.preventDefault() was called for the event object
event.isImmediatePropagationStopped()	Returns whether event.stopImmediatePropagation() was called for the event object
event.isPropagationStopped()	Returns whether event.stopPropagation() was called for the event object
event.namespace	Returns the namespace specified when the event was triggered
event.pageX	Returns the mouse position relative to the left edge of the document
event.pageY	Returns the mouse position relative to the top edge of the document
event.preventDefault()	Prevents the default action of the event
event.relatedTarget	Returns which element being entered or exited on mouse movement.
event.result	Contains the last/previous value returned by an event handler triggered by the specified event
event.stopImmediatePropagation()	Prevents other event handlers from being called
event.stopPropagation()	Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event
event.target	Returns which DOM element triggered the event
event.timeStamp	Returns the number of milliseconds since January 1, 1970, when the event is triggered
event.type	Returns which event type was triggered
event.which	Returns which keyboard key or mouse button was pressed for the event
focus()	요소에 포커스 되었을때
focusin()	Attaches an event handler to the focusin event
focusout()	Attaches an event handler to the focusout event
hover()	마우스가 요소 위에 위치 했을 때
keydown()	키 입력 시, 모든 키에 대해 적용
keypress()	키 입력시 발생 (enter, tabemd의 특수키 제외)
keyup()	키 입력 후 발생
live()	Removed in version 1.9. Adds one or more event handlers to current, or future, selected elements
load()	Deprecated in version 1.8. Attaches an event handler to the load event
mousedown()	마우스 버튼을 누른 순간
mouseenter()	선택한 요소의 영역에 마우스가 위치 했을 경우
mouseleave()	선택한 요소의 영역에서 마우스가 벗어 났을 경우
mousemove()	마우스가 이동할 경우 발생되는 이벤트
mouseout()	선택한 요소의 영역에서 마우스가 벗어 났을 경우
mouseover()	Attaches/Triggers the mouseover event
mouseup()	마우스 버튼을 놓는 순간 발생되는 이벤트
off()	Removes event handlers attached with the on() method
on()	Attaches event handlers to elements
one()	Adds one or more event handlers to selected elements. This handler can only be triggered once per element
$.proxy()	Takes an existing function and returns a new one with a particular context
ready()	DOM이 모두 준비 되었을 때
resize()	Resize 될 때
scroll()	HTML 문서나 요소가 스크롤 되었을 때
select()	선택한 개체를 마우스를 통해 선택 하였을 때
submit()	submit 이 일어날 때
toggle()	Removed in version 1.9. Attaches two or more functions to toggle between for the click event
trigger()	Triggers all events bound to the selected elements
triggerHandler()	Triggers all functions bound to a specified event for the selected elements
unbind()	Removes an added event handler from selected elements
undelegate()	Removes an event handler to selected elements, now or in the future
unload()	Deprecated in version 1.8. Attaches an event handler to the unload event