jquery_jquery의 이벤트 처리에 대한 자세한 소개

1. 페이지 로딩 완료 응답 이벤트
페이지 로딩이 완료되었다는 것은 DOM 요소가 로딩되어 읽기 및 동작이 가능하다는 의미입니다.
jQuery의 ①$(document).ready() 이벤트
ready(fn)는 jQuery 이벤트 모듈에서 가장 중요한 함수입니다. 이 방법은 window.onload 등록 이벤트의 대안으로 볼 수 있습니다. 이 방법을 사용하면 DOM이 로드되는 즉시 바인딩된 함수를 호출할 수 있으며, 그 순간 거의 모든 javaScript 함수가 실행되어야 합니다.
ready(fn) 반환값: Object Parameter -fn: Parameter DOM이 로드될 때 실행될 함수입니다.
그리고 아주 간단한 약어인 $를 가지고 있습니다. (document).ready(function(){}) => $(function(){})
②window.onload() 이벤트와 $(document).ready() 이벤트 비교
window .onload ()=function(){}
window.onload()를 여러 개 사용하는 경우 마지막으로 바인딩된 함수만 실행할 수 있으며, 이전 window.onload() 바인딩된 함수를 모두 덮어쓰게 됩니다.
$()를 여러개 사용하면 모두 실행 가능합니다.
body 태그의 onload 이벤트가 이미 함수를 등록한 경우 $() 이벤트로 등록된 함수는 실행되지 않는다는 점에 유의하세요.

2 . 바인딩 방지 이벤트 리스너
①바인딩 이벤트
⑴bind(type,[data],fn) 함수
는 특정 요소의 이벤트에 함수를 바인딩하는 것입니다 $( "#id ").click(function(){})은 익명 함수를 id 요소의 클릭 이벤트에 바인딩하는 것입니다
그러나 위의 예는 간단하고 일반적으로 사용되는 이벤트 바인딩이므로 실제로는 약어일 뿐입니다. 형식적인 쓰기는 다음과 같아야 합니다:
$("#id").bind("click",[data],function(){})
bind(type,[data],fn) 반환 값: 객체 매개변수 -type: 이벤트 유형 문자열 데이터: 선택 사항, 후속 fn의 실제 매개변수에 event.data 속성 값으로 전달됨 객체 fn: 이벤트에 바인딩된 함수 함수
⑵ 처리 함수에 대한 매개변수 전달
사용됨 여기서 바인딩() 함수의 두 번째 매개변수와 event.data 속성은 fn 함수에 전달되는 매개변수입니다

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

$("#Text2").bind("click",{ 첫 번째:"1",두 번째:" 2"},function(event){
if(event.data.first=="1"){$(this).val("환영합니다")}
if(event.data.second= ="1"){$(this).val("")}
})
})

두 번째 매개변수는 json 객체, fn 함수에서 event.data를 통해 키 이름을 통해 매개변수 값을 얻습니다
⑶브라우저의 기본 동작 방지
bind로 묶인 함수가 이때 브라우저의 기본 동작과 충돌하는 경우가 있습니다. 브라우저의 기본 동작을 방지하려면

코드를 복사하세요. 코드는 다음과 같습니다. :

$(" form").bind("submit",function(){return false;})

②Anti-bound 이벤트
는 요소에서 이벤트 바인딩 해제 Function
unbind([type],[fn name]) 반환 값: 개체 매개 변수 -type: 이벤트 유형 문자열 fn 이름: 바인딩 해제할 함수 이름 Function
위 두 매개 변수는 선택 사항입니다. 매개변수 if 매개변수가 비어 있으면 일치하는 모든 요소의 모든 이벤트를 바인딩 해제하는 기능입니다

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

$(function(){$("#btn1").click(function(){
$("input[type=text]").unbind()} )
})

btn1 클릭 후 type=text text box의 이벤트에 바인딩된 모든 함수 바인딩 해제
③일회성 이벤트 바인딩
은 특정 요소의 이벤트에 대한 것 바인딩된 함수는 한 번만 실행할 수 있습니다.
one(type,[data],fn) 반환 값: 개체 매개변수 -type: 이벤트 유형 문자열 데이터: 선택 사항, event.data 속성 값으로 후속 fn에 전달 실제 매개변수 객체 fn: 이벤트에 바인딩된 함수
는 바인딩() 함수와 동일한 방식으로 사용됩니다. 차이점은 하나의 fn은 한 번만 실행될 수 있다는 것입니다.

3. 이벤트 트리거
위에 바인딩된 일부 함수는 실행되기 전에 사용자가 특정 작업을 수행해야 합니다. 사용자가 해당 버튼을 클릭하면 실행됩니다. 그러나 이벤트 트리거는 코드를 사용하여 사용자 작업을 시뮬레이션한 다음 사용자가 특정 작업을 수행하지 않고도 이벤트에 바인딩된 함수를 실행할 수 있습니다.
trigger(type,[data]) 반환 값: 개체 매개 변수 -type: 이벤트 유형 문자열 데이터: 선택 사항, 실제 매개 변수로 전달됨 트리거된 이벤트에 바인딩된 함수의 배열(javascript 배열)이 트리거됨 모든 함수가 바인딩됨 이 유형의 이벤트가 브라우저의 기본 작업과 충돌하면 이벤트 트리거가 브라우저의 기본 작업을 실행합니다.

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

$(function(){$("#Text1").bind("click",function(){$(this).val("")})})
$(function(){$( " #Text2").click(function(event,pamas1,pamas2)
{$(this).val("트리거 이벤트 트리거" pamas1 pamas2)})
})
$(function( ){ $("input[type=text]").trigger("click",["1","2"])})

위 코드는 두 개의 텍스트 상자에 대한 것이지만 클릭 이벤트는 함수에 바인딩되어 있지만 코드의 마지막 줄은 이 두 텍스트 상자의 클릭 이벤트에 대한 트리거도 설정하므로 사용자가 해당 텍스트 상자를 클릭하지 않고도 클릭 이벤트에 바인딩된 함수를 실행할 수 있습니다. 또한 트리거는 트리거하는 함수에 매개변수를 전달하는데, 이는 Text2의 클릭 기능에서 얻은 매개변수를 볼 수 있습니다.
트리거 함수에 의해 트리거된 이벤트가 브라우저의 기본 작업과 충돌하는 경우 이벤트 트리거는 브라우저의 기본 작업을 실행하고, TriggerHandler 함수는 브라우저의 기본 작업을 실행하지 않습니다.
triggerHandler(type,[data])는 트리거 사용과 일치합니다


4. 이벤트의 대화형 처리 ①hover: 마우스 호버 흉내내기
hover(over , out) 반환값: 객체 매개변수 -over: 요소 위로 마우스를 이동할 때 발생하는 함수 out: 마우스가 요소 밖으로 나갈 때 발생하는 함수

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

사용자 입력 결정
$(function(){$("#hover1").hover(function(){
$("#hoverpd").show( );},function( ){
$("#hoverpd").hide();})
})

②toggle: 여러 번의 클릭에 대한 루프 응답
for 일치하는 요소 클릭 이벤트는 요소를 계속 클릭할 때 루프에서 실행되는 많은 바인딩 기능을 추가합니다.
toggle(fn1,fn2,fn3...) 반환 값: 개체 매개변수 -fn1,fn2,fn3.. . 루프되는 함수 함수

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

<입력 유형 =" 버튼" id="toggle1" value="toggle"/>
var i=0
$(function(){$("#toggle1").toggle(function(){i ; $( "#hover1").val(i)},
function(){i=i 2;$("#hover1").val(i)})
})

5.jQuery 내장 이벤트 유형 ①jQuery 내장 이벤트 함수의 두 가지 선언 방법
매개변수가 없는 이벤트 함수 - 이벤트 유형 이름()은 사용자 작업을 시뮬레이션합니다
매개변수가 있는 이벤트 함수 - 이벤트 유형 이름(이벤트 함수)
$($("#id").click(function(){})) 매개변수가 있는 이벤트 함수
$($("#id ") .click(function(){}); $("#id").click();) 매개변수가 없는 이벤트 함수 - #id를 클릭하지 않아도 해당 함수가 실행되어 사용자 조작을 시뮬레이션합니다.
②JQuery 구축 -이벤트 유형 분류
⑴브라우저 관련 이벤트
error(fn) 일치하는 요소에 오류가 발생하면 특정 기능이 실행됩니다. 오류 이벤트에 대한 기준은 없습니다. 이미지의 오류 이벤트가 트리거됩니다
load(fn) 일치하는 요소가 로드된 후 특정 함수가 트리거됩니다. 예를 들어 모든 DOM 객체가 로드된 후에 window가 트리거되고 단일 요소가 로드된 후에 다른 개별 요소가 트리거됩니다. 요소가 로드됩니다.
unload(fn)
resize(fn) 일치 요소의 크기가 변경될 때 함수가 실행됩니다.
scroll(fn) 스크롤 막대가 변경될 때 실행됩니다.
⑵ 양식 관련 이벤트
change(fn)는 일치하는 요소가 포커스를 잃을 때 트리거되고 요소가 포커스를 얻은 후에도 트리거됩니다.
select(fn) 사용자가 텍스트 상자에서 텍스트를 선택할 때 트리거됩니다
submit( fn) 양식이 제출될 때 트리거됩니다.
⑶키보드 조작 관련 이벤트
keydown(fn) 키보드가 눌렸을 때 트리거됩니다.
keypress(fn) 트리거 순서는 keydown->keyup->keypress입니다
keyup(fn) 키보드를 누르고 팝업 시 트리거 시퀀스는 keydown->keyup->keypress
keyup(fn) 키보드가 팝업될 때 트리거
⑷마우스 조작 관련 이벤트
click(fn) 순서는 mousedown->mouseup->click
mousedown(fn)
mouseup(fn)
dblclick(fn)
mouseover(fn)
mouseout( fn)
mousemove(fn)는 일치하는 요소를 이동할 때 트리거됩니다. 이벤트 핸들러 함수는 이벤트 개체(clientX, clientY 속성은 마우스 좌표를 나타냄) 변수로 전달됩니다.
⑸인터페이스는 관련 이벤트를 표시합니다.
blur(fn) 일치하는 요소가 마우스 또는 Tab 키로 포커스를 잃을 때 트리거됩니다
focus(fn)