Jquery李炎恢——18，19事件对象

学习要点：

1.事件对象

2.冒泡和默认行为

javaScript在事件处理函数中默认传递了event对象，也就是事件对象。但由于浏览器的兼容性，开发者总是会做兼容性方面的处理。jquery在封装的时候，解决了这些问题，并且还创建了一些非常好用的属性和方法。

一、事件对象

事件对象就是event对象，通过处理函数默认传递接受。之前处理函数的e就是event事件对象，event对象有很多可用的属性和方法，我们在javaScript的课程中已经详细的了解过这些常用的属性和方法。这里，我们再演示一下。

//通过处理函数传递事件对象

$("input").bind("click",function(e){       //接受事件对象参数

        alert(e);

});

event对象的属性

属性名type：获取这个事件的事件类型的字符串。例如click

属性名target：获取触发事件的DOM元素

属性名data：获取事件调用时间的额外数据

属性名relatedTarget：获取移入移出目标点离开或进入的那个最相邻的DOM元素

属性名currentTarget：获取绑定触发的DOM元素，等同于this

属性名pageX/pageY：获取相对于页面原点的水平/垂直坐标

属性名screenX/screenY：获取显示器屏幕位置的水平/垂直坐标（非jquery封装）

属性名clientX/clientY：获取相对于页面视口的水平/垂直坐标（非jquery封装）

属性名result：获取上一个相同事件的返回值

属性名timeStamp：获取事件触发的时间戳

属性名which：获取鼠标左中右键（1，2，3），或获取键盘按键

属性名altKey/shiftKey/ctrlKey/metaKey：获取是否按下了alt,shift,ctrl（这三个非jquery封装）或meta键（IE原生meta键，jquery做了封装）

//通过event.type属性获取触发事件名

$("input").click(function(e){

          alert(e.type);

});

//通过event.target获取绑定的DOM元素

$("input").click(function(e){

       alert(e.target);

});

//通过event.data获取额外数据，可以是数字，字符串，数组，对象

$("input").bind("click",123,function(){             //传递daga数据

        alert(e.data);                                          //获取数字数据

});

注意：如果字符串就传递：“123”，如果是数组就传递：[123,"abc"]，如果是对象就传递：{user:"Lee",age:100}。数组的调用方式是：e.data[1],对象的调用方式是：e.data.user

//event.data获取额外数据，对于封装的简写事件也可以使用

$("input").click({user:"Lee",age:"100"},function(e){

           alert(e.data.user);

});

注意：键值对的键可以加上引号，也可以不加；在调用的时候也可以使用数组的方式：alert(e.data["user"]);

//获取移入到div之前的那个DOM元素

$("div").mouseover(function(e){

        alert(e.relatedTarget);

});

//获取移出div之后到达最近的那个DOM元素

$("div").mouseout(function(e){

        alert(e.relatedTarget);

});

//获取绑定的那个DOM元素，相当于this，区别与event.target

$("div").click(function(e){

        alert(e.currentTarget);

});

注意：event.target得到的是触发元素的DOM，event.currentTarget得到的是监听元素的DOM，而this也是得到监听元素的DOM.

//获取上一次事件的返回值

$("div").click(function(e){

      return "123";

});

$("div").click(function(e){

      alert(e.result);

});

//获取当前的时间戳

$("div").click(function(e){

         alert(e.timeStamp);

});

//获取鼠标的左中右键

$("div").mousedown(function(e){

       alert(e.which);

});

//获取键盘的按键

$("input").keyup(function(e){

      alert(e.which);

});

//获取是否按下了ctrl键，meta键不存在，导致无法使用

$("input").click(function(e){

       alert(e.ctrlKey);

});

//获取触发元素鼠标的当前的位置

$(document).click(function(e){

        alert(e.screenY+","+e.pageY+","+e.clientY);

});

二、冒泡和默认行为

如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出现冒泡问题

//HTML页面

<div style="width:200px;height:200px;background:red;">

       <input type="button" value="按钮"/>

</div>

//三个不同元素触发事件

$("input").click(function(){

        alert("按钮被触发了！");

});

$("div").click(function(){

       alert("div层被触发了！");

});

$(document).click(function(){

       alert("文档页面被触发了！");

});

注意：当我们点击文档的时候，只触发文档事件；当我们点击div层时，触发了div和文档两个；当我们点击按钮时,

触发了按钮，div和文档。触发的顺序是从小范围到大范围。这就是所谓的冒泡现象，一层一层往上。

jquery提供了一个事件对象的方法：event.stopPropagation(),这个方法设置到需要触发的事件上时，所有上层的冒泡行为都将被取消。

$("input").click(function(){

         alert("按钮被触发了！");

         e.stopPropagation();

});

//禁止提交表单跳转

$("form").sumbit(function(e){

       e.preventDefault();

});

网页中的元素，在操作的时候会有自己的默认行为。比如：右击文本框输入区域，会弹出系统菜单，点击超链接会跳转到指定页面、点击提交按钮会提交数据。

$("a").click(function(e){

       e.preventDefault();

});

注意：如果想让上面的超链接同时阻止默认行为且禁止冒泡行为，可以把两个方法同时写上：event.stopPropagation()和event.preventDefault()。这两个方法如果需要同时启用的时候，还有一种简写方案代替，就是直接return false.

$("a").click(function(e){

         return false;

});

冒泡和默认行为的一些方法

preventDefault():取消某个元素的默认行为

isDefaultPrevented():判断是否调用了preventDefault()方法

stopPropagation():取消事件冒泡

isPropagationStopped():判断是否调用了stopPropagation()方法

stopImmediatePropagation():取消事件冒泡并取消该事件的后续事件处理函数

isImmediatePropagationStopped():判断是否调用了stopImmediatePropagation()方法

//判断是否取消某个元素的默认行为

$("input").keyup(function(e){

         e.preventDefault();

         alert(e.isDefaultPrevented());

})；

//取消事件冒泡并取消该事件的后续事件处理函数

$("input").click(function(e){

         alert("input");

         e.stopImmediatePropagation();

});

$("input").click(function(){

         alert("input2");

});

$(document).click(function(){

        alert("document");

});

//判断是否调用了stopPropagation()方法

$("input").click(function(e){

         e.stopPropagation();

         alert(e.isPropagationStopped());

});

//判断是否调用了stopImmediatePropagation()方法

$("input").click(function(e){

       e.stopImmediatePropagation();

       alert(e.isImmediatePropagationStopped());

});