[jQuery]jQuery学习笔记(二) – 事件

事件

JavaScript内置了一些对用户的交互和其他事件给予响应的方式。jQuery增强并扩展了基本的事件处理机制。它不仅提供了更加优雅的事件处理语法,而且也极大地增强了事件处理机制。

主要内容:

  • 在页面就绪时执行JavaScript代码;
  • 处理用户事件,比如鼠标单击和按下键盘上的键;
  • 模拟用户发起的事件

在页面加载后执行任务

代码执行的时机选择

通过$(document).ready()注册的事件处理程序会在DOM完全就绪并可以使用时调用。

最好把CSS加载放在js前面。

基于一个页面执行多个脚本

window.onload只能指定一个基于页面加载的函数。而通过$(document).ready()机制能够很好地解决这个问题。每次调用这个方法都会向内部的行为队列中添加一个新函数,当页面加载完成后,所有的函数都会被执行,而且这些函数会按照注册它们的顺序依次执行。(通过window.onload虽然也可以注册多个函数,但却不能保证按顺序执行)

.ready()的简写形式:$()

$()函数为我们提供了一种简写方式。当给它传递一个函数作为参数时,jQuery会隐式调用.ready()。也就是说,对于:

也可以简写成:

向.ready()回调函数中传入参数

在某些情况下,可能有必要在同一个页面中使用多个JavaScript库。由于很多库都使用$标识符,因此就需要一种方式来避免名称冲突。

jQuery提供了一个jQuery.noConflict()方法,调用该方法可以把对$标识符的控制权让渡还给其他库。使用jQuery.noConflick()方法的一般模式如下:

首先,包含jQuery之外的库(这里是Prototype)。然后,包含jQuery库,取得对$的使用权。接着,调用.noConflict()方法让出$,以便将控制权减缓给最先包含的库(Prototype)。这样就可以在自定义脚本中使用两个库了——但是,在需要使用jQuery方法时,必须记住要用jQuery而不是$来调用。

在这种情况下,还有一个在.ready()方法中使用$的技巧。可以给它的回调函数中接收一个参数——jQuery对象本身。利用这个参数,可以重新命名jQuery为$。

或者也可以用简写语法

处理简单的事件

JavaScript中有鼠标单击(onclick)、表单被修改(onchange)等挂钩(hook),为此jQuery也为处理这些事件提供了一种改进的方式。

通过.on()函数绑定事件

我们将编写一个按钮large,并设定其按下后将文章的字体加大。

本段代码中,当挂有ID为#switcher-large的标签按钮被点击后,执行在<body>标签增加一个.large样式类。

简写的事件.click()

.click()可以替代.on(‘click’,function……)

其他blur,keydown和scroll等标准的DOM事件,也存在类似前面这样的简写事件。这些简写的事件方法能够把一个事件处理程序绑定到同名事件上面。

.toggleClass()的使用

当按下某个按钮时,某段文字消失,再按一次,那段文字显示。若要完成这种操作,有一种解决方法是,在点击事件执行时检查文字状态,若文字存在则消失,若文字消失则显示。然而.toggleClass可以自动读取类是否存在,若存在则删除,若不存在则添加。

hidden类定义:

js代码:

事件传播

.hover()的使用

.hover()方法接受两个函数参数。第一个函数会在鼠标指针进入被选择的元素时执行,而第二个函数会在鼠标指针离开该元素时触发。

hover类定义

js代码:

事件流

DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流,微软则实现了冒泡事件流。幸运的是,W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。

事件传播——冒泡与捕获

默认情况下,事件使用冒泡事件流,不使用捕获事件流。然而,在Firefox和Safari里,你可以显式的指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true。

冒泡事件流

当事件在某一DOM元素被触发时,例如用户在客户名字节点上点击鼠标,事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次,直到它遇到依附有该事件类型处理器的节点,此时,该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡,在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法,在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播,事件将一直通过DOM冒泡直至到达文档根。

在jQuery中,有一个能够完全阻止事件冒泡的方法,叫做.stopPropagation()。通过event.stopPropagation()就可以避免其他所有DOM元素响应这个事件。

捕获事件流

事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递。在这个过程中,事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获,如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理;否则,事件会被接着传递给派生元素路径上的下一元素,直至目标元素。事件到达目标元素后,它会接着通过DOM节点再进行冒泡。

事件对象

为了在处理程序中使用事件对象, 需要为函数添加一个参数:

在第2行中的event就是那个事件对象,可以在函数内部读取使用。

比如,在函数中找寻被点击的是不是按钮元素:

关于.is()和.hasClass()

要测试元素是否包含某个类,也可以使用另一个简写方法.hasClass()。不过,.is()方法则更灵活一些,它可以测试任何选择符表达式。

.off()移除事件

#(‘#switcher’).off(‘click’);即移除了click事件。

为事件处理程序添加命名空间

 

.trigger()方法完成模拟事件操作

通过.trigger()方法执行操作:

在读取完DOM后,给#switcher的标签执行一次点击事件。

.keyup()响应键盘事件

键盘事件分为两类:直接对键盘按键给出响应的事件(keyup和keydown)和对文本输入给出响应事件(keypress)。如果想知道用户按了哪个键,应该侦听keyup和keydown事件。如果想知道用户输入的是什么字符,侦听keypress事件。这里我们介绍keyup

通过String.fromCharCode()方法将传入的按键数据转为字符,然后再在triggers数组中寻找其下标。最后找到id后执行click()方法。