<jQuery> 3. Event
by BFine1.Event Basic
문법: $("selector").EventName(function=Event Handler(){ contents } )
<script>
$(document).ready(function () {
$("button").click(function () {
console.log("Hello");
})
});
</script>
</head>
<body>
<div>Hello World!</div>
<button onclick="">꾹</button>
</body>
실행
2.Kinds of evnets
mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave
$(document).ready(function () {
$("#kk").mousedown(function () {
console.log("mousedown");
}); // 클릭 땜
$("#kk").mouseup(function () {
console.log("mouseup"); // 클릭 누름
});
$("#kk").mousemove(function () {
console.log("mousemove");
});
$("#kk").mouseover(function () {
console.log("mouseover");
});
$("#kk").mouseout(function () {
console.log("mouseout");
});
$("#kk").mouseenter(function () {
console.log("mouseenter");
});
$("#kk").mouseleave(function () {
console.log("mouseleave");
});
});
실행
3.Utilize
<script>
$(document).ready(function () {
$("#btn").click(function () {
var ctn=$("#name").val();
console.log(ctn);
if (ctn == "") {
console.log("empty");
}
else{
document.write(ctn);
}
});
});
</script>
</head>
<body>
<form action="">
<input type="text" size="11" id="name" />
<input type="button" id="btn" value="submit" />
</form>
</body>
=========================================
$(document).ready(function () {
$("#sb").click(function () {
if($("#uid").val()=="") {
console.log("empty");
}
else if($("#upw").val() == "") {
console.log("empty");
} else {
console.log("suceed");
$("#logi").submit(); // form에 subit-> action을 실행
}
});
$("#ress").click(function () {
console.log("reset");
alert("sdas");
$("#logi")[0].reset(); // reset은 form을 하나의 배열로 취급, 꼭 [ args ] 를 써야한다.
});
});
실행
4.This, Event
<script>
$(document).ready(function () {
function addevt(event) { //event를 발생하는 객체
console.log("들어옴")
console.log(this) //this는 이벤트를 발생시킨 객체
for (var key in event) {
console.log(" "+event[key]);
}
};
$("#k1").click(addevt);
$("#k2").click(addevt);
});
</script>
</head>
<body>
<div id="k1">1번</div>
<div id="k2">2번</div>
</body>
실행
'공부(2018~2019) - 스킨변경전 > Javascript' 카테고리의 다른 글
| <javascript> 7. Number, String (0) | 2018.04.05 |
|---|---|
| <javascript> 6. Date, InnerHTML (0) | 2018.04.04 |
| <jQuery> 2. Method (0) | 2018.03.30 |
| <jQuery> 2. DOM (0) | 2018.03.29 |
| <jQuery> 1. Selector (0) | 2018.03.28 |
블로그의 정보
57개월 BackEnd
BFine