JQuery는 간단한 예를 통해 Trigger()와 TriggerHandler()의 차이점을 비교합니다.
웹페이지 특수 효과를 만들 때 때로는 시뮬레이션 작업, 즉 수동 작업을 시뮬레이션해야 하는 경우가 있습니다. 이때 JQuery의 두 가지 시뮬레이션 연산 방식인 Trigger()와 TriggerHandler()를 생각해 보겠습니다. 이 두 가지 방법 모두 수동 작업을 쉽게 시뮬레이션할 수 있는데, 둘 사이의 차이점은 무엇입니까? 아래에서는 간단한 사례를 통해 차이점을 소개합니다. 페이지를 새로 고치면 버튼을 클릭하는 효과가 자동으로 시뮬레이션되고 프롬프트가 나타납니다.
먼저, 새 페이지를 만들고 다음 HTML 코드를 페이지에 추가하세요:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
*{padding:0; margin:0;}
.hi{background:red;width:100px;height:100px; position:relative;}
</style>
<script type="text/javascript" src="/a/js/jquery-1.10.1.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="hi">
<form action="http://wanlimm.com" >
<input type="submit" value="aaa" />
<input type="submit" value="bbb" />
</form>
</div>
</body>
</html>이 HTML 코드의 형식에는 2개의 버튼이 있고 해당 값은 "aaa"와 "bbb"입니다. 이제 이 2개의 버튼을 클릭하세요. 그 중 하나에 http://wanlimm.com 페이지가 표시됩니다.
그런 다음 사이에 JS 코드를 추가하세요.
$(function(){
$(":submit").click(function(e){
alert($(this).val());
}).trigger('click');
});여기서 우리가 사용하는 트리거 방법은 페이지를 두 번 새로 고치는 팝업 창에 " aaa" 및 "bbb"를 각각 입력한 다음 자동으로 양식 동작을 사용하여 자동으로 http://wanlimm.com 페이지로 이동합니다.
트리거를 TriggerHandler로 바꾸면 팝업창이 하나만 생기고 양식 동작이 차단되며 자동으로 http://wanlimm.com 페이지로 이동하지 않습니다.
그런 다음 HTML 코드에서 파란색 양식 코드를 제거한 다음 다음과 같이 CSS 메서드를 JS 코드에 추가합니다.
$(function(){
$(":submit").click(function(e){
alert($(this).val());
}).trigger('click').css('color','red');
});페이지를 새로 고칠 때 팝업이 2번 표시된 후 버튼의 텍스트는 다음과 같습니다. 빨간색. 그러나 트리거를 TriggerHandler로 변경하면 페이지 새로 고침 후 창이 한 번만 팝업되고 텍스트가 빨간색으로 바뀌지 않습니다.
trigger와 TriggerHandler의 차이점을 요약하면 다음과 같습니다.
1. TriggerHandler() 메서드는 이벤트의 기본 동작을 트리거하지 않지만 Trigger()는 트리거합니다.
2. TriggerHandler() 메서드는 일치하는 첫 번째 요소에만 영향을 미치는 반면, .trigger()는 모든 요소에 영향을 미칩니다.
3. TriggerHandler() 메서드는 현재 이벤트 실행의 반환 값을 반환하기 때문에 다른 메서드에 연결할 수 없습니다. Trigger() 메서드는 현재 이벤트 실행의 반환 값을 반환하기 때문에 다른 메서드에 연결할 수 없습니다. 이벤트 트리거 요소를 포함합니다.
4. 이벤트를 생성할 때 TriggerHandler()는 버블링되지 않습니다. Trigger()는 버블링되지만 이러한 종류의 버블링은 사용자 정의 이벤트에 의해서만 반영될 수 있습니다.
위 내용은 JQuery는 간단한 예를 통해 Trigger()와 TriggerHandler()의 차이점을 비교합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7560
15
1384
52
84
11
60
19
28
98
Xiaomi Mi 14 Pro에서 NFC 기능을 활성화하는 방법은 무엇입니까?
Mar 19, 2024 pm 02:28 PM
요즘 휴대폰의 성능과 기능은 점점 더 강력해지고 있습니다. 거의 모든 휴대폰에는 사용자의 모바일 결제 및 신원 인증을 용이하게 하는 편리한 NFC 기능이 탑재되어 있습니다. 그러나 일부 Xiaomi 14Pro 사용자는 NFC 기능을 활성화하는 방법을 모를 수 있습니다. 다음으로 자세히 소개해드리겠습니다. Xiaomi 14Pro에서 NFC 기능을 활성화하는 방법은 무엇입니까? 1단계: 휴대폰의 설정 메뉴를 엽니다. 2단계: "연결 및 공유" 또는 "무선 및 네트워크" 옵션을 찾아 클릭합니다. 3단계: 연결 및 공유 또는 무선 및 네트워크 메뉴에서 "NFC 및 결제"를 찾아 클릭합니다. 4단계: "NFC 스위치"를 찾아서 클릭하세요. 일반적으로 기본값은 꺼짐입니다. 5단계: NFC 스위치 페이지에서 스위치 버튼을 클릭하여 켜세요.
Huawei Pocket2에서 원격으로 TikTok을 사용하는 방법은 무엇입니까?
Mar 18, 2024 pm 03:00 PM
화면을 공중으로 밀어내는 것은 화웨이 메이트60 시리즈에서 높은 평가를 받는 화웨이의 기능이다. 이 기능은 휴대폰의 레이저 센서와 전면 카메라의 3D 깊이 카메라를 활용해 화면이 필요 없는 일련의 기능을 완성한다. 공중에서 TikTok을 스와이프하는 등 화면을 터치하는 기능이 있는데, Huawei Pocket 2를 사용하여 공중에서 TikTok을 스와이프하는 방법은 무엇인가요? Huawei Pocket2로 공중에서 스크린샷을 찍는 방법은 무엇입니까? 1. Huawei Pocket2의 설정을 엽니다. 2. 그런 다음 [접근성]을 선택합니다. 3. 클릭하여 [스마트 인식]을 엽니다. 4. [에어 스와이프 스크린], [에어 스크린샷], [에어 프레스] 스위치를 켜기만 하면 됩니다. 5. 사용 시 화면에서 20~40CM 거리를 두고 손바닥을 펴고 화면에 손바닥 아이콘이 나타날 때까지 기다려야 합니다.
iPhone 16 Pro CAD 도면이 공개되어 두 번째 새 버튼이 추가되었습니다.
Mar 09, 2024 pm 09:07 PM
아이폰16 프로의 CAD 파일이 노출됐는데, 디자인은 기존 루머와 일치한다. 지난해 가을 아이폰 15 프로에는 액션 버튼이 추가됐고, 올 가을 애플은 하드웨어 크기를 소폭 조정할 계획인 것으로 보인다. 캡처 버튼 추가 소문에 따르면 아이폰 16 프로는 두 번째 새 버튼을 추가할 수도 있는데, 이는 지난해에 이어 2년 연속 새 버튼이 추가되는 셈이다. 아이폰 16 프로에서는 새로운 캡처 버튼이 오른쪽 하단에 배치될 것이라는 소문이 돌고 있다. 이 디자인은 카메라 제어를 더욱 편리하게 하고 액션 버튼을 다른 기능에도 사용할 수 있게 할 것으로 예상된다. 이 버튼은 더 이상 일반 셔터 버튼이 아닙니다. 카메라에 관해서는 현재 iP에서
문서를 더 깔끔하게 만들기 위해 WPS Word에서 줄 간격을 설정하는 방법
Mar 20, 2024 pm 04:30 PM
WPS는 당사에서 흔히 사용하는 사무용 소프트웨어입니다. 긴 글을 편집할 때 글꼴이 너무 작아서 선명하게 보이지 않는 경우가 많아 글꼴과 전체 문서가 조정됩니다. 예를 들어 문서의 줄 간격을 조정하면 문서 전체가 매우 명확해집니다. 오늘은 구체적인 작업 단계를 알려드리겠습니다. 와서 살펴보세요. 조정하려는 WPS 텍스트 파일을 열고 [시작] 메뉴에서 단락 설정 툴바를 찾으면 작은 줄 간격 설정 아이콘(그림에서 빨간색 원으로 표시)이 표시됩니다. 2. 줄 간격 설정 오른쪽 하단에 있는 작은 역삼각형을 클릭하면 해당 줄 간격 값이 나타납니다. 줄 간격의 1~3배를 선택할 수 있습니다(그림의 화살표 참조). 3. 또는 해당 단락을 마우스 오른쪽 버튼으로 클릭하면 나타납니다.
Go 언어 들여쓰기 사양 및 예
Mar 22, 2024 pm 09:33 PM
Go 언어의 들여쓰기 사양 및 예 Go 언어는 간결하고 명확한 구문으로 알려져 있으며, 들여쓰기 사양은 코드의 가독성과 아름다움에 중요한 역할을 합니다. 이번 글에서는 Go 언어의 들여쓰기 사양을 소개하고, 구체적인 코드 예시를 통해 자세히 설명하겠습니다. 들여쓰기 사양 Go 언어에서는 들여쓰기에 공백 대신 탭이 사용됩니다. 각 들여쓰기 수준은 하나의 탭이며 일반적으로 4칸의 너비로 설정됩니다. 이러한 사양은 코딩 스타일을 통합하고 팀이 함께 작업하여 컴파일할 수 있도록 합니다.
Oracle DECODE 기능 상세 설명 및 사용 예시
Mar 08, 2024 pm 03:51 PM
Oracle의 DECODE 함수는 쿼리 문의 다양한 조건에 따라 다양한 결과를 반환하는 데 자주 사용되는 조건식입니다. 이 기사에서는 DECODE 함수의 구문, 사용법 및 샘플 코드를 자세히 소개합니다. 1. DECODE 함수 구문 DECODE(expr,search1,result1[,search2,result2,...,default]) expr: 비교할 표현식 또는 필드입니다. 검색1,
TrendX 연구소: Merlin Chain 프로젝트 분석 및 생태 목록
Mar 24, 2024 am 09:01 AM
3월 2일 통계에 따르면 비트코인의 2계층 네트워크 MerlinChain의 총 TVL은 미화 30억 달러에 도달했습니다. 이 중 비트코인 생태자산은 15억9600만 달러 상당의 BTC, 4억400만 달러 상당의 BRC-20 자산 등 90.83%를 차지했다. 지난 달 MerlinChain의 총 TVL은 스테이킹 활동을 시작한 지 14일 만에 19억 7천만 달러에 이르렀으며, 이는 작년 11월에 출시된 Blast를 능가하며 가장 최근이자 똑같이 눈길을 사로잡습니다. 2월 26일, MerlinChain 생태계의 NFT 총 가치는 미화 4억 2천만 달러를 초과하여 이더리움 외에 NFT 시장 가치가 가장 높은 퍼블릭 체인 프로젝트가 되었습니다. 프로젝트 소개 MerlinChain은 OKX 지원입니다
C언어와 PHP의 차이점과 비교분석
Mar 20, 2024 am 08:54 AM
C 언어와 PHP의 차이점 및 비교 분석 C 언어와 PHP는 모두 일반적인 프로그래밍 언어이지만 여러 측면에서 분명한 차이점이 있습니다. 이 기사에서는 C 언어와 PHP를 비교 분석하고 구체적인 코드 예제를 통해 이들 간의 차이점을 설명합니다. 1. 구문 및 사용법: C 언어: C 언어는 프로세스 지향 프로그래밍 언어로 주로 시스템 수준 프로그래밍 및 임베디드 개발에 사용됩니다. C 언어의 구문은 상대적으로 간단하고 저수준이며, 메모리를 직접 조작할 수 있고 효율적이고 유연합니다. C 언어는 프로그래머의 프로그램 완성도를 강조합니다.
