jQuery 事件绑定插件

1. 单事件注册

jQuery 提供了方便的事件注册机制，优缺点如下：

• 优点：操作简单，且不用担心事件覆盖等问题
• 缺点：普通的事件注册不能做事件委托，且无法实现事件解绑

语法：element.事件(function(){})

例：$("div").click(function(){事件处理程序})

其他事件和原生基本一致

---

2. 多事件注册 on()

与普通绑定事件的方法相比，该方法有三大优势：

优势一：可以绑定多个事件，多个处理事件处理程序

• 多个行为触发不同的事件：

  元素.on({ 事件1: function(){}, 事件2: function(){}});

• 多个行为都触发相同的事件：

  元素.on("事件1 事件2", function(){});

$("div").on("mouseenter mouseleave", function() {
	$(this).toggleClass("current");
});

---

优势二：可以事件委派操作

事件委派：把原来加给子元素身上的事件綁定在父元素身上，就是把事件委派给父元素

语法：$("父元素").on("事件", "子元素", function(){});

$("ul").on("click", "li", function() {
	alert(66);
});

---

优势三：可以给动态生成的元素绑定事件

普通注册方式没有办法给后来动态创建的元素绑定事件

$("ol").on("click", "li", function() {
    alert(11);
});  // 先注册事件，后来再动态创建元素，也可以执行操作
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);

---

3. 解绑事件 off()

• 解绑所有：$("元素").off();
• 解绑指定：$("元素").off("事件");
• 解绑事件委托：$("父元素").off("事件", "子元素");

注意：如果有的事件只想触发一次，可以使用 one() 来绑定事件

---

4. 自动触发事件

事件能够自动触发，比如：轮播图自动播放跟点击右侧按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发

有三种方法都可以实现指定事件自动触发一次：

1. element.事件()（简写）
2. element.trigger("事件")（前两种效果相同）
3. element.triggerHandler("事件")（不会触发事件默认行为）

注意：第三种方法仅自定义的行为可以执行

---

5. 事件对象

事件被触发，就会有事件对象的产生

jQuery 对 DOM 中的事件对象 e（event） 进行了封装，兼容性更好，获取更方便，使用变化不大

语法：元素.click(function(e){})

阻止默认行为：e.preventDefault() 或 return 0

阻止冒泡：e.stopPropagation()

注意：jQuery中的 e 对象使用，可以借鉴 API 和 DOM 中的 e

---

6. 拷贝对象

浅拷贝：目标对象沿用相同的对象地址，修改里面的对象会一同影响

深拷贝：完全克隆，修改里面的对象不会影响被拷贝对象

规则：如果相同的属性则覆盖属性值，不相同的都保留

语法：$.extend([deep], target, object, [objectN...])

• deep：深拷贝 true，默认浅拷贝 false
• target：要拷贝的目标对象
• object：待拷贝到第一个对象的对象（可多个）

---

7. jQuery 多库共存

实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为jQuery 多库共存

• 把 $ 符号統一改为 jQuery 比如：jQuery("div")
• jQuery 变量设置新名称：var 新名称 = $.noConflict()

---

8. jQuery 插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成

这些插件是依赖于jQuery来完成的，所以需要先引入 jQuery文件，因此也称为 jQuery 插件

jQuery 插件常用的网站：

• jQuery 插件库
• jQuery 之家

jQuery 插件使用步骤：

1. 引入相关文件（jQuery 文件 和 插件文件）
2. 复制相关 html 、 css、 JS（调用插件）

---

8.1 瀑布流插件

网址：Pinterest Grid

使用：引入 html 、 css、 JS

注意：有的简单插件只需引入 html 和 js，甚至只需引入 js

总结：jQuery 插件就是引入别人写好的结构（有时引入部分，读懂后可修改部分）

---

8.2 图片懒加载插件

网址：EasyLazyload.js

概念：当页面滑动到有图的位置，图才进行加载，以提升页面打开的速度及用户体验

注意：只需引入html 和 js（须写到结构的下面） 即可，此插件不涉及 css

---

8.3 全屏滚动插件

全屏滚动插件比较大，所以，一般大型插件都会有帮助文档，或者网站

介绍较详细的网站为：fullPage.js

---

8.4 bootstrap组件

Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式布局，使得 Web 开发更加方便快捷

<!-- Bootstrap css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

<!-- jQuery js -->
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<!-- Bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

---