Jquery——Day3（事件对象+事件冒泡+默认行为阻止）

1、事件对象

即event对象，通过处理函数默认传递接受。

//通过处理函数传递事件对象；
$(function(){
	$("input").bind('click',function(e){
		alert("欢迎光临！");
	});
});

凡是事件，都包含有 属性和方法

A、event.target与event.currentTarget、relatedTarget区别：

（1）event.target是获取触发DOM元素，即点击了哪个就是哪个；

（2）event.currentTarget表示的是监听某个元素，即绑定了哪个就是哪个；

（3）event.relatedTarget表示的是移入移出目标点离开或进入的那个DOM元素。

B、screenX/screenY、pageX/pageY、clientX/clientY

（1）第一组表示获取页面显示器屏幕位置的水平、垂直坐标；

（2）第二组表示获取页面原点的水平、垂直坐标；（最大，含有下拉加载滚动条）

（3）第三组表示获取相对于页面视口的水平、垂直坐标。

2、事件冒泡

（1）定义：在页面中有多个事件，也可以多个元素响应同一个事件（几个元素出现重叠）

简单而言，从最小的范围到最大的范围“冒”，即为“冒泡”，这几个元素为重叠的关系。

$(function(){
	$('input').click(function(e){
		alert('input');
	});

	//为div点击事件
	$('div').click(function(e){
 		alert('div');
	});

	$('body').click(function(e){
		alert('body');
	});
});

上述三个事件含有重叠的关系，同时按照元素的“click”点击顺序来看，

input——> div——> body

之所以为冒泡，是因为事件会按照DOM的层次结构像水泡一样由下向上依次上升。

（2）阻止事件默认行为

由于网页中的元素有自己的默认行为，例如，单击超链接后会跳转、单击“提交”按钮后表单会提交，有事需要阻止元素的默认行为。

在Jquery中，常用的阻止元素的默认行为的方法是preventDefault()

	<form action="no.html">
		<input type="submit" value="提交" />
	</form>

对submit提交按钮，取消其默认行为，如下：

	$(function(){
		$("form").submit(function(e){
			e.preventDefault();
		});
	});

（3）停止事件冒泡

停止事件冒泡作用是：阻止事件中其他对象的事件处理函数被执行。

在Jquery中常用的是stopPropagation()方法来停止事件冒泡。

$(function(){
	$('p').bind("click",function(e){
		alert("欢迎光临");
		$('div').html(txt);
		e.stopPropagation();  //停止事件冒泡
	});

});

上述案例中，只会触发第一个p事件，而不会触发div的事件。

（4）若既阻止了冒泡，又阻止了默认行为

$('a').click(function(e){
	e.preventDefault();
	e.stopPropagation();
	alert("dsd");
});

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

$(document).click(function(){
	alert('documnet');
});

在上述代码中“e.preventDefault()、e.stopPropagation()”可以用一句话代替，

即“return false；”

$('a').click(function(e){
	return false;
	alert("dsd");
});

（5）其他方法

isDefaultPrevented()   是否调用了方法

isPropagationStopped()

stopImmediatePropagation()

isImmediatePropagation()

3、事件捕获

事件冒泡与事件捕获是两种截然相反的过程。

（1）事件冒泡是范围由小到大的触发过程；

（2）事件捕获是范围由大变小的触发过程。