반응형
JQuery
<body>
<h1>이벤트 전파 막기</h1>
<div id="test01">
<p class="ptest01">
<a href="jq05_DOM탐색메서드_메뉴만들기.html">이동</a>
</p>
<p class="ptest01">클릭</p>
</div>
<h1>동적으로 추가된 요소에 대한 이벤트 처리</h1>
<button id="btn01">새로운 p태그 추가</button>
<button id="btn02">이벤트해제</button>
<p>이미 작성되어 있는 p태그</p>
</body>이벤트 전파 및 기본 기능을 금지시키는 메서드
이벤트 메서드 종류
- click()
- keydown()
- change()
- focus()
stopPropagation() : 이벤트 전파를 막음
<script type="text/javascript">
$(function(){
$("a").eq(0).click(function(e){
alert($(this).prop("tagName"));
e.stopPropagation();
});
});
</script>preventDefault() : 태그의 기본 기능을 막음
<script type="text/javascript">
$(function(){
$("a").eq(0).click(function(e){
alert($(this).prop("tagName"));
e.preventDefault();//a요소에 적용된 링크 이동을 막는다
});
});
</script>return false : 동시에 둘다 처리 가능
<script type="text/javascript">
$(function(){
$("a").eq(0).click(function(e){
alert($(this).prop("tagName"));
// e.stopPropagation();
// e.preventDefault();
return false;
});
});
</script>동적으로 추가 된 요소의 이벤트 처리
동적으로 요소를 추가 할 경우 그 요소들은 이벤트 적용 안됨
이벤트 핸들러 메서드의 종류
bind()/unbind()
bind("이벤트타입",기능(){})$("a").bind("mouseover mouseout",function(e){ console.log(e.type);//이벤트의 속성 });unbind : bind기능 해제
$("#btn02").click(function(){ alert("bind메서드 기능 중지"); $("a").unbind(); });delegate()/undelegate()
live()/die()
on()/off()
on("이벤트 타입","추가 셀렉터 표현식 ,기능())$("body").on("click",">p",function(){ alert("이벤트발생"); })one()
기타 참고
prop (property) : 객체 안의 속성들
$(function(){ $("a").eq(0).click(function(){ alert($(this).prop("tagName")); }); });js이벤트 핸들러
document.body.addEventListener("click",function(){});
반응형
'Front-end > JQuery' 카테고리의 다른 글
| (JQuery)AJAX 비동기구현 (0) | 2023.03.08 |
|---|---|
| (JQuery)DOM처리 메서드 (0) | 2023.03.08 |
| (JQuery)DOM탐색 메서드 연습문제 (0) | 2023.03.07 |
| (JQuery)DOM탐색 메서드 (0) | 2023.03.06 |
| (JQuery)셀렉터 표현식 (0) | 2023.03.06 |