jQuery

[jQuery] event

maribel 2019. 9. 18. 14:22

1. bind

<script type="text/javascript" src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function(){
	/*
	형식) $(이벤트발생 대상자 선택자).bind(등록할_이벤트종류명, 함수명|익명함수)
	비활성화시키는 방법->1) 함수끝에 return false을 주는 경우
	2) 함수를 작성하면서 event객체를 매개변수로 전달받아서 event.preventDefault()를 호출해도 된다.
	*/	
	$('a').bind('click',function(event){
		var href=$(this).attr('href')
		$('img').attr('src',href)
		event.preventDefault();
		//return false
	})
})
</script>

<body>
	<ul>
		<li><a href="../picCats/Persian.jpg">Persian</a></li>
		<li><a href="../picCats/RussianBlue.jpg">RussianBlue</a></li>
		<li><a href="../picCats/BritishShorthairs.jpg">BritishShorthairs</a></li>
	</ul>
	<img>
</body>

 

<script>
$(function(){
	/*
	이벤트 연결방식 2가지 
	형식) 등록할 이벤트명:function() {} -> 익명함수형태로 코딩
	
	1.bind를 사용하는 경우		  ->현재 발생시킬 이벤트 뿐만아니라 다른 이벤트도 연결이 가능
	2.bind를 사용하지 않는 경우	-> click -> 발생시킨 이벤트만 처리
	*/
	$('img').bind({
		mouseout:function(){
			$('img').attr('src','../picCats/Persian.jpg')
		},
		mouseover:function(){
			$('img').attr('src','../picCats/RussianBlue.jpg')
		},
		click:function(){
			alert('bind함수를 이용한 연결테스트입니다.')
		}
	})
})
</script>

<body>
	<img src="../picCats/Persian.jpg" width="200" height="200">
</body>

2. toggleClass

<style type="text/css">
	p {margin:4px;font-size:16px;font-weight:bolder;cursor:pointer}
	.blue {color:blue;}	
</style>
<script>
$(function(){
	//jQuery에서의 이벤트 연결방법->$(선택자).이벤트종류명(function(){...})
	$('p').click(function(){
		//형식) $(선택자).toggleClass(클래스 선택자)
        // addClass()와 removeClass()를 번갈아가며 반복하는 기능
		$(this).toggleClass('blue');
	})
})
</script>

3. remove, empty

<script>
$(function(){
	$('#button1').click(function(){
		$('#div1').remove()		//전체(구조와 내용까지)삭제
	})
	$('#button2').click(function(){
		$('#div1').empty()		//->특정태그의 자식태그를 포함한다면 자식태그들도 삭제
	})
	$('#button3').click(function(){
		$('.test').empty()			//특정 태그의 내용만 삭제
	})
})
</script>

<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow">
	<p class="test" style="height:50px;width:50px;border:1px solid red;background-color:yellow">div first</p>
	<p>div second</p>
</div><br>
<button id="button1">Remove div</button>
<button id="button2">Empty div</button>
<button id="button3">Empty p</button>
</body>

4. event 객체

<script>
$(function(){
	//event 객체 : 이벤트를 발생시킨 객체에 대한 정보를 가지고 있는 객체(클릭한 좌표값,마우스버튼 누른경우)
	//$('img').bind('dblclick',function(event){
	$('img').one('dblclick',function(event){	//bind<->unbind 사용을 one으로 대신함
		//이미지 더블클릭
		//var $target=$(event.target)	//이벤트를 발생시킨 대상자에 대한 정보를 가지고 있는 속성
		var $target=$(this)
		$target.width($target.width()*2)
		//형식) $(이벤트발생대상자 선택자).unbind('해제시킬_이벤트종류명')
		//형식) $(이벤트발생대상자 선택자).unbind() -> 모든 이벤트 연결이 다 끊어진다.
		//$target.unbind('dblclick')
		//$target.unbind()
	})
})
</script>

<body>
	<img src="../picCats/Persian.jpg">
</body>

5. hover

<style>
	.reverse {background:black;color:white}
</style>
<script>
$(function(){
	//형식) $('선택자').hover(mouseover|function(){},mouseout|function(){})
	//hover : mouseover와 mouseout을 번갈아 가면서 호출해주는 함수
	$('h1').hover(function(){
		$(this).addClass('reverse')
	},function(){
		$(this).removeClass('reverse')
	})
	
})
</script>

<body>
	<h1>hover test-0</h1>
	<h1>hover test-1</h1>
	<h1>hover test-2</h1>
</body>

6. keyup

<script>
	$(function(){
		//keyUp : 사용자가 글자를 입력했을때 발생하는 이벤트
		$('input').keyup(function(){
			var value=$(this).val()
			report(value)
		})
		//버튼을 눌렀을때 input의 내용을 지우고 커서 입력
		$('button').click(function(){
			$('input').val('')			
			$('input').focus()		//커서입력
			$('#console').empty()		//내용 삭제
		})
		//사용자 정의 함수-->div태그에 입력받은 값을 추가시켜주는 함수 작성
		function report(msg){
			$('#console').text(msg)
		}
	})
</script>

<body>
	<button>reset</button><p>
	<input type="text" value="val 함수 연습중" size="100">
	<div id="console"></div>
</body>

 

7. change

<script>
$(function(){
	$('#sel').change(function(event) {
		
		$('#img').attr('src',$(event.target).val())
	})
})
</script>

<body>
<form name="frm">
	<table>
	<tr>
		<td>
			<select id="sel">
				<option value="../picCats/ragdoll.jpg">Ragdoll</option>
				<option value="../picCats/MaineCoon.jpg">MaineCoon</option>
				<option value="../picCats/Persian.jpg">Persian</option>
			</select>
		</td>
		<td><img id="img"></td>
	</tr>
	</table>
</form>
</body>