Bind : 엘리먼트에 이벤트 핸들러를 지정한다. bind()를 통해 해당 엘리먼트에 원하는 이벤트를 적용할 수 있다.
매개변수
eventType : click, mousedown, focus 등과 같은 적용 가능한 이벤트 타입 function : 이벤트가 발생하였을 때 실행할
사용자 정의 함수
예제
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> ul{ float: left; margin: 30px; } div{ width: 100px; height: 100px; } </style> <script src = "../js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ //$('a').click(function(){ $('a').bind('click mouseover', function(){ $('img').attr('src',$(this).attr('href')); return false; }); }); </script> </head> <body> <ul> <li><a href="../images/image3.jpg">사진1</a> <li><a href="../images/image4.jpg">사진2</a> </ul> <img src = "../images/im7.jpg"> <div></div> </body> </html>
mouseover는 해당 <a>칸에 마우스가 올라가면 바로 반응이 되는 기능이다
return false를 쓴이유는 이벤트 처리를할때 이벤트 전파 방지를 위해 사용했다
결과
초기화면 사진1에 마우스를 올림 사진2에 마우스를 올림 마우스를 올리면 attr을 이용해 src자리에 href의 값을 올리도록 설정하여 반응하게 하였다
'JQuery' 카테고리의 다른 글
| [jQuery] change (0) | 2023.09.22 |
|---|---|
| [jQuery] live (0) | 2023.09.22 |
| [jQuery] 테이블 동적 생성 (0) | 2023.09.21 |
| [jQuery] append (0) | 2023.09.21 |
| [jQuery] siblings (0) | 2023.09.21 |
