(4)事件处理——(10)事件处理上下文(Event handler context)
来源:互联网 发布:阳春政府网络问政平台 编辑:程序博客网 时间:2024/06/05 03:10
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');
$('#switcher button').removeClass('selected');
$(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的链式能力,在一行代码中用简练的代码实现了添加和移除类。
- (4)事件处理——(10)事件处理上下文(Event handler context)
- 事件处理012(Handler)
- event()函数 事件分发处理函数
- 第七章 Qt事件(event)处理
- #595 – 定义事件处理函数的语法(Syntax Choices for Defining an Event Handler)
- Android 事件处理(—)
- 复杂事件处理(Complex Event Processing)--1. 基本概念:事件,事件关系,事件处理的简单抽象理解
- 在ASP.NET页面中推荐使用覆写(Override)而不是事件处理(Event Handler)
- #501 – 在对个控件中共享事件处理程序(Sharing an Event Handler Across Multiple Controls)
- 复杂事件处理(Complex Event Processing)--3. 复杂事件处理引擎产品
- 复杂事件处理(Complex Event Processing)--5. 复杂事件处理案例分析
- 复杂事件处理(Complex Event Processing)--6. 复杂事件处理总结
- Event---Android事件处理模型一(基于回调机制的事件处理)
- javascript事件处理中Event对象(键盘事件和鼠标事件)实例
- 第七章(序)事件处理-(Event Processingn)
- 7-1 重写事件处理函数(Reimplementing Event Handlers)
- 复杂事件处理(Complex Event Process)--0.开篇
- React中文教程 - Event Handling(事件处理)
- 4.10 优化LIstView: 在listView中复用历史缓存view对象减少内存开销
- javascript(js)中的 substring和substr方法
- php时间函数大锦集
- C51存储器类型与51单片机的物理区域
- 继承中,父类与子类都有静态代码块和构造函数的时执行顺序
- (4)事件处理——(10)事件处理上下文(Event handler context)
- MSP430x2xx的时钟配置
- 数据库设计三大范式
- 聊城大学格创计算机协会干事纳新工作取得圆满成功
- 2013年ie6,ie7,ie8 css bug兼容解决方法集合
- 四阶龙格库塔法
- 我爱的人
- C语言sizeof()函数
- (4)事件处理——(11)更远的巩固(Further consolidation)