jQuery에서 on 메소드는 이벤트를 요소에 바인딩할 수 있고, Trigger 메소드는 이벤트를 수동으로 트리거할 수 있습니다. 이 두 가지 메소드를 중심으로 jQuery의 Observer Pattern을 경험해 보겠습니다. ■ on 메소드는 내장된 이벤트를 바인딩하여 자연스럽게 트리거합니다 예를 들어 페이지의 본문 요소에 클릭 이벤트를 바인딩하는 경우 다음과 같이 작성합니다. 코드 복사 코드는 다음과 같습니다. <br> $(function() {<br> $('body').on('클릭', 함수 () {<br> console.log('클릭했습니다~~');<br> });<br> }); <br> </머리><br> <br> <h1>안녕하세요</h1><br> </본문><br> <br> </div> 위에서는 본문을 클릭해야만 클릭 이벤트를 실행할 수 있습니다. 즉, 내장 이벤트가 페이지 요소에 바인딩되면 내장 이벤트가 발생하는 순간 이벤트가 트리거됩니다. <p> </p> <p>■ on 메소드는 내장 이벤트를 바인딩하고 수동으로 트리거합니다. <strong></strong> </p>트리거 메소드를 사용하면 요소에 바인딩된 내장 이벤트를 수동으로 트리거할 수도 있습니다. <p> </p> <script src="Scripts/jquery-2.1.1.min.js"> <br> $(function() {<br> $('body').on('클릭', 함수 () {<br> console.log('클릭했습니다~~');<br> });<br> $('body').trigger('click');<br> }); <br> 위에서는 본문을 클릭할 필요가 없으며 페이지가 로드된 후 본문이 자동으로 클릭 이벤트를 트리거합니다. <br> <br></p>■ on 메소드는 맞춤 이벤트를 바인딩하고 수동으로 트리거합니다. <p><strong> </strong>클릭은 jquery에 내장된 이벤트라는 것을 알고 있습니다. 그렇다면 이벤트를 수동으로 맞춤설정하고 실행할 수 있나요? </p> <p></p> <p></p> <div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="64015" class="copybut" id="copybut64015" onclick="doCopy('code64015')"><u></u> 코드는 다음과 같습니다.</a></span></div> <script src="Scripts/jquery-2.1.1.min.js"> <br> $(function() {<br> $('body').on('someclick', function () {<br> console.log('클릭했습니다~~');<br> });<br> $('body').trigger('someclick');<br> }); <br> <br> <p> 위에서는 someclick 이벤트를 커스터마이징했는데, 결과는 위와 같습니다. </p> <p>그래서 우리는 맞춤 이벤트를 요소에 바인딩하고 트리거 메소드를 사용하여 이벤트를 트리거할 수 있다는 것을 알았습니다. </p> <p>물론, 맞춤 이벤트 이름은 app.someclick과 같은 "namespace.custom 이벤트 이름" 형식으로 작성할 수 있습니다. 이는 맞춤 이벤트 이름 충돌을 효과적으로 방지할 수 있는 대규모 프로젝트에서 특히 유용합니다. </p> <p>'게시 및 구독' 관점에서 on 방식은 구독자 및 관찰자에 해당하고, 트리거 방식은 게시자에 해당합니다. </p> <p><strong>■ "비동기적으로 json 데이터 가져오기"에서 jQuery 관찰자 모드를 경험해 보세요. </strong></p> <p>루트 디렉터리에 data.json 파일이 있습니다. </p> <p>{<br> "one" : "안녕하세요",<br> "둘" : "세계"<br> }<br> 이제 비동기적으로 json 데이터를 가져옵니다. </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="41989" class="copybut" id="copybut41989" onclick="doCopy('code41989')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code41989"> <br> <script src="Scripts/jquery-2.1.1.min.js"> <br> $(함수 () {<br> $.getJSON('data.json', function(data) {<br> console.log(데이터);<br> });<br> }); <br> <br> </div> <p> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201412/2014122214370930.png" class="lazy" alt=""> </p>비동기적으로 획득한 json 데이터를 받기 위해 전역 변수를 사용하는 경우. <p> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="81510" class="copybut" id="copybut81510" onclick="doCopy('code81510')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code81510"> <script src="Scripts/jquery-2.1.1.min.js"> <br> $(함수 () {<br> var 데이터;<br> $.getJSON('data.json', function(results) {<br> 데이터 = 결과;<br> });<br> console.log(데이터);<br> }); <br> <br><br> </div> <p> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201412/2014122214370931.png" class="lazy" alt="">이번에 얻은 결과는 정의되지 않았습니다. 왜 그렇습니까? </p> --$.getJSON 메소드가 여전히 데이터를 가져오는 동안 console.log(data)가 실행되었으며 현재로서는 data에 데이터가 없기 때문입니다. <p> <br>이 문제를 어떻게 해결하나요? </p> --$.getJSON 메소드 외에 실행해야 할 메소드를 먼저 정의한 뒤 실제로 $.getJSON 메소드의 콜백 함수에서 이 메소드를 트리거하면 해결되지 않을까요? <p> <br></p> <p></p> <div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="62947" class="copybut" id="copybut62947" onclick="doCopy('code62947')"><u></u> 코드는 다음과 같습니다.</a></span></div> <script src="Scripts/jquery-2.1.1.min.js"> <br> $(함수 () {<br> $.getJSON('data.json', function(results) {<br> $(document).trigger('app.myevent', results) //게시와 동일 <br> });<br> $(document).on('app.myevent', function(e, results) { //구독과 동일<br> console.log(결과);<br> });<br> }); <br> <br> <p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201412/2014122214371032.png" class="lazy" alt=""></p> <p> 위에서 on 메소드는 맞춤 이벤트 app.myevent를 구독하는 구독자와 비슷하며, 트리거 메소드는 구독자 메소드가 실제로 실행되기 전에 이벤트와 매개변수를 게시하는 게시자와 같습니다. </p> <p>■ jQuery 관찰자 패턴의 확장 방법</p> <p>이를 위해 특별히 jQuery 관찰자 패턴을 위한 확장 메서드를 작성할 수도 있습니다. </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="45194" class="copybut" id="copybut45194" onclick="doCopy('code45194')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code45194"> <br> <script src="Scripts/jquery-2.1.1.min.js"> <br> $(함수 () {<br> $.getJSON('data.json', 함수(결과) {<br> $.publish('app.myevent', 결과);<br> });<br> $.subscribe('app.myevent', 함수(예, 결과) {<br> console.log(결과);<br> });<br> });<br> (함수($) {<br> var o = $({});//맞춤 이벤트 객체<br> $.each({<br> 트리거: '게시',<br> on: '구독',<br> 끄기: '구독 취소'<br> }, 함수(키, 값) {<br> jQuery[val] = 함수() {<br> o[키].apply(o, 인수);<br> };<br> });<br> })(jQuery);<br> <br> </div> <p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201412/2014122214371033.png" class="lazy" alt=""></p> <p>위에서는 언제든지 호출할 수 있는 전역 게시 및 구독 메서드를 정의합니다. </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="71897" class="copybut" id="copybut71897" onclick="doCopy('code71897')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code71897"> <br> <script src="Scripts/jquery-2.1.1.min.js"> <br> $(함수 () {<br> $.getJSON('data.json', 함수(결과) {<br> $.publish('app.myevent', 결과);<br> });<br> $.subscribe('app.myevent', 함수(e, 결과) {<br> $('body').html(<br> 결과.하나<br> );<br> });<br> });<br> </div> <p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201412/2014122214371034.png" class="lazy" alt=""></p> <p>요약: jQuery의 관찰자 모드에서는 실제로 이벤트를 트리거하는 데 트리거 메서드가 사용될 때까지 on 메서드에 바인딩된 맞춤 이벤트가 실행되지 않도록 허용합니다. jQuery의 관찰자 패턴을 사용하면 한 번 게시하고 여러 번 구독할 수 있다는 이점이 있습니다. </p> </div> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
