mouse and keyboard event 예
마우스 이벤트
click 마우스 버튼 클릭시 발생dblclick 마우스 버튼 더블클릭시 발생
mousedown 마우스 버튼을 눌렀을 때 발생
mouseup 마우스 버튼을 눌렀다 뗐을 때 발생
mouseover 마우스 커서를 올려놓았을 때 발생
mouseout 마우스 커서를 올려놓았다가 밖으로 나갈 때 발생
mousemove 마우스 커서를 움직일 때 발생
키보드 이벤트
keydown 키보드가 눌려있을 때 발생
keyup 키보드가 눌려있다가 떼는 순간 발생
keypress 키보다가 눌리는 순간 발생
HTML 이벤트load 페이지를 전부 다 읽어들인 후에 발생
unload 페이지로부터 빠져나갈 때 발생
abort 페이지를 읽다가 사용자의 중지 요청에 의해 중단되는 경우 발생
error 페이지를 읽다가 오류에 의해 중단되는 경우 발생
select 텍스트박스에서 사용자가 특정 문자나 문자열을 선택했을 때 발생
change 텍스트박스의 값이 변경되는 경우 발생
submit FORM에서의 submit 버튼이 클릭되는 경우 발생
reset FORM에서의 reset 버튼이 클릭되는 경우 발생
resize 윈도우(window)나 프레임(frame) 크기가 변경되는 경우 발생
scroll 스크롤바가 스크롤되는 경우 발생
focus 특정 객체(element)에 포커스가 주어지는 경우 발생
blur 특정 객체(element)에 포커스가 있다가 사라지는 경우 발생
$(document).ready() => 문서가 로드되고나서 발생하는 이벤트 입니다.
팁
jQuery를 사용하기 위해서 $ 딸라 표시를 사용합니다.. 미국에서 만든거라 그런지 달라를 좋아합니다..ㅡㅡ;
그 런데.. 다른 자바스크립트 라이브러리에서도 $ 표시를 사용하는 곳이 있습니다.. 대표적인것이.. Prototype 입니다. jQuery가 뜨기전에는.. Prototype이 대빵이었는데.. 제가알기론... 요즘은.. jQuery가 대빵인것 같습니다..
본론으로 .. 두개가 같은 $ 기호를 쓰기때문에 충돌이 발생할 수 있습니다. 이럴때를 대비해서 jQuery에서 $ 표시를 대체할 수 있는 방법을 만들어 두었습니다...
var jq=jQuery.noConflict()
그 런데.. 다른 자바스크립트 라이브러리에서도 $ 표시를 사용하는 곳이 있습니다.. 대표적인것이.. Prototype 입니다. jQuery가 뜨기전에는.. Prototype이 대빵이었는데.. 제가알기론... 요즘은.. jQuery가 대빵인것 같습니다..
본론으로 .. 두개가 같은 $ 기호를 쓰기때문에 충돌이 발생할 수 있습니다. 이럴때를 대비해서 jQuery에서 $ 표시를 대체할 수 있는 방법을 만들어 두었습니다...
var jq=jQuery.noConflict()
요렇게 정의를 하면.. $ 표시를 안쓰고 jq('p').hide() 이렇게 쓸수 있습니다. jq는 사용자가 원하는 것으로 바꿔도 되겠죠?...
(document).ready(function) The ready event of a document
*
(selector).click(function)The click event of selected elements
(selector).dblclick(function)The double click event of selected elements
(selector).focus(function)The focus event of selected elements
(selector).mouseover(function)The mouse over event of selected elements
(selector).html(content)Changes the (inner) HTML of selected elements
(selector).append(content)Appends content to the (inner) HTML of selected elements(selector).prepend(content)"Prepends" content to the (inner) HTML of selected elements(selector).after(content)Adds HTML after selected elements(selector).before(content)Adds
HTML before selected elements
$("p.class).html("바꾸고자 하는 내용");
$("p#id").html("바꾸고자 하는 내용");
p.demo = <html>
<body>
<p class="class">Demo Text</p>
<p id="id">Demo Text </p>
</body>
</html>
ex) $("p.class).html("바꾸고자 하는 내용"); 실행하면
(Result) Demo Text <= '바꾸고자 하는 내용' 으로 바뀜
$("p.class").append("추가 하는 내용");
(Result) Demo Text 추가 하는 내용
$("p.class").before("이전에 추가");
(Result) 이전에 추가 Demo Text 추가 하는 내용
댓글
댓글 쓰기
질문이나 의견은 요기에 남겨주세요 ^^,,