7. 事件处理

7.1 事件载入

ready(function()); 加载完页面即进行

$(document).ready(function(){
 //body
});
//相当于
$(function(){

});

7.2 给div添加监听

7.2.1 点击监听

方式一: click

$('div').click(function(){
 alert("监听");
});

方式二: on(events,[选择器],[data],fn) :可以选择多个监听事件

$('div').on('click',function(){
	alert("监听");
});

7.2.2 鼠标监听

鼠标进入与离开:

$('div').mouseenter(function(){
		console.log("进入");
}).mouseLeave(function(){
console.log("离开");
});

on的方式

$('div').on("mouseenter",function(){
		console.log("进入");
}).on("mouseLeave",function(){
console.log("离开");
});

hover(fn,fn)

$('div').hover(function(){
		console.log("进入");
},function(){
console.log("离开");
});

7.3 解除事件监听

点击按钮使某个区域上的事件失效

$('#div').click(function(){
  $(".inner").off();
});

点击按钮使某个区域上的某个事件失效

$('#div').click(function(){
  $(".inner").off("mouseenter");
});

7. 4 获得事件的点击坐标

使用event对象

$('#div').click(function(event){
 console.log(event.offsetX,event.offsetY);//事件框内
 console.log(event.clientX,event.clientY);//窗口左上角
 console.log(event.pageX,event.pageY);//页面左上角
});

7.5 点击某个区域,外部点击监听不响应

$(".div").click(function(event){
console.log('click inner');
event.stopProagetion();//停止事件冒泡
});

7.6 点击链接根据时间判断

阻止事件的默认行为 preventDefault();

$("a").click(function(event){
 if(Date.now()%2==0){
 console.log(停止跳转);
event.preventDefault();//阻止跳转
}
});

7.7 事件委托

将多个子元素的事件监听委托给父元素处理

监听回溯是加在父辈元素上

当操作任务任何一个子元素时,事件会冒泡到父类元素上

父辈元素不会直接处理事件,而是根据event,target得到发生事件的子元素,通过子元素的中介进行处理

事件的委托方和被委托方

设置事件委托:$(parentSelector).deleate(childernSelector,eventName,callback)

移除事件委托:$(parentSelector).undeleate(evetName)

delegate(selector,[type],[data],fn);

<script type="text/javascript">
	$('ul').delegate('li','click',function () {
		 console.log(this);//this指的是li元素
		 this.style.background='red';
	});
</script>

$(parentSelector).undelegate(evetName)

$("#btn").click(function(){
$('ul').undelegate("click");
});

事件委托的好处:

添加新的子元素,自动有事件响应处理

减少事件监听的数量

可以使用对数据库进行操作和显示