jQuery学习笔记8：事件对象

1    事件对象

<a href="http://s3.51cto.com/wyfs02/M02/12/59/wKioL1MEPf-wU6aFAAQDj3T3q5Q434.jpg" target="_blank"></a>

样例：

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

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

   alert(e.type);

   });

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

   alert(e.target);

   target是获取触发元素的DOM，触发元素，就是你点了哪个就是哪个；currentTarget得到的是监听元素的DOM，你绑定的哪个就是那个。

   $('div').bind('click', function (e) {

       alert(e.target);

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

       alert(e.currentTarget);

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

   $('div').bind('mouseover', function (e) {

       alert(e.relatedTarget);

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

   $('div').bind('mouseout', function (e) {

   通过event.data 获取额外数据，可以是数字、字符串、数组、对象。如果字符串就传递：'123'、如果是数组就传递：[123,'abc']，如果是对象就传递：{user : 'Lee', age : 100}。数组的调用方式是：e.data[1]，对象的调用方式是：e.data.user。

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

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

   $('input').bind('click', 'abc', function (e) {

       alert(e.data);

   $('input').bind('click', [1,2,3,'a','b'], function (e) {

       alert(e.data[3]);

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

       alert(e.data.age);

   //判断鼠标左中右按键1、2、3

   $('input').bind('mousedown', function (e) {

       alert(e.which);

   //判断键盘按键

   $('input').bind('keyup', function (e) {

2    冒泡和默认行为

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

现冒泡问题，从最近元素超最大范围冒。

<a href="http://s3.51cto.com/wyfs02/M00/12/63/wKiom1MFiz6TK-CWAAIgs65IfDA196.jpg" target="_blank"></a>

       //冒泡和阻止冒泡

       e.stopPropagation();                //禁止冒泡

       alert('input');

   //禁止表单提交

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

       e.preventDefault();

       alert('表单提交');

   $('form').submit(function (e) {   //推荐采用form方式

   //阻止冒泡又禁止了默认行为

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

       alert('ycku.com');

       e.stopPropagation();

等效于

       return false;

     本文转自stock0991 51CTO博客，原文链接http://blog.51cto.com/qing0991/1360822：，如需转载请自行联系原作者