jQuery基础回顾——事件冒泡、移除事件、模拟事件
- 什么是冒泡
在页面上可以有多个事件，也可以多个元素响应同一个事件，假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同事<body>元素上也绑定了click事件，当单击内部<span>元素，即触发<span>元素的click事件，会输出3条记录，这就是由事件冒泡引起的。
示例代码
示例效果
在单击<span>元素的同时，也单击了包含<span>元素的元素<div>和包含<div>元素的<body>，并且每一个元素都会按照特定的顺序响应click事件。
- 事件冒泡引发的问题
事件冒泡可能会引起意料之外的效果，上例中，本来只想触发<span>元素的click事件，然而<div>和<body>元素的click事件也同时被触发了，因此，有必要对事件的作用范围进行限制，当单击<span>时，只触发该元素的click事件，当单击<div>时，只触发<div>元素的click事件。
想要阻止事件冒泡，只需要在对应事件的响应函数里返回 false（ return false;） 即可。
在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件，假设网页上有一个<button>元素，使用以下代码为该元素绑定多个相同的事件。
当单击按钮后，会出现下图所示的效果
示意动画
1、移除按钮元素上以前注册的事件
首先在网页上添加一个移除事件的按钮。
然后为按钮绑定一个事件，jQuery代码如下：
下面来看看off()方法的语法结构：
events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如\”click\”, \”keydown.myPlugin\”, 或者 \”.myPlugin\”.
selector:一个最初传递到.on()事件处理程序附加的选择器。
fn:事件处理程序函数以前附加事件上，或特殊值false.
具体说明如下：
1) 如果没有参数，则删除所有绑定的事件。
2) 如果提供了事件类型作为参数，则只删除该类型的绑定事件。
3) 如果把在绑定时传递的处理函数作为第2/3个参数，则只有这个特定的事件处理函数会被删除。
2、移除<button>元素的其中一个事件
首先需要为这些匿名处理函数指定一个变量，例如下面的jQuery代码：
然后就可以单独删除某一个事件了，jQuery代码如下：
另外，对于只需要触发一次，随后就立即要解除绑定的情况，jQuery提供了一种简写法——one()方法，one()方法可以为元素绑定处理函数，当处理函数出发一次后立即被删除。其语法结构同on()方法类似，使用方法也相同。
- 常用模拟
以上的例子都是用户必须通过单击按钮才能触发click事件，但是有时，需要通过模拟用户操作来达到单击的效果，例如在用户进入页面后，就触发click事件，而不需要用户主动单击。
在jQuery中，可以使用trigger()方法完成模拟操作，例如可以使用下面的代码来触发id为btn的按钮的click事件：
这样，当页面加载完毕后，就会立刻输出想要的效果，也可以直接用简化写法click()，来达到同样的效果。
- 触发自定义事件
trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件，此时传入的参数名为自定义事件的名。
- 传递数据
trigger(type,[data])方法有两个参数，第1个参数是要触发事件的类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递，通常可以通过传递一个参数给回调函数来区分这次事件是代码触发还是用户触发的：
示意
- 执行默认操作
trigger()方法触发事件后，会执行浏览器默认操作。
以上代码不仅会触发<input>元素绑定的focus事件，也会使该元素本身得到焦点（这是浏览器的默认操作）。
如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法——triggerHandler()方法。
该方法只会触发<input>元素上绑定的特定事件，同时取消浏览器对此事件的默认操作，即文本框只触发绑定的focus事件，而不会得到焦点。
若感觉对您有用，可以关注并转发，您的关注是对我莫大的支持！
关注并转发后私信“jQuery基础材料”获取线下资料，包括完整基础资料、chm文档、示例代码及其他参考资料。
上一节：
下一节：
jQuery 自定义动画——animate
自定义动画
使用animate()方法
animate(params,[duration],[easing],[callback])
其中params为希望进行变换的CSS属性列表,以及希望变化到的最终值;
需要特别指出,params中的变量遵循camel(驼峰式)命名方式,例如：paddingLeft不能写成padding_left
params只能是CSS中用数值表示的属性,例如width、top、opacity等，像backgroundColor这样的属性不被animate()支持;
属性值必须加引号,例如：width: \”90%\”,用逗号隔开
duration为持续的时间,三种预定速度之一的字符串(\”slow\”,\”normal\”, or \”fast\”)或表示动画时长的毫秒数值(如：1000)
fast: 快速的
easing为可选参数,通常供动画插件使用,用来控制变化工程的节奏,jQuery中只提供了linear和swing两个值
jQuery 代码:
点击按钮后div元素的几个不同属性一同变化
// 在一个动画中同时应用三种类型的效果
HTML 代码:
相对变化的自定义动画
在params的CSS属性列表中,jQuery还允许使用\”+=\”或者\”-=\”来表示相对变化(多次变化)
让指定元素左右移动
jQuery 代码:
HTML 代码:
另外在CSS属性列表params中,还可以将属性的最终值设置为\”show\”、\”hide\”、\”toggle\”
在600毫秒内切换段落的高度和透明度
jQuery 代码:
用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）
jQuery 代码:
一个使用\”easein\”函数提供不同动画样式的例子。只有使用了插件来提供这个\”easein\”函数，这个参数才起作用。
jQuery 代码:
animate()方法还有另外一种形式
animate(params,options)
其中params与第一种形式完全相同,options为动画的可选参数列表,主要包括duration、easing、callback、queue等。
其中duration、easing、callback与第1种形式完全一样，queue为布尔值，表示当有多个animate()组成jQuery链时,当前
animate()与紧接着的下一个animate()是按顺序执行(true,默认值),还是同时触发(false);
动画效果的触发程序
jQuery代码:
HTML代码:
delay(duration,[queueName])
设置一个延时来推迟执行队列中之后的项目。
jQuery代码:
HTML代码:
实例: delay特效
页面滚动到顶部的效果
实例: 返回顶部
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
