๐ ์ด๋ฒคํธ์ ์ด๋ฒคํธ ํธ๋ค๋ฌ ๋ฐ๋ก๊ฐ๊ธฐ
์ด๋ฒคํธ ์ฐ๊ฒฐ (event binding)
ํน์ ์์์์ ๋ฐ์ํ๋ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํด์๋ ์ด๋ฒคํธ ํธ๋ค๋ฌ ํจ์๋ฅผ ์์ฑํด์ผ ํ๋ค. ์์ฑ๋ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ํน์ ์์(์ด๋ฒคํธ ์์ค)์ ์ฐ๊ฒฐํ๋ ๊ฒ์ ์ด๋ฒคํธ ์ฐ๊ฒฐ(event binding)์ด๋ผ๊ณ ํ๋ค.
- $(
์ด๋ฒคํธ์์ค).on("์ด๋ฒคํธํ์",์ด๋ฒคํธ ์ฒ๋ฆฌ ํจ์);
<head>
<script>
$(document).ready(function () {
// ์ด๋ฒคํธ ์ฒ๋ฆฌ๋ฅผ ์ํ ์ด๋ฒคํธ ์์ค ๊ฐ ๊ฐ์ ธ์ค๊ธฐ
// ๐ก button ์ด๋ฒคํธ ์ฒ๋ฆฌ
$("#ok").on("click", function () {
console.log(this); // Js๊ฐ์ฒด
console.log($(this)); // Jquery ๊ฐ์ฒด ๐ ์ด๋ฒคํธ์์ค์ ๋ํ ์ ๋ณด๋ฅผ ์ป์ด์ ์ฐ๋ฆฌ๊ฐ ํ์ํ ์์
์ ํ ์ ์๋ค
console.log($(this).text()); // Jquery ๊ฐ์ฒด
console.log(event); // Event ๊ฐ์ฒด
console.log(event.target); // Event ๊ฐ์ฒด๋ฅผ ์ด์ฉํด์ ์ด๋ฒคํธ ์์ค ๊ฐ์ฒด ์ฐธ์กฐ๊ฐ๋ฅ
});
// ๐ก text ์ด๋ฒคํธ ์ฒ๋ฆฌ
$("#txtInput").on("keyup", function(){
console.log($(this).val());
});
// ๐ก select ์ด๋ฒคํธ ์ฒ๋ฆฌ
$("select").on("change", function(){
console.log($(this).val());
console.log($(":selected").text());
});
// ๐ก submit ์ด๋ฒคํธ ์ฒ๋ฆฌ
$("form").on("submit", function(){
// ์์ด๋๋ ํ์ ํญ๋ชฉ
var id = $("#userid").val();
if(id.length== 0){ // ์์ด๋์ ์
๋ ฅํ์ง ์์์ผ๋ฉด
event.preventDefault(); // ์๋ submit ๋ฐฉ์ง
alert("์์ด๋๋ ํ์"); // alert ๋ฉ์์ง ํ์
$("#userid").focus();
}
});
});
</script>
</head>
<body>
<button id="ok">OK</button><br>
text:<input type="text" id="txtInput" /> <br>
<hr>
<form action="http://www.google.com">
์์ด๋<input type="text" name="userid" id="userid"><br>
๋น๋ฐ๋ฒํธ<input type="text" name="passwd"><br>
<select name="fruit">
<option value="์ฌ๊ณผ">์ฌ๊ณผ</option>
<option value="๋ฐ๋๋">๋ฐ๋๋</option>
<option value="์๋ฐ">์๋ฐ</option>
</select><br>
<input type="submit" value="์ ์ก">
</form>
</body>
๐ก this
์ด๋ฒคํธ์ ์ํด ์คํ๋๋ ํจ์ ์์์ this๋ฅผ ์ฌ์ฉํ ์ ์๋ค. $(this)๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ์๊ธฐ ์์ ์ ๊ฐ์งํ ์ ์๊ฒ ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ๋์ผํ ์์ค๊ฐ ๋ฐ๋ณต๋๋ ๊ณณ์์ ์ฌ์ฉ๋๋ค. ์๋ฅผ๋ค์ด class์ ์ด๋ฆ์ด ์ฌ๋ฌ ๊ฐ๊ฐ ๋์ผํ ๊ฒฝ์ฐ ํ ๊ตฐ๋ฐ์๋ง ์ด๋ฒคํธ๋ฅผ ์ฃผ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ค.
๋์ ์ผ๋ก ์ถ๊ฐ๋ DOM ๊ฐ์ฒด์ ๋ํ ์ด๋ฒคํธ
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํ์ฌ ๋์ ์ผ๋ก ์ถ๊ฐ๋ ํ๊ทธ์ ์ด๋ฒคํธ๋ฅผ ์ถ๊ฐํ๊ธฐ ์ํด ์ด๋ฒคํธ ์ฐ๊ฒฐ์ ๋ค์๊ณผ ๊ฐ์ด ์ด๋ค์ง๋ค.
- $(document).on("
์ด๋ฒคํธํ์", "#id๋ช",์ด๋ฒคํธ ์ฒ๋ฆฌํจ์)
<head>
<script>
$(document).ready(function () {
$("#ok").on("click", function(){
$("div").html("<button id='x'>ok</button>");
});
// ๋์ ์ผ๋ก ์ถ๊ฐ๋ DOM๊ฐ์ฒด์ ๋ํ ์ด๋ฒคํธ ์ฒ๋ฆฌ
$("body").on("click", "#x", function(){
console.log("ok");
});
});
</script>
</head>
<body>
<button id="ok"> ๋ฒํผ ์ถ๊ฐ</button> <br>
<div></div>
</body>
trigger ์ด๋ฒคํธ
trigger() ๋ ์ ํ๋ ์์์ ๊ฐ์ ๋ก ์ด๋ฒคํธ๋ฅผ ๋ฐ์์ํค๋ ๋ฉ์๋์ด๋ค.
- $("selector").trigger("
์ด๋ฒคํธํ์")
<head>
<script>
$(document).ready(function () {
$("#ok").on("click", function(){
$("#result").text("ok๋ฒํผ์ trigger ์ด๋ฒคํธ ๋ฐ์").css("color","red");
});
$("#ok2").on("click", function(){
$("#ok").trigger("click");
// ok ๋ฒํผ์ trigger ์ด๋ฒคํธ ๋ฐ์
// ok2 ๋ฒํผ์ ๋๋ฅด๋ฉด ok๋ฒํผ์ ์๋๋ฌ๋ ok๋ฒํผ์ด click๋ ๊ฒ์ผ๋ก ์คํ
});
});
</script>
</head>
<body>
<button id="ok">ok</button> <br>
<button id="ok2">trigger</button> <br>
<div></div>
</body>
</html>
'Framework & Library > JQeury' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JQuery] ์ ์ด์ฟผ๋ฆฌ AJAX ์ฌ์ฉ ๋ฐฉ๋ฒ (0) | 2023.07.14 |
|---|---|
| [JQuery] Utility method ์ ํธ๋ฆฌํฐ ๋ฉ์๋ (0) | 2023.07.14 |
| [JQuery] Mainipulation method (0) | 2023.07.14 |
| [JQeury] Attributes method ์์ฑ ๋ฉ์๋ (0) | 2023.07.14 |
| [JQuery] Traversing (0) | 2023.07.13 |
