📝 jQuery
🖥️ 1. 이벤트 등록 방법
1-1. 이벤트 이름 명시
$("셀렉터").이벤트이름(function(){
.. 이벤트 내용 ..
});
1-2. bind()
$("셀렉터").bind("이벤트타입", function(e){
.. 이벤트 내용 ..
});
1-3. on()
$("셀렉터").on("이벤트타입", function(){
.. 이벤트 내용 ..
});
1-4. 기타
$("body").on({"click":function(){
.. 이벤트 내용 ..
}}, "#btn");
// 잘 쓰지 않는 방법
📝 예제
EX1)
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.7.0/jquery.min.js"></script>
</head>
<body>
<div id="clickable-div">클릭하세요</div>
<hr/>
<input type="button" id="clickable-input" value="클릭하세요" />
<hr/>
<button type="button" id="clickable-button">클릭하세요</button>
<script>
$('#clickable-div').click(function(){
alert("<div>를 클릭했습니다.");
})
$('#clickable-input').click(function(){
alert("<input>을 클릭했습니다.");
})
$('#clickable-button').on("click", function(){
alert("<button>을 클릭했습니다.");
})
</script>
</body>
EX2)
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.7.0/jquery.min.js"></script>
</head>
<body>
<a href="http://www.naver.com" id="link1">Link1</a>
<a href="http://www.naver.com" id="link2">Link2</a>
<script>
$("#link1").click(function(){
alert("link1 클릭");
})
$("#link2").click(function(e){
e.preventDefault();
alert("link2 클릭");
})
</script>
</body>
EX3)
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.7.0/jquery.min.js"></script>
</head>
<body>
<input type="button" id="click_me" value="click_me" />
<input type="button" id="remove_event" value="unbind" />
<script>
function clickHandler(){
alert("Hello JavaScript");
}
$("#click_me").bind('click', clickHandler);
$('#remove_event').bind('click',function(){
$("#click_me").unbind('click',clickHandler);
})
</script>
</body>
EX4)
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>On()</h1>
<p>여기를 클릭해주세요.</p>
<script>
$("p").on("click", function(){
alert("문장이 클릭되었습니다.");
});
</script>
</body>
EX5) 복수 조건 이벤트
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>.on()</h1>
<p>이 문장 위로 마우스를 움직여보세요.</p>
<div></div>
<script>
$("p").on("mouseenter mouseleave", function(){
$("div").append('마우스 커서가 문장 위로 들어오거나 빠져나갔습니다.<br/>');
});
</script>
</body>
EX6)
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>.On()</h1>
<p>이 문장 위로 마우스를 움직여보세요.</p>
<div></div>
<script>
$("p").on({
click:function(){
$("div").append("마우스가 문장을 클릭했습니다.<br/>");
},
mouseenter:function(){
$("div").append("마우스 커서가 문장 위로 들어왔습니다.<br/>");
},
mouseleave:function(){
$("div").append("마우스 커서가 문장을 빠져나갔습니다.<br/>");
}
});
</script>
</body>
EX7)
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>.off()</h1>
<button id="btn">버튼 클릭 가능</button>
<button id="btnBind">버튼 클릭을 가능하게 합니다.</button>
<button id="btnUnbind">버튼 클릭을 불가능하게 합니다.</button>
<div></div>
<script>
function action(){
$('div').append('버튼 이벤트 !!<br/>');
}
$('#btn').on('click', function(){
action();
});
$('#btnUnbind').on('click',function(){
$('#btn').off('click').text("버튼 클릭 불가능");
});
$('#btnBind').on('click',function(){
$('#btn').on('click', function(){
action();
}).text("버튼 클릭 가능");
});
</script>
</body>
EX8)
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>.one()</h1>
<p>아래 버튼은 한 번만 실행됩니다.</p>
<button>버튼을 클릭해주세요.</button>
<div></div>
<script>
$("button").one("click", function(){
$("div").append("이제 클릭되지 않습니다.<br/>");
});
</script>
</body>
EX9)
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.7.0/jquery.min.js"></script>
<style>
.event-box {
font-size: 20px; padding: 20px 10px;
margin: 10px auto; display: block;
text-align: center; width: 500px;
}
.input { border: 5px solid #007; background: #d5d5d5; color: #009; }
.console { border: 5px solid #a0a; background: #d5d5d5; color: #505; }
</style>
</head>
<body>
<input type="text" id="listener" class="event-box input" placeholder="여기에 입력하세요" />
<div class="event-box console">
up=<span id="result1">0</span>, down=<span id="result2">0</span>
</div>
<script>
let counter = { down : 0, up : 0 };
$("#listener").on("keyup", function(){
counter.up++;
$("#result1").html(counter.up);
});
$("#listener").on("keydown", function(){
counter.down++;
$("#result2").html(counter.down);
});
</script>
</body>
