目录
jQuery事件注册
jQuery为我们提供了方便的事件注册机制，优缺点如下。
优点：操作简单，且不用担心事件覆盖的问题。
缺点：普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。
element.事件(function(){})$("div").click(function(){})其他事件和原生基本一致，比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scoll等。
<div></div>
<script>
$(function() {
// 1. 单个事件注册
$("div").click(function() {
$(this).css("background", "purple");
});
$("div").mouseenter(function() {
$(this).css("background", "skyblue");
});
})
</script>jQuery事件处理
因为普通注册事件方法的不足，jQuery又开发了多个处理方法，如下。
on()：用来事件绑定，目前最好的事件绑定方法
off()：事件解绑
trigger()/triggerHandler()：事件触发
时间处理on绑定事件
因为普通注册事件方法的不足，jQuery又创造了多个新的时间绑定方法bind()/live()/delegate()/on()等，其中最好用的是on()。
on()方法优势一：可以绑定多个事件，多个处理事件处理程序。
$("div").on({
mouseover:function(){},
mouseout:function(){},
clock:function(){}
})如果事件处理程序相同
$("div").on("mouseover mouseout",function(){
$(this).toggleClass("current");
})on()方法优势二：可以事件委派操作，事件委派定义是，把原来加给子元素身上的事件绑定到父元素身上，就是把事件委派给父元素。
$("ul").on('click','li',function(){
alert('hello world!');
})在此之前有bind()、live()、delegate()等方法来处理事件绑定或事件委派。
on()方法优势三：动态创建的元素，click()没有办法解绑事件，on()可以给动态生成的元素绑定事件。
$("div").on('click','p',function(){
alert('可以给动态生成的元素绑定事件');
})$("div").append($("<p>我是动态创建的p</p>"))<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<ol></ol>
<script>
$(function() {
// (1) on可以绑定1个或者多个事件处理程序
$("div").on({
mouseenter: function() {
$(this).css("background", "skyblue");
},
click: function() {
$(this).css("background", "purple");
},
mouseleave: function() {
$(this).css("background", "blue");
}
});
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
// (2) on可以实现事件委托（委派）
$("ul").on("click", "li", function() {
alert(11);
});
// (3) on可以给未来动态创建的元素绑定事件
$("ol li").click(function() {
alert(11);
})
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
})
</script>事件解绑
当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件绑定，jQuery为我们提供了多种事件解绑方法：die()/undelegate()/off()等，甚至还有只触发一次的事件绑定方法one()。
off()方法可以移除通过on()方法添加的事件处理程序。
$("p").off()$("p").off("click")$("ul").off("click","li")如果有的事件只想触发一次，可以使用one()来绑定时间。
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<p>嗨</p>
<script>
$(function() {
$("div").on({
click: function() {
console.log("我点击了");
},
mouseover: function() {
console.log('我鼠标经过了');
}
});
$("ul").on("click", "li", function() {
alert(11);
});
// 1. 事件解绑 off
// $("div").off(); // 这个是解除了div身上的所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li");
// 2. one() 但是它只能触发事件一次
$("p").one("click", function() {
alert(11);
})
})
</script>自动触发事件
有些时候，在某些特定的条件下，我们希望某些事件能够自动触发，比如轮播图自动播放功能跟点击由此按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发，由此jQuery为我们提供了两个自动触发事件trigger()和triggerHandler()。
1.trigger()
element.click()element.trigger("type")2.triggerHandler()
element.triggerHandler(type)<div></div>
<input type="text">
<script>
$(function() {
$("div").on("click", function() {
alert(11);
});
// 自动触发事件
// 1. 元素.事件()
// $("div").click();会触发元素的默认行为
// 2. 元素.trigger("事件")
// $("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("div").triggerHandler("click");
$("input").on("focus", function() {
$(this).val("你好吗");
});
// $("input").triggerHandler("focus");
});
</script>jQuery事件对象
jQuery对DOM中的事件对象event进行了封装，兼容性更好获取，更方便使用，变化不大。事件被触发就会有事件对象的产生。
element.on(events,[selector],function(event) {}}<div></div>
<script>
$(function() {
$(document).on("click", function() {
console.log("点击了document");
})
$("div").on("click", function(event) {
// console.log(event);
console.log("点击了div");
event.stopPropagation();
})
})
</script>jQuery对象拷贝
jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便应用。
$.extent([deep],target,object1,[objectN])1.deep:如果设置为true为深拷贝，默认是false浅拷贝
2.target:要拷贝的目标对象
3.object1:待拷贝到第一个对象的对象
4.objectN:待拷贝到第N个对象的对象
5.浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象
6.深拷贝，前面加true，完全克隆，修改目标对象不会影响被拷贝对象
<script>
$(function() {
//合并数据
var targetObj = {};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);
// 会覆盖targetObj 里面原来的数据
// var targetObj = {
// id: 0
// };
// var obj = {
// id: 1,
// name: "andy"
// };
// // $.extend(target, obj);
// $.extend(targetObj, obj);
// console.log(targetObj);
})
</script>