-
이벤트 바인딩프로그래밍/JQuery 2022. 11. 5. 10:23728x90
이벤트는 특정 이벤트는 처리하는 이벤트 핸들러 함수와 요소를 연결하는 역할을 해주는 이벤트 바인딩이라는 개념이 있다.
이벤트 바인딩 메소드의 종류
종류 설명 on() 이벤트 핸들러 함수와 요소를 연결하여 이벤트 사용을 정상적으로 허용한다. off() 바인딩을 제거하여 이벤트 사용을 제한한다. one() 이벤트 핸들러가 딱 한번만 실행되고 더 이상 실행하지 않는다. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>이벤트2</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" /> <style> button{ width: 200px; height: 60px; font-size: 30px; font-weight: 900; border: 1px solid grey; } button.on{ background-color: black; color: white; } </style> <script> $(function(){ $('button').on('click', function(){ $(this).addClass('on'); }) }); </script> </head> <body> <p><button>버튼</button></p> </body> </html>
기본 결과 화면 
클릭 이벤트가 정상적으로 발동됨 728x90'프로그래밍 > JQuery' 카테고리의 다른 글
Enter, Tab, ESC 키 이벤트 (0) 2022.11.07 이벤트(event) 종류 (0) 2022.11.04 클래스 다루기 (0) 2022.11.02 박스모델 메소드 (0) 2022.11.01 자식, 자손 요소의 탐색 (0) 2022.10.31