1 事件对象
样例:
//通过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 冒泡和默认行为
如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出
现冒泡问题,从最近元素超最大范围冒。
样例:
//冒泡和阻止冒泡
$('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;
});