一、事件绑定与解绑
+++ 事件绑定与解绑
方式一: 通过jQery对象的提供的事件方法绑定
$(".inner").click(function(){
console.log("点击内部")
})
注意：jQuery只是提供了一部分事件方法。
如果没有，则不能使用。
方式二:通过jQery对象的on方法绑定
$obj.on(eventNames,fn) 添加事件
$obj.off([eventNames]) 解除所有事件或解除一个、多个事件
注意：1、可以一次绑定多个事件，事件名称用空格分隔。
可以一次解除一个或多个或所有事件，解除多个事件时，事件名称用空格分隔。
2、该方法适用于绑定所有的JS事件。
这里的eventName指的是JS原生的事件方法名。
方式三: 通过jQery对象的bind方法绑定(用法和on一致)
$obj.bind(eventNames,fn) 添加事件
$obj.unbind([eventNames]]) 解除事件
+++ 注意事项
1、jQuery可以链式操作,即可以实现链式绑定。
2、通过jQuery绑定事件,对于一个元素可以绑定相同的事件，不会覆盖。
3、通过jQuery绑定事件，事件函数中的this指向的是DOM元素。
4、通过jQuery绑定事件，默认会传入event事件对象。
我们可以用事件函数接收。
1.1 事件绑定
1）通过事件方法直接绑定
通过jQuery提供的事件方法直接绑定
//绑定点击事件
$(".inner").click(function(){
console.log("点击内部")
})
//绑定鼠标移入事件
$(".inner").mouseenter(function(){
console.log("移入")
})
//绑定鼠标移出事件
$(".inner").mouseleave(function(){
console.log("移出")
})
2）通过on方法绑定
>>>>>> 绑定事件监听
使用jQuery提供的on方法可以绑定一个事件，也可以绑定多个事件
//看绑定一个事件
$(".outer").on('click',function(){
console.log("点击外部")
})
//绑定多个事件
$(".inner").on('mouseenter click',function(){
console.log("xxx")
})
>>>>>> 解除事件监听
解除事件监听可以解除所有的，也可以解除一个或多个。
//解除所有事件监听
$(".inner").off();
//解除一个指定的事件监听
$(".inner").off("click");
//解除多个指定的事件监听
$(".inner").off("click mouseenter");
3）通过bind方法绑定（用法和on一致）
>>>>>> 绑定事件监听
使用jQuery提供的bind方法可以绑定一个事件，也可以绑定多个事件
//看绑定一个事件
$(".outer").bind('click',function(){
console.log("点击外部")
})
//绑定多个事件
$(".inner").bind('mouseenter click',function(){
console.log("xxx")
})
>>>>>> 解除事件监听
解除事件监听可以解除所有的，也可以解除一个或多个。
//解除所有事件监听
$(".inner").unbind();
//解除指定的事件监听
$(".inner").unbind("click");
$(".inner").unbind("click mouseenter");
1.2 事件绑定的区别
eventName(fun)
1、编码简单，但是不通用。对于有的事件,jQuery没有提供对应的方法。
2、只适用于绑定jQuery提供的事件。对于没有提供的，无法绑定。
on(eventName,fun）
1、通用，但是编码较复杂。
2、eventName指的是原生JS提供的事件方法名。
1.3 注意事项
1）jQuery可以实现链式调用，即可以实现链式绑定
jQuery可以实现链式调用，即可以实现链式绑定
//使用jQuery提供的事件方法绑定
$(".inner").mouseenter(function(){
console.log("移入")
}).mouseleave(function(){
console.log("移出")
})
//使用jQuery提供的on方法绑定
$(".inner").on('mouseenter',function(){
console.log("移入2")
}).on('mouseleave',function(){
console.log("移出2")
})
//使用jQuery提供的bind方法绑定
$(".inner").bind('mouseenter',function(){
console.log("移入2")
}).bind('mouseleave',function(){
console.log("移出2")
})
2）jQuery绑定事件时，对于一个元素可以同时绑定相同事件，不会覆盖。（注意：有的jQuery版本不支持）
<body>
<button>按钮</button>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
$("button").first()
.click(function(event){
console.log("1")
}).click(function(){
console.log("2")
})
</script>
3）jQuery绑定事件时，事件函数中的this指向DOM元素，而不是jQuery对象
4）jQuery绑定事件时，默认传入event事件对象。如果想使用，函数必须声明event
//点击事件
$(".inner").click(function(event){
console.log(event.target)
})
$(".inner").on('click',function(event){
console.log(event.target)
})
$(".inner").bind('click',function(event){
console.log(event.target)
})
二、事件函数中的this对象
1) 使用jQuery绑定事件函数，
事件函数中的this指向操作的DOM对象，而不是jQuery实例对象。
2) 如果我们想使用jQUery的API，则需要将this封装为jQuery实例对象。
$(this)
1）事件函数中的this指向操作的DOM对象，而不是jQuery实例对象
<body>
<button>按钮</button>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
$("button").first().click(function(event){
console.log(this)
})
</script>
2）如果我们想使用jQuery的API，则需要将this包装。
<body>
<button>按钮</button>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
$("button").first().click(function(event){
$(this).css('background-color','red')
})
</script>
三、事件函数中的event对象
4.1 事件对象的使用方式
jQuery绑定事件时，默认传入event事件对象。
如果想使用，函数必须声明event进行接收。
$("button").click(function(event){
$("li").css('background-color','red')
})
4.2 事件坐标
+++ 获取触发事件时鼠标的坐标（原点不同，坐标就会不同）
event.clientX
event.clientY 相对于视口的左上角（原点为浏览器的左上角。）
event.pageX
event.pageY 相对于页面的左上角（原点为页面的左上角）
event.offsetX
event.offsetY 相对于事件元素的左上角（原点为事件对象的左上角）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height:2000px;">
</div>
<button style="position: fixed; top: 200px;">获取坐标</button>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
$($("button")[0]).click(function(event){
//相对于视口的左上角（原点为窗口的左上角）
console.log("clientX",event.clientX,event.clientY);
//相对于页面的左上角（原点为页面的左上角）
console.log("pageX",event.pageX,event.pageY);
//相对于事件元素的左上角（原点为事件对象的左上角）
console.log("offsetX",event.offsetX,event.offsetY);
})
</script>
</html>
4.3 事件冒泡
事件冒泡:子类的事件触发会触发祖先元素相同事件的触发。
阻止事件冒泡有两种方式
方式一:
//点击内部不触发外部
$(".inner").click(function(event){
event.cancelBubble=true;
})
方式二:
//点击内部不触发外部
$(".inner").click(function(event){
event.stopPropagation();
})
注意: 阻止事件冒泡的方法必须写在子元素绑定事件方法的最后一行。
>>>>>> 案例
<body>
<div id="outer" style="width:400px;height:400px;background-color: blue; position: relative; margin:20px auto;">
<div id="inner" style="width:100px;height:100px;background-color: red; position: absolute; top:20%;;left:20%"></div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
$("#outer").click(function(event){
alert("外部点击事件")
})
$("#inner").click(function(event){
alert("内部点击事件");
//注意：写在最下面
event.stopPropagation();
})
</script>
4.3 阻止事件默认行为（阻止浏览器的默认行为）
//阻止事件的默认行为
$("a").click(function(event){
event.preventDefault();
})
>>>>>> 阻止a标签跳转默认行为
<body>
<a id="bb" href="">百度一下</a>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
$("#bb").click(function(event){
alert("阻止跳转");
//阻止事件默认行为
event.preventDefault();
})
</script>
4.4 事件委托
1、事件委托：将子元素的事件委托给父辈元素来处理。
2、事件委托实现方式:
1) 将事件绑定给父辈元素。
2) 在事件函数中就通过操作event.target来操作子元素。
注意：event.target是实际就是触发事件的元素
3、事件委托的作用：
1) 新添加的子元素会自动拥有事件响应处理。
2) 减少事件监听的个数
4、jQuery事件委派API
delegate(childSelector,'eventName',fn)
设置事件委派
注意：fn事件函数中的的this指的是点击的DOM子元素。即event.target
undelegate([eventName])
移除事件委派
1）事件委派JS原生实现
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button>新增li</button>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
//新增li
$("button").first().click(function(){
$("ul").append("<li>66</li>")
})
//为li添加事件，事件委派
$("ul").click(function(event){
//清空所有li样式
$('li').css('background-color','');
//访问实际操作的子元素
var obj=event.target;
$(obj).css('background-color','red');
})
</script>
2）事件委派jQuery实现
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button>新增li</button>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
//新增li
$("button").first().click(function(){
$("ul").append("<li>66</li>")
})
//为li添加事件，事件委派
// $("ul").click(function(event){
// //清空所有li样式
// $('li').css('background-color','');
// //访问实际操作的子元素
// var obj=event.target;
// $(obj).css('background-color','red');
// })
//事件委派
$("ul").delegate("li",'click',function(){
//清空所有样式
$('li').css('background-color','');
//访问实际操作的子元素
//注意：此时this指向操作的dom元素。如果想使用jQuery的API，则包装为jQuery对象
$(this).css('background-color','red');
})
</script>
四、jQuery事件API
4.1 jQuery提供的事件方法
事件处理
on(eventNames,fn) 添加事件
off([eventNames]) 解除事件
bind(eventNames,fn) 添加事件
unbind([eventNames]]) 解除事件
事件委派
delegate(childSelector,eventName,fn)
undelegate([eventName])
页面载入
ready(fn)
事件
click([[data],fn])
dblclick([[data],fn])
blur([[data],fn])
change([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
hover([over,]out)
mouseenter([[data],fn])
mouseleave([[data],fn])
mouseover([[data],fn])
mouseout([[data],fn])
mousemove([[data],fn])
mousedown([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])
4.2 页面载入
这三种方式等价，作用相同。前两个是jQuery的写法。最后一个是原生JS的写法。
//延时加载1
window.onload=function(){
}
//延时加载2
$(document).ready(function(){
})
//延时加载3
$(function(){
})
4.3 鼠标移入移出事件
+++ 鼠标移入移出事件
1、mouseenter() 鼠标移入触发
mouseleave() 鼠标移出触发
2、hover(function(){},function(){})
第一个函数是鼠标移入时触发，第二个函数是鼠标移出时触发
hover()底层使用的就是mouseenter()和mouseleave()
3、mouseover() 鼠标移入触发
mouseout() 鼠标移出触发
+++ mouserenter()与mouseover()的区别
1、mouseenter 只在移入到当前元素才会触发，对应mouseleave
mouseover 在鼠标移入到子元素时也会触发,对应mouseout。
2、如果不存在子元素，mouseenter、mouseovr 没有什么区别。
1）鼠标移入移出事件绑定
//鼠标移入移出事件(三种方式)
//方式一
$(".inner").mouseenter(function(){
console.log("移入")
}).mouseleave(function(){
console.log("移出")
})
//方式二
$(".inner").on('mouseenter mouseleave',function(){
console.log("xxx")
})
// //方式三
$(".inner").hover(function(){
console.log("移入3")
},function(){
console.log("移出3")
})
2）区别mouseenter与mouseover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="d1" style="width:200px;height:200px;background-color: red;position: relative; ">
<div style="width:100px;height:100px;background-color: blue; position: absolute; top:20%;left:20%"></div>
</div>
<div class="d2" style="width:200px;height:200px;background-color: red;position: relative; margin-top: 100px;">
<div style="width:100px;height:100px;background-color: blue; position: absolute; top:20%;left:20%"></div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
$(".d1").mouseenter(function(){
console.log('鼠标移入')
}).mouseleave(function(){
console.log("鼠标移出")
})
$(".d2").mouseover(function(){
console.log('鼠标移入')
}).mouseout(function(){
console.log("鼠标移出")
})
</script>
</html>
