'날카로운 jQuery'4. jQuery의 사건

title: 예리한 jQuery 4, jQuery 이벤트date: 2017-07-06 08:53:57 tags: 예리한 jQuery
DOM 로드
jQuery에서 $(document).ready() 방법이 실행되었을 때 DOM이 불러왔습니다. 이 방법으로 window.onload 방법을 대체하면 웹 응용 프로그램의 응답 속도를 크게 높일 수 있습니다.
이 방법의 또 다른 쓰기 방법은 $(function(){})이다.
이벤트 바인딩bind()를 사용하여 이벤트 귀속을 진행합니다.형식은 bind( type,[data],fn )입니다.
첫 번째 파라미터는 이벤트 형식입니다. 추가할 필요가 없습니다. on두 번째 파라미터는 선택할 수 있는 파라미터로 이벤트 대상에게 전달되는 추가 데이터 대상이다.
세 번째 매개 변수는 이벤트 처리 함수다.

$('#box').bind('click',function(){
    
})

또 약자 방식이 하나 있다

$('#box').click(function(){
    
})

bind()는 한 요소에 여러 이벤트를 연결할 수 있다. $('#box').bind('mouseover mouseout',function(){}).
작성 이벤트
hover()
커서 롤오버 이벤트를 시뮬레이션하는 데 사용되는 형식은 hover(enter,leave)입니다. 커서가 요소 위로 이동하면 지정된 첫 번째 함수가 트리거되고 커서가 요소 밖으로 이동하면 지정된 두 번째 함수가 트리거됩니다.

$('#box').hover(function(){
    //     
},function(){
    //     
})

toggle()
마우스의 연속 클릭 이벤트를 시뮬레이션하는 데 사용됩니다. 형식은 toggle(fn1,fn2...fnN)입니다. 첫 번째 단일 기기에서 지정한 첫 번째 함수를 터치하고, 같은 요소를 눌렀을 때 두 번째 함수를 터치합니다. 더 많은 함수가 있으면 마지막 함수까지 차례로 터치하고, 그 다음에 매번 단일 기기에서 이 몇 개의 함수에 대한 번갈아 호출을 반복합니다.

$('#box').toggle(function(){
    //      
},function(){
    //      
},function(){
    //      ，           
})

이 방법은 또 다른 용법이 있는데 원소의 가시 상태를 전환할 수 있다. 만약에 원소가 보이면 숨기고 숨기면 숨기는 것이다.

$('#box').toggle(function(){
    $(this).next().toggle();
},function(){
    $(this).next().toggle();
})

사건이 터지다
사건 대상의 stopPropagation() 방법을 통해 사건의 거품을 막다.

$('span').bind('click',function(event){
    event.stopPropagation();
})

jQuery에서는 이벤트 캡처가 지원되지 않습니다.
기본 비헤이비어 차단
이벤트 대상preventDefault() 방법을 통해 요소의 기본 행동을 막습니다.
때때로 요소의 기본 행동을 막아야 한다. 예를 들어 링크의 이동을 막고 폼의 제출을 막아야 한다. 이럴 때 이 방법을 사용해야 한다.

$('span').bind('click',function(event){
    event.preventDefault();
})

거품을 막아야 할 뿐만 아니라 기본 행동도 막아야 한다면 이벤트 처리 함수에 return false로 간략하게 쓸 수 있다.
이벤트 객체의 속성
jQuery는 이벤트 대상을 봉인했습니다. 호환성에 문제가 없습니다. 다음은 자주 사용하는 몇 가지 속성을 소개합니다
event.type
이 방법의 역할은 이벤트의 유형을 얻을 수 있는 것이다

$('#box').click(function(event){
    console.log(event.type)   //   'click'
})

event.preventDefault()
기본 이벤트 비헤이비어 차단
event.stopPropagation()
사건의 거품 행위를 막다
event.target
이벤트를 트리거하는 요소 가져오기

$('#box').click(function(event){
    console.log(event.target)   //     $('#box')  
})

event.reatedTarget
예를 들어 mouseover와 mouseout 이벤트 발생과 관련된 요소를 얻고mouseout에 대해 event.relatedtarget 들어갈 페이지 요소를 가리킨다.mouseover는 방금 스쳐 지나간 페이지 요소를 가리킨다.event.target와의 차이는 하나는 사건을 촉발하는 주체 요소이고 하나는 과도적인 사건이 존재하는 관련 주체 중 하나이다.
event.pargeX 및 이벤트pageY
페이지에 대한 커서의 x 및 y 좌표를 가져옵니다.
event.which
마우스 클릭 이벤트에서 마우스 왼쪽, 중간, 오른쪽 단추를 얻고 키보드 관련 이벤트에서 키보드 키를 받습니다.

