Jquery가 이벤트를 수신할 수 있나요?-프런트엔드 Q&A-php.cn

Jquery가 이벤트를 수신할 수 있나요?

青灯夜游

풀어 주다： 2022-04-28 14:02:27

원래의

2022명이 탐색했습니다.

jquery는 이벤트를 수신할 수 있습니다. jquery는 다양한 이벤트 모니터링 방법을 제공합니다. 1. 클릭 이벤트를 모니터링하고 이벤트 처리 기능을 지정할 수 있는 click() 2. 변경 이벤트를 모니터링하고 이벤트 처리 기능을 지정할 수 있는 dblclick() 더블 클릭 이벤트를 모니터링할 수 있습니다. 4. hover() 등.

Jquery가 이벤트를 수신할 수 있나요?

이 튜토리얼의 운영 환경: windows7 시스템, jquery1.10.2 버전, Dell G3 컴퓨터.

jquery는 이벤트를 수신할 수 있습니다.

jquery는 click(), on() 및 기타 메서드와 같이 이벤트를 수신하는 다양한 메서드를 제공합니다. 다음은 몇 가지 방법입니다.

1. click() 메소드:

click() 메소드는 클릭 이벤트가 발생할 때 실행될 함수를 지정합니다.

예:

요소를 클릭할 때 경고 텍스트

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("p").click(function() {
					alert("段落被点击了。");
				});
			});
		</script>
	</head>
	<body>

		<p>点击这个段落。</p>

	</body>
</html>

로그인 후 복사

Jquery가 이벤트를 수신할 수 있나요?

2.change() 메소드

change() 메소드는 변경 이벤트가 발생할 때 실행될 함수를 지정합니다.

예: 필드 변경 시 경고 텍스트

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function(){
		  $("input").change(function(){
		    alert("文本已被修改");
		  });
		});
		</script>
	</head>
	<body>

		<input type="text">
		<p>在输入框写一些东西，然后按下 enter 键或点击输入框外部。</p>

	</body>
</html>

로그인 후 복사

Jquery가 이벤트를 수신할 수 있나요?

3.dblclick()

dblclick() 메서드는 더블 클릭 이벤트가 발생할 때 실행되는 함수를 지정합니다.

예:

요소를 두 번 클릭할 때 경고 텍스트

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("p").dblclick(function() {
					alert("这个段落被双击。");
				});
			});
		</script>
	</head>
	<body>

		<p>双击这个段落。</p>

	</body>
</html>

로그인 후 복사

Jquery가 이벤트를 수신할 수 있나요?

4. hover() 메소드

hover() 메소드는 마우스 포인터가 선택된 항목 위에 있을 때 실행할 두 가지 작업을 지정합니다. 요소 기능.

메소드는 mouseenter 및 mouseleave 이벤트를 트리거합니다.

예: 마우스 포인터를 위에 올리면

요소의 배경색 변경

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("p").hover(function() {
					$("p").css("background-color", "yellow");
				}, function() {
					$("p").css("background-color", "pink");
				});
			});
		</script>
	</head>
	<body>

		<p>鼠标移动到该段落。</p>

	</body>
</html>

로그인 후 복사

Jquery가 이벤트를 수신할 수 있나요?

이벤트를 듣는 다른 방법

라이브( )load()mousedown()mousedown 이벤트 추가/트리거mouseenter()mouseenter 이벤트 추가/트리거mouseleave()마우스 추가/트리거 이벤트 나가기mousemove()mousemove 이벤트 추가/트리거mouseout()mouseout 이벤트 추가/트리거mouseover()mouseover 이벤트 추가/트리거마우스업( ) mouseup 이벤트 추가/트리거off()on() 메소드를 통해 추가된 이벤트 핸들러 제거on()요소에 이벤트 핸들러 추가one() Add 선택한 요소에 하나 이상의 이벤트 핸들러를 추가합니다. 이 핸들러는 요소당 한 번만 트리거될 수 있습니다resize()add/trigger resize eventscroll()add/trigger 스크롤 이벤트select()add/ 이벤트 선택submit()제출 이벤트 추가/트리거trigger()선택한 요소에 바인딩된 모든 이벤트 트리거triggerHandler()선택한 요소에 바인딩된 이벤트 트리거 요소 선택한 요소의 지정된 이벤트에 대한 모든 함수unbind()선택한 요소에서 추가된 이벤트 핸들러를 제거undelegate()현재 또는 미래에 선택된 요소에서 제거 이벤트 핸들러 unload()contextmenu()컨텍스트 메뉴 이벤트에 이벤트 핸들러 추가

메서드	Description
bind()	요소에 이벤트 핸들러 추가
blur()	초점 상실 이벤트 추가/트리거
delegate()	요소를 일치시키려면 추가하기
die()	의 현재 또는 미래 하위 요소에 대한 처리기가 버전 1.9에서 제거되었습니다. live() 메소드를 통해 추가된 모든 이벤트 핸들러를 제거하세요.
error()	버전 1.8에서 더 이상 사용되지 않습니다. 오류 이벤트 추가/트리거
focus()	포커스 이벤트 추가/트리거
focusin()	focusin 이벤트에 이벤트 핸들러 추가
focusout()	focusout 이벤트에 이벤트 핸들러 추가
keydown()	추가/트리거 키 다운 이벤트
keypress()	추가/트리거 키 누르기 이벤트
keyup()	추가/트리거 키업 이벤트
	버전 1.9에서 제거되었습니다. 현재 또는 미래에 선택된 요소에 하나 이상의 이벤트 핸들러를 추가하세요.
	버전 1.8에서 더 이상 사용되지 않습니다. 로드 이벤트에 이벤트 핸들러 추가


















	는 버전 1.8에서 더 이상 사용되지 않습니다. 언로드 이벤트에 이벤트 핸들러 추가