jQuery事件
下面从6个方面介绍jQuery事件：
- jQuery事件注册
- jQuery事件处理
- jQuery事件对象
- jQuery拷贝对象
- 多库共存
- jQuery插件
1. jQuery事件注册
单个事件注册：
语法：
element.事件(function() {}) // 例如 $("div").click(function() {...})
其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等。
2. jQuery事件处理
① 事件处理on()绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数。
语法：
element.on(events, [selector], fn)
（1）events：一个或多个用空格分隔的事件类型，如"click"或"keydown"。
（2）selector：元素的子元素选择器。
（3）fn：回调函数，绑定在元素身上的侦听函数。
- on()方法优势1：
可以绑定多个事件，多个处理时间处理程序。
$("div").on({
mouseover: function() {},
mouseout: function() {},
click: function() {}
});
如果事件处理程序相同：
$("div").on("mouseover mouseout", function() {
$(this).toggleClass("current");
});
- on()方法优势2：
可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
// click是绑定在ul身上的，但是触发的对象是ul里面的小li $('ul').on('click', 'li', function() { alert('Hi'); });
在此之前有bind()，live()，delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on()替代它们。
- on()方法优势3：
动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件。
// 因为代码是从上往下执行的，如果使用普通的事件绑定方法，后面动态创建的li并不能添加click的绑定事件 // $("ol li").click(function() { // alert(11); // }); // on可以给未来动态创建的元素绑定事件 $("ol").on("click", "li", function() { alert(11); }); var li = $("<li>我是后来创建的</li>"); $("ol").append(li);
② 事件处理off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序。
$("p").off() //解绑p元素所有事件处理程序
$("p").off("click") //解绑p元素上面的点击事件
$("ul").off("click", "li") //解绑事件委托
如果有的事件只想触发一次，可以使用one()来绑定事件。
③ 自动触发事件trigger()
有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
element.click() // 第一种简写形式 element.trigger("type") // 第二种自动触发模式 // 例如： $("p").on("click", function() { alert("Hi"); }); $("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击 element.triggerHandler(type) // 第三种自动触发模式，该方法不会触发元素的默认行为
3. jQuery事件对象
事件被触发，就会有事件对象产生。
element.on(events, [selector], function(event) {})
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡：event.stopPropagation()
4. jQuery拷贝对象
如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法。
语法：
$.extend([deep], target, object1, [objectN])
（1）deep：如果设为true，则为深拷贝，默认为false浅拷贝
（2）target：要拷贝的目标对象
（3）object1：待拷贝到第一个对象的对象
（4）objectN：待拷贝到第N个对象的对象
（5）浅拷贝是把拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
（6）深拷贝，前面加true，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象
浅拷贝：如果修改目标对象，则会影响被拷贝对象，并且是覆盖里面原来的数据。
深拷贝：深拷贝把里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，则会合并到一起。
5. jQuery多库共存
问题概述：
jQuery使用$作为标识符，随着jQuery的流行，其他js库也会用这$作为标识符，这样一起使用会引起冲突。
客观需求：
需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。
jQuery解决方案：
① 把里面的$符号统一改为jQuery。比如 jQuery("div")
② jQuery变量规定新的名称：$.noConflict()。比如 var xx = $.noConflict();
// 1. 如果$符号冲突，我们就使用jQuery jQuery.each(); // 2. 让jQuery释放对$的控制权 var aaa = jQuery.noConflict(); console.log(aaa("span")); aaa.each();
6. jQuery插件
jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成。
注意：这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件。
jQuery插件常用的网站：
- jQuery插件库：http:www.jq22.com/
- jQuery之家：http://www.htmleaf.com/
jQuery插件使用步骤：
- 引入相关文件（jQuery文件和插件文件）
- 复制相关html、css、js（调用插件）
例如jQuery几个插件：
- 瀑布流
- 图片懒加载（图片使用延迟加载可提高网页下载速度，它也能帮助减轻服务器负载）。当页面滑动到可视区域，再显示图片。在使用jQuery插件库EasyLazyload时，注意，此时的js引入文件和js调用必须写到所有图片的最后面，并且图片的src需要替换为data-lazy-src。
- 全屏滚动（fullpage.js）
GitHub：http://github.com/alvarotrigo/fullPage.js
中文翻译网站：http://www.dowebok.com/demo/2014/77/
<!-- 全屏滚动 --> <link rel="stylesheet" href="css/fullPage.min.css"> <script src="js/jquery.min.js"></script> <script src="js/fullPage.min.js"></script> <script> $(function() { $('#dowebok').fullPage({ sectionsColor: ['pink', 'skyblue', 'white'], navigation: true }); }); </script> <div id="dewebok"> <div id="section"> <h3>第一屏里面的内容</h3> </div> <div id="section"> <h3>第二屏里面的内容</h3> </div> <div id="section"> <h3>第三屏里面的内容</h3> </div> </div>
另外，bootstrap框架也是依赖于jQuery开发的，因此里面的JS插件使用之前，也必须引入jQuery文件。
