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）事件捕获是范围由大变小的触发过程。