分類  >  Web前端 >

(四)事件處理——(10)事件處理上下文(Event handler context)

tags:    時間:2013-12-09 23:37:51
(4)事件處理——(10)事件處理上下文(Event handler context)

Our switcher is behaving correctly, but we are not giving the user any feedback about which button is currently active. Our approach for handling this will be to apply the selectedclass to the button when it is clicked, and remove this class from the other buttons. The selectedclass simply makes the button's text bold:

.selected {font-weight: bold;}
我們的切換器表現的很好,但是我們沒有給用戶任何關於哪一個按鈕目前是激活的反饋。我們解決這件事的方法是當按鈕被點擊后,為按鈕添加一個selected類,然後移除其他按鈕上的這個類。selected類可以讓按鈕的文字變粗:
.selected {font-weight: bold;}

We could accomplish the preceding class modification by referring to each button by ID and applying or removing classes as necessary, but instead we'll explore a more elegant and scalable solution that exploits the contextin which event handlers run.

我們可以通過ID引用到每一個按鈕,然後實現對之前的類的修改,必要時可以修改其他類和移除類,但是我們將探索一種更加強大和可擴展的解決方案——採用事件處理器的上下文。
When any event handler is triggered, the keyword thisrefers to the DOM element to which the behavior was attached. Earlier we noted that the $()function could take a DOM element as its argument; this is one of the key reasons that facility is available. By writing $(this)within the event handler, we create a jQuery object corresponding to the element, and can act on it just as if we had located it with a CSS selector.

當事件處理器被觸發以後,關鍵詞this會指向行為被附加的DOM元素。之前,我們說過,$()可以使用DOM元素作為他的參數,這就是這種能力可以使用的關鍵因素之一。通過在事件處理器中書寫$(this),我們創建了一個相應的jquery對象,然後可以像我們使用css選擇器定位了他一樣來在上面添加行為。

With this in mind, we can write the following code snippet:

$(this).addClass('selected');

Placing this line in each of the three handlers will add the class when a button is clicked. To remove the class from the other buttons, we can take advantage of jQuery's implicit iteration feature, and write the following code snippet:

$('#switcher button').removeClass('selected');

This line removes the class from every button inside the style switcher.

在知道這一點以後,我們可以寫出下面這樣的代碼片段:
$(this).addClass('selected');
把這行代碼放在這三個處理器的每一個中,將會在按鈕被點擊以後添加上這個類。為了移除其他按鈕的這個類,我們可以藉助jquery的隱式迭代的特點,寫下下面這樣的代碼段:
$('#switcher button').removeClass('selected');
這行將會移除風格切換器內部的每一個按鈕的類。
We should also add the class to the Defaultbutton when the document is ready. So, placing these in the correct order, we have the following code snippet:

$(document).ready(function() { $('#switcher-default') .addClass('selected') .bind('click', function() { $('body').removeClass('narrow'); $('body').removeClass('large'); $('#switcher button').removeClass('selected'); $(this).addClass('selected'); }); $('#switcher-narrow').bind('click', function() { $('body').addClass('narrow'); $('body').removeClass('large'); $('#switcher button').removeClass('selected'); $(this).addClass('selected'); }); $('#switcher-large').bind('click', function() { $('body').removeClass('narrow'); $('body').addClass('large'); $('#switcher button').removeClass('selected'); $(this).addClass('selected'); }); });
我們也可以在文檔模型可以使用的時候為默認按鈕添加這個類。因此,將這些代碼以正確的順序排列,我們將有下面的代碼片段:

同上,代碼片段。

Now the style switcher gives appropriate feedback.

現在風格切換器有了正確的反饋。

Generalizing the statements by using the handler context allows us to be yet more efficient. We can factor the highlighting routine out into a separate handler, as shown in Listing 3.4, because it is the same for all three buttons:

$(document).ready(function() { $('#switcher-default') .addClass('selected') .bind('click', function() { $('body').removeClass('narrow').removeClass('large'); }); $('#switcher-narrow').bind('click', function() { $('body').addClass('narrow').removeClass('large'); }); $('#switcher-large').bind('click', function() { $('body').removeClass('narrow').addClass('large'); }); $('#switcher button').bind('click', function() { $('#switcher button').removeClass('selected'); $(this).addClass('selected'); }); });

通過使用事件處理上下文來實現語句,讓我們變的更加高效。我們可以吧高亮的功能拆分到不同的處理器中,正如在li s t3.4中展示的那樣。因為這對所有的三個按鈕來說是相同的。

代碼同上。

This optimization takes advantage of three jQuery features we have discussed. First, implicit iterationis, once again, useful when we bind the same clickhandler to each button with a single call to .bind(). Second, behavior queuingallows us to bind two functions to the same click event, without the second overwriting the first. Lastly, we're using jQuery's chainingcapabilities to collapse the adding and removing of classes into a single line of code each time.

這種優化方法使用了我們討論過的三個jquery特點的優勢。首先,在一次,我們使用隱式繼承,當我們單單調用.bind()來為每一個按鈕綁定click事件的時候,這是很有用的。第二,行為序列按我們在同一個點擊事件上綁定了兩個函數,而不會擔心第二個函數會吧第一個覆蓋。最後,我們使用了jquery的鏈式能力,在一行代碼中用簡練的代碼實現了添加和移除類。

推薦閱讀文章

Bookmark the permalink ,來源:互聯網