> 웹 프론트엔드 > JS 튜토리얼 > JQuery 사용자 정의 이벤트 적용 JQuery 모범 사례_jquery

JQuery 사용자 정의 이벤트 적용 JQuery 모범 사례_jquery

WBOY
풀어 주다: 2016-05-16 18:22:19
원래의
885명이 탐색했습니다.

지식 포인트:

1. 사용자 정의 이벤트 및 이벤트 구독

2. 트리거, 바인딩 및 바인딩 해제 방법 사용

3. 네임스페이스 이벤트를 사용한 사용자 정의

txt 문서에 다음 내용을 붙여넣은 뒤, Firebug 콘솔에 직접 붙여넣고 실행해 보세요.

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

/*
JQuery 사용자 정의 이벤트 응용 프로그램 - 자바스크립트 OO
회사 프론트엔드 디자인 부서에 근무하는 잘생긴 남자 레빈이 있는데, 그의 상사는 잘생긴 남자 A이고, 그의 매니저는 예쁜 여자 B이다.
리더들이 매주 이 사람의 작업을 살펴보는 시간을 갖고자 해서요. . .
Levin은 매주 월요일 Google Docs를 사용하여 지난주 작업 요약을 작성해야 하며, 작성을 마친 후 A와 B를 MSN에 알려야 합니다. . .
Levin은 주간 요약을 작성하게 되어 매우 기뻤지만 다음과 같은 제안을 했습니다.
제가 Google 문서에 작성했으므로 읽고 싶으시면 Google 리더를 사용하여 내 문서 업데이트를 구독하실 수 있습니다. 저는 Microsoft의 MSN을 사용하고 싶지 않습니다. . .

여기...A와 B는 몇 초 동안 머리 위에 까마귀가 떠다니는 모습을 보였지만 선뜻 동의했습니다.
*/

//동창 레빈입니다
코드 복사 코드는 다음과 같습니다. 다음:

var Levin={name:"Levin"};
Levin=$(Levin)


//주간 요약 작성 매주
코드 복사 코드는 다음과 같습니다.

Levin.bind("evt_weeklyReport" ,function(evt){
alert(this.name "외쳐: 네! 주간 요약이 작성되었습니다.")


//Supervisor A

코드 복사 코드는 다음과 같습니다.
var A={name:"Handsome Guy A"};

//Levin의 주간 요약을 구독하고 싶어합니다

코드 복사 코드는 다음과 같습니다.
A.rssLevin=function(){
Levin.bind("evt_weeklyReport.fromA",function(evt,data){
alert(A .name ": 나쁘지 않네요. Levin은 꽤 긍정적입니다.) ! ")
})
}
A.rssLevin()

//B

코드 복사 코드는 다음과 같습니다.
var B={name:"Meimei B "};


// Levin의 주간 요약도 구독하고 있습니다

코드 복사 코드는 다음과 같습니다:
B.rssLevin=function (){
Levin.bind("evt_weeklyReport.fromB",function(evt,data){
alert(B. name ": 주간 요약은 나중에 읽을 예정입니다. 먼저 그가 언급한 웹사이트를 살펴보세요.")
B.rssLevin( );



//Levin이 글을 쓸 때마다 주간 요약 후 Google 문서를 사용하여 게시합니다



코드 복사
코드는 다음과 같습니다. Levin.trigger({type:"evt_weeklyReport",site:"http://jb51.net"}); 🎜>
//B매니저는 어느날 갑자기 소후에 갔다가 레빈의 주간요약 구독을 끊었습니다...
[code]
B.unRssLevin=function(){
Alert("저는 부사장이 되기 위해 소후에 갈 예정입니다, 하하")
Levin.unbind( "evt_weeklyReport.fromB")
return true; html]

//B가 직업을 바꿨음에도 불구하고 주간 요약은 아직 제때에 공개되어야 합니다. . .




코드 복사


코드는 다음과 같습니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