날카로운 jQuery 요점 요약(3) jQuery의 이벤트 및 애니메이션(1부: 이벤트)_jquery

1. 이벤트

1 DOM 로드

코드 복사 코드는 다음과 같습니다

$(document).ready(function(){//...})
DOM이 로드된 후 실행되며 window.onload=function()과 다릅니다.{// ... 재사용성 측면에서 }
$(window).load(function(){//...})
창의 모든 개체가 로드된 후 실행되며 window.onload=와 거의 동일합니다. 기능(){//...} . 선택기

다른: $(document).ready(function(){//...}) 약어: $(function(){//..에도 이 방법을 사용할 수 있습니다. }) 또는 $().ready(function(){//...})

2 이벤트 바인딩

코드 복사 코드는 다음과 같습니다.

$("selector").bind()
는 이벤트를 요소에 바인딩합니다. 형식은 다음과 같습니다. ,fn)은 여러 번 호출할 수 있습니다.
유형 이벤트 유형에는 흐림, 초점, 로드, 크기 조정, 스크롤, 언로드, 클릭, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, 변경 등이 있습니다. select, submit, keydown, keypress, keyup, error 또는 사용자 정의 이벤트
약어 방법: $("selector").bind(type, function(){//...})은 $("selector"와 동일합니다. ) .type(function(){//...})
특정 이벤트 바인딩 해제를 위해 데이터 매개변수를 전달할 수 있습니다
$("selector").is()
판정 방법

(외부: 메소드는 지역 변수를 정의하기 위해 여러 번 재사용 가능 var $x = $("selector").method())

3개의 합성 이벤트

코드 복사 코드는 다음과 같습니다.

$("selector").hover(enter,leave)
커서 시뮬레이션 hover 이벤트, Enter 이벤트는 마우스가 들어갈 때 트리거되고 마우스가 밖으로 나갈 때 Leave 이벤트가 트리거됩니다(bind("mouseenter") 및 바인딩("mouseleave") 대신)
사용법: $("selector ").hover(function(){ //대소문자 입력...},function(){//대문자 그대로 유지...})
(예외: IE6은 CSS의 :hover 의사 클래스 문제를 지원하지 않습니다. 태그 이외 - 이 호버 이벤트는 해결을 위한 해킹으로 사용될 수 있습니다)
$("selector").toggle(fn1,fn2,...,fnN)
연속적인 마우스 클릭 이벤트를 시뮬레이션하고 클릭 순서대로 이벤트 정렬
사용 방법 ：$("selector").toggle(function(){//case1...},function(){//case2...},. ..,function(){//caseN})
특수 사용법: 요소의 표시 상태를 전환합니다. 요소가 숨겨져 있으면 토글을 클릭하여 요소가 표시되도록 하고, 요소를 숨기도록 트리거하려면

P108 예:

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

<script> <br>$(function(){ <br>$ ("panel h5.head").toggle(function(){ <br>$(this ).next().toggle(); <br>},function(){ <br>$(this).next( ).toggle() <br>}) <br>< /script> <br><br> </div>4 이벤트 버블링 <br><br>$("selector").bind("type",function(event){//event: 이벤트 객체...}) <br>이벤트 이벤트 객체: 이 함수 내에서만 접근 가능합니다. 이벤트 처리 함수가 실행된 후에는 이벤트 객체가 소멸됩니다.<br>event.stopPropagation() <br>이벤트 종료 시 이벤트 버블링을 중지하는 데 사용됩니다. 함수<br>P111 예: <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="14424" class="copybut" id="copybut14424" onclick="doCopy('code14424')">코드 복사<u></u></a> 코드는 다음과 같습니다. </span></div> <div class="codebody" id="code14424">< script> <br>$('span').bind("click",function(event){ <br>var txt = $('msg') .html() "<p>내부 범위 요소를 클릭했습니다&lt ;/p>"; <br>$('#msg').html(txt); <br>event.stopPropagation(); <br>}) <br></script>
event.preventDefault ()

요소 기본 동작 방지
예: 유효성 검사 양식(빈 입력으로 인해 제출 및 프롬프트가 표시되지 않음)

코드 복사 코드는 다음과 같습니다.

<script> <br>$(function(){ <br>$("#submit").bind("click" ,function(event){ <br>var 사용자 이름=$("#username").val() <br>if(username=="") { <br>$("#msg").html(" <p> 텍스트 상자의 값은 비워둘 수 없습니다</p>"); <br>event.preventDefault(); <br>} <br> }); <br>}) <br></ 스크립트> <br><br><br>false를 반환합니다. <br>객체 이벤트에 대한 버블링과 기본 동작을 동시에 중지합니다. 이는 stopPapagation()과 PreventDefault()를 동시에 호출하는 것과 같습니다. <br> (예외: 이벤트 캡처와 이벤트 버블링은 반대 프로세스, 이벤트 캡처는 DOM 상단에서 아래쪽으로 트리거되며 jQuery는 이를 지원하지 않으므로 이 책에서는 생략합니다.) <br><br>5 이벤트 객체의 속성<br><br>event.type <br>이벤트 유형 가져오기<br>예: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="23374" class="copybut" id="copybut23374" onclick="doCopy('code23374')"><u>코드 복사 </u></a></span> 코드는 다음과 같습니다. </div> <div class="codebody" id="code23374"> <br><script> <BR>$("a ").click(function(event){ <BR>alert(event.type); <BR>return false; <BR>}) <BR></script&gt ; <BR></script>

"클릭" 위로 돌아감
event.target
이벤트를 트리거한 요소 가져오기
예:

코드 복사 코드는 다음과 같습니다.

<script>$("a[href=http://baidu.com]" ).click(function(){ <br>alert(event.target.href); <br>return false; <br>}) <br></script>

위 내용 "http://baidu.com"을 반환합니다.
event.관련Target
이벤트 관련 요소에 액세스합니다.
event.pageX / event.pageY
상대 커서의 x 좌표와 y 좌표를 가져옵니다.
event.which
마우스 클릭 이벤트에서 마우스 왼쪽과 가운데를 가져오고, 오른쪽 버튼은 키보드 이벤트에서 키보드 키를 가져옵니다. (반환 값 1 = 왼쪽 마우스 버튼, 2 = 마우스 가운데 버튼) 버튼; 3 = 마우스 오른쪽 버튼)
event.metaKey
키보드 이벤트에서 버튼event.originalEvent
원래 이벤트 개체를 가리킵니다

6 이벤트 제거

$("selector").unbind()
요소에서 이벤트를 제거합니다. 형식은 :$("selector").unbind([type][,data]); 매개변수가 없으면 바인딩된 모든 이벤트가 삭제됩니다. 이벤트 유형 매개변수가 제공되면 해당 유형의 바인딩된 이벤트만 삭제됩니다. 두 번째 매개변수로 바인딩할 때 전달된 핸들러 함수를 사용하면 이 특정 이벤트 핸들러 함수만 삭제됩니다. 삭제됩니다)
예:

코드 복사 코드는 다음과 같습니다.

<script> <br>$(function(){ <br>$('#btn').bind("click", myFun1=function(){ //먼저 바인딩 <br>$('#test') .append("..."); <br>}) <br></script>
$('#delOne').click(function (){
$('#btn').unbind("click",myFun1); //다음 삭제
})



$ ("selector").one()
한 번 실행된 후 삭제되는 이벤트를 바인딩합니다. 형식은 다음과 같습니다. $("selector ").one(type[,data],fn); 작업 시뮬레이션

$("selector").trigger("type");
사용자 상호 작용 시뮬레이션, 약어 방법: $("#selector").type() 형식: $("selector ").trigger(type[,data])
예: 클릭을 사용하여 마우스 통과 대체




코드 복사

코드 <script> </a>$("selector").mouseover(function{ //...}) </span>$("selector2").click (function(){ </div>$("selector").trigger("mouseover"); //또는 $("selector") .mouseover() <div class="codebody" id="code9488">}) <br></script> >

커스텀 이벤트 예시

코드 복사

코드는 다음과 같습니다. <script> </u>$("selector").bind("myClick",function(){//...}) ; //맞춤 이벤트 바인딩 </a>$("selector").trigger ("myClick"); //사용자 정의 이벤트 트리거 </span></script>

$("selector").trigger (type[,data])

매개변수를 전달할 수 있습니다. 배열 형식의 콜백 함수에
P119 예:

코드 복사

코드는 다음과 같습니다. <script> </u>$("#btn").bind("myClick",function(event,message1,message2){ </a>$("#test").append( "<p>" message1 message2 "</p>") </span>}) </div>$("#btn").trigger("myClick" , ["내 맞춤설정", "이벤트"] ); <div class="codebody" id="code58622"></script>


8 기타 사용법

$("selector").bind( "type1 type2",function(){//.. .})
한 번에 여러 이벤트 유형 바인딩
P119 참고할 만한 예

코드 복사

코드는 다음과 같습니다. 다음과 같습니다:

<script> <br>$(function(){ <br>$("div").bind("mouseover mouseout",function(){ <br>$(this).toggleClass( "over"); //클래스 전환 <br>}) <br></script>

$("selector").bind("type.name Space",function(){//...})
관리를 용이하게 하기 위해 여러 이벤트에 대한 이벤트 네임스페이스를 추가합니다. 네임스페이스를 삭제하면 다음과 같이 네임스페이스 아래의 이벤트도 동시에 삭제됩니다.
$(" div").bind("mouseover.plugin",function(){//...})
$("div").bind("click.plugin",function(){ //... })
$("div").unbind(".plugin")
$("selector").trigger("type!")
"!" 네임스페이스의 유형 메소드에 포함되지 않은 일치 항목을 선택하려면