[ajax] [jquery 기초] 이벤트 처리
로빈아빠
본문
다운로드 : http://docs.jquery.com/Downloading_jQuery 이곳에서 최신버젼(1.2.6)을 다운로드 받아 소스에 추가한다.
1. HMTL로드시 수행하는 코드
(1)자바스크립트
window.onload = function(){
alert("시작");
}
(2)jQuery
$(document).ready(function(){
alert("시작");
});
2. 객체 클릭시 이벤트 발생(a태그를 클릭했을시 해당 스크립트가 동작한다.)
(1)자바스크립트
<html>
<head>
<script type="text/javascript" src="D:/Util/jquery/jquery.js"></script>
<script type="text/javascript">
window.onload = setObjects;
function setObjects(){
var aTag = document.getElementsByTagName("a")[0];
aTag.onclick = function(){
alert("welcome");
//이벤트 발생을 막는 부분이다.
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
//이벤트 발생 막는 부분 끝
}
}
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
(2)jQuery
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting");
event.preventdefault();
//event는 해당 태그의 이벤트를 넘겨받고 preventdefault()를 적용하면 해당이벤트는 동작하지 않는다.
//고로 링크된 페이지로 이동하지 않는다.
});
});
1. HMTL로드시 수행하는 코드
(1)자바스크립트
window.onload = function(){
alert("시작");
}
(2)jQuery
$(document).ready(function(){
alert("시작");
});
2. 객체 클릭시 이벤트 발생(a태그를 클릭했을시 해당 스크립트가 동작한다.)
(1)자바스크립트
<html>
<head>
<script type="text/javascript" src="D:/Util/jquery/jquery.js"></script>
<script type="text/javascript">
window.onload = setObjects;
function setObjects(){
var aTag = document.getElementsByTagName("a")[0];
aTag.onclick = function(){
alert("welcome");
//이벤트 발생을 막는 부분이다.
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
//이벤트 발생 막는 부분 끝
}
}
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
(2)jQuery
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting");
event.preventdefault();
//event는 해당 태그의 이벤트를 넘겨받고 preventdefault()를 적용하면 해당이벤트는 동작하지 않는다.
//고로 링크된 페이지로 이동하지 않는다.
});
});
관련링크
댓글목록
등록된 댓글이 없습니다.