$('#box').mousedown(function(event){
    console.log(event.which)   // 1=      2=      3=    
})

$('#box').keydown(function(event){
    console.log(event.which)   //          
})

event.metaKey
키보드 이벤트에서 ctrl 키를 가져옵니다.
이벤트 제거unbind() 방법으로 원소를 제거하는 방법unbind([type],[data])첫 번째 매개변수는 이벤트 유형이고, 두 번째 매개변수는 제거할 함수입니다.
매개 변수가 없으면 모든 귀속 이벤트 삭제
이벤트 형식을 매개 변수로 제공하면, 이 유형의 귀속 이벤트만 삭제합니다.
귀속할 때 전달되는 처리 함수를 두 번째 인자로 삼으면 이 특정한 이벤트 처리 함수만 삭제됩니다.

$('#box').bind('click',fun1 = function(){
    //         
})

$('#btn').click(function(){
    $('#box').unbind('click',fun1);   //       fun1  
})

또한 jQuery는 이벤트 처리 함수를 한 번 터치하면 바로 삭제하는 간략한 방법을 제공했다. 바로 one() 방법으로 사용 방법은 bind()와 같다.
시뮬레이션 조작
상용 시뮬레이션
이상의 이벤트는 사용자가 조작해야만 촉발할 수 있으며 jQuery에서는 사용자의 조작을 모의할 수 있으며 trigger() 방법으로 모의 조작을 완성할 수 있다.$('#btn').trigger('click'); 이렇게 하면 클릭 이벤트를 모의할 수도 있고 간단하게 $('#btn').click();라고 쓸 수도 있다.trigger(type,[data]) 방법은 두 개의 매개 변수가 있는데 첫 번째 매개 변수는 출발하는 이벤트 유형이고 두 번째 매개 변수는 이벤트 처리 함수에 전달되는 부가 데이터로 수조 형식으로 전달된다.일반적으로 하나의 매개 변수를 리셋 함수에 전달함으로써 이번 사건이 코드가 촉발한 것인지 사용자가 촉발한 것인지를 구별할 수 있다.

$('#btn').click(function(event,msg1,msg2){
    alert(msg1 + msg2);     //        12,
})

$('#btn').trigger('click',['1','2'])

trigger() 방법에는 문제가 하나 있다. 바로 이벤트를 촉발하는 브라우저의 기본 행위이다. 예를 들어 $('input').trigger('focus');, 나는 폼의 focus 이벤트 처리 함수를 촉발하고 싶지만 정말로 폼에 초점을 주고 싶지 않다. 이때 triggerHandler() 방법을 사용할 수 있다$('input').triggerHandler('focus');. 이렇게 하면 폼의 초점을 얻는 처리 함수를 촉발할 뿐만 아니라 폼에 초점을 주지 않는다.
이벤트의 네임스페이스
원소에 연결된 여러 이벤트 형식을 명명 공간으로 규범화할 수 있습니다.

$('#box').bind('click.plugin',function(){
    
})

$('#box').bind('mouseover.plugin',function(){
    
})

$('#box').bind('dbclick',function(){
    
})

$('#btn').click(function(){
    $('#box').unbind('.plugin');     //   $('#box')    .plugin       
})

이렇게 하면 네임스페이스가 추가된 후 이벤트를 삭제할 때 지정한 네임스페이스만 삭제하면 됩니다. 네임스페이스가 지정되지 않은 이벤트는 삭제되지 않습니다.
명명 공간은 원소가 같은 이벤트 형식을 연결한 다음에 명명 공간에 따라 필요에 따라 호출할 수 있는 다른 방법도 있다.

$('#box').bind('click',function(){
    
})

$('#box').bind('click.pligin',function(){
    
})

$('#btn').click(function(){
    $('#box').trigger('click!');
})

$('#box')를 클릭하면 click 이벤트와 click.plugin 이벤트가 동시에 터치됩니다.$('#btn') 요소를 클릭하면 click 이벤트만 터치합니다. trigger('click!');의 느낌표는 명명 공간이 포함되지 않은 모든 방법과 일치하기 때문입니다.