除了直接使用事件处理器这种简便的方式 ,我们也可以使用手工绑定事件到元素上的方法 … 用 .on() 可以去绑定指定的事件,同时我们也可以给事件指定一个处理器 … 也就是一个发生事件的时候要执行的那个函数 ..
jQuery 还提供了一个 .off() 方法,它可以关掉绑定在元素上的事件 … 如果你想在元素上绑定一次性的事件 … 可以使用 .one() …. 用这个方法绑定在元素上的事件处理只会被执行一次 …
测试
这个页面我们之前使用 .click() 这个事件处理器,给图像上绑定了一个 click 事件 … 点击图像,会显示或者隐藏标题 … 下面,我们可以使用 on() 的方法去改造一下它 …
把 .click 换成 .on … 在这个方法里,指定一下要绑定的事件的类型 … 这里我们用一个 click 事件 … 后面可以使用同样的函数作为它的参数 … 这个函数就是 click 这个事件的处理函数 …
也就是在 .album 下面的 img 元素上发生 click 事件的时候,要执行的就是这个函数 ….
如果在这里,我们使用了一个 false … 表示绑定的这个 click 事件不做任何事 .. 并且防止默认的行为和事件的传播 … 相当于在这个事件上应用了 stopPropagation() 还有 preventDefault() …
回到浏览器上去试一下 …
同样,点击图像可以切换显示标题 …
.one()
想让这个事件处理器只执行一次,可以使用 one() 方法 … (#js) 打开 on … 换成 one … 表示这是一个一次性的事件 …
回到浏览器 … 点击封面图像 …. 会显示标题 … 不过我们再点击它的时候,标题不会隐藏起来 … 因为我们使用了 one() 的方法绑定的 click 事件 … 所以这个点击事件只会执行一次 …