jQuery学习笔记8:事件对象

简介:

1    事件对象

wKioL1MEPf-wU6aFAAQDj3T3q5Q434.jpg

样例:

   //通过event.type 属性获取触发事件名
   $('input').click(function (e) {
   alert(e.type);
   });
   //通过event.target 获取绑定的DOM 元素
   $('input').click(function (e) {
   alert(e.target);
   });

   

   target是获取触发元素的DOM,触发元素,就是你点了哪个就是哪个;currentTarget得到的是监听元素的DOM,你绑定的哪个就是那个。
   $('div').bind('click', function (e) {
       alert(e.target);
   });
   //获取绑定的那个DOM 元素,相当于this(e.currentTarget=this),区别与event.target
   $('div').bind('click', function (e) {
       alert(e.currentTarget);
   });
   //获取移入到div 之前的那个DOM 元素
   $('div').bind('mouseover', function (e) {
       alert(e.relatedTarget);
   });
   //获取移出div 之后到达最近的那个DOM 元素
   $('div').bind('mouseout', function (e) {
       alert(e.relatedTarget);
   });


   通过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) {
       alert(e.which);
   });


2    冒泡和默认行为
   如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出
现冒泡问题,从最近元素超最大范围冒。

wKiom1MFiz6TK-CWAAIgs65IfDA196.jpg

样例:

       //冒泡和阻止冒泡
   $('input').click(function (e) {
       e.stopPropagation();                //禁止冒泡
       alert('input');
   });
   //禁止表单提交
   $('input').click(function (e) {    
       e.preventDefault();
       alert('表单提交');
   });
   $('form').submit(function (e) {   //推荐采用form方式
       e.preventDefault();
   });
   //阻止冒泡又禁止了默认行为
   $('a').click(function (e) {
       alert('ycku.com');
       e.preventDefault();
       e.stopPropagation();
   });
等效于
   $('a').click(function (e) {
       alert('ycku.com');
       return false;
   });



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







相关文章
N..
|
2月前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
N..
13 1
|
2月前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
12 0
|
2月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
23 1
|
7月前
|
JavaScript 前端开发
前端基础 - JQuery事件切换(原来还有这种写法)
前端基础 - JQuery事件切换(原来还有这种写法)
31 0
|
7月前
|
JavaScript 前端开发 索引
Javascript知识【jQuery:数组遍历和事件】
Javascript知识【jQuery:数组遍历和事件】
|
12天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
1月前
|
Web App开发 JavaScript 前端开发
jquery的冒泡事件event.stopPropagation()
jquery的冒泡事件event.stopPropagation()
8 0
|
2月前
|
JavaScript 前端开发
jQuery中的事件与动画
jQuery中的事件与动画
10 0
|
2月前
|
JavaScript
jQuery动画与事件概念以及语法
jQuery动画与事件概念以及语法
9 0
|
4月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
42 0