Javascript - Jquery

事件（Event）

文档事件

文档的载入事件

ready(fn)

$(document).ready(function () {

});

//或
$(function () {
});

//或
$(document).ready(fn)
function fn() { }

//或
$(document).ready(fn = function () {
});

文档的键盘鼠标事件

keyup(fn)

键盘按下并抬起时发生

$(document).keydown(function () {
alert('键盘被按下');
});

为文档元素绑定事件

bind(eventName,data, fn)
//eventName：事件名称
//data：可选，传递到函数的额外数据
//fn：事件处理函数
//eventName可能的值：
//load、unload、
//blur、focus、
//resize、scroll、
//mouseouser、mousemove、
//mouseup、mousedown、
//mouseout、mouseenter、mouseleave、
//click、dbclick、
//change（下拉框选项改变时会发生这个改变事件）、select（文本框被选择后会发生这个选择事件）、
//submit、keydown、keyup、keypress
//error

示例

$(document).ready(function () {
    var div = $("#box");
    div.bind("click", fn);
    function fn() {
        alert(event.srcElement.outerText);//print hello
        alert(this.id);//print box
    }
});

//或将type作为函数调用
$('p').click(function () { });
$('p').blur(function () { });

追加事件

使用.操作符可以为该对象追加事件

//链式调用
$('li p').bind('click', fn1).bind('click', fn2);
//或
$('li p').bind(
    {
        "click": function () { },
        "mouseup": function () { }
    }
);

注销事件

unbind(eventName | fnName)
//eventName：事件名，每个事件名以空格隔开
//fnName：自定义事件的函数名，每个事件名以空格隔开
//注销事件，如果两个参数都不存在，则移除所有事件

模拟事件

trigger(event | fnName, paramsArray)
//eventName：事件名，
//fnName：自定义事件的函数名
//paramsArray：事件处理函数所需要的参数
//注意：当trigger执行submit事件时，浏览器也将触发submit事件
//这会造成不想要的结果。此时可以使用triggerHandler方法避免浏览器的默认动作或使用事件对象的preventDefault或直接在事件处理函数中return false

示例

//模拟：通过执行代码来模拟用户的一个触发事件的动作
$('p').bind('click', function () { });
$('p').trigger('click');
//或
$('p').click();

切换事件

toggle(clickX, clickY, ……)
//为元素绑定多个click事件，奇数次时执行clickX，偶数次时执行clickY

toggle(speed, callback……)
//speed：显示或隐藏的动画速度
//callback：完成动画后的回调
//切换元素的显示/隐藏

hover(clickX, clickY, ……)
//为元素绑定多个hover事件，奇数次时执行clickX，偶数次时执行clickY

event事件对象

每个事件处理函数中都维护了一个event对象，可以在函数内部获取它，以便取出事件的信息

$('#box').bind('myshow', function (e) {
eventMessage = e.type;//获取事件类型名称
});

event对象的属性/方法

type
//获取事件处理函数的名称，诸如click、mouseover、keydown

relatedTarget
//如果是mouseover事件，获取鼠标是从哪个dom元素里移动过来的
//如果是mouseout事件，获取鼠标移动到了哪个dom元素里

pageX
//获取事件发生时鼠标离客户区的左边距

pageY
//获取事件发生时鼠标离客户区的左边距

which
//获取事件发生时鼠标按下的是左、中、右键中的哪个键，对应的值是1、2、3
//或键盘按下的是哪个键

target
//获取触发事件的dom源对象

originalEvent
//获取事件原始对象，主要用于当鼠标类事件发生时
//有效传递了一个MouseEvent对象，MouseEvent派生自event的构造器
//如果MouseEvent不满足你要获取的事件信息，你可以通过此方法获取真正的源

mataKey
//是否按下了ctrl键

stopPropagation()
//阻止事件冒泡

preventDefault()
//阻止浏览器默认动作

事件命名空间

如果为元素绑定了N个事件，注销时你得一个一个注销，使用事件命名空间就可以一次性注销它们。

$('p').bind('mouseover.Result', function () { });
$('p').bind('click.Result', function () { });
$('p').bind('focus.Result', function () { });
$('p').unbind('.Result');

$('p').bind('click', function () { alert("1"); }); //无命名空间
$('p').bind('click.Result', function () { alert("2"); }); //有命名空间

$('#btn').click(function () {
$('p').trigger('click!')//执行所有不包含在任何命名空间里的click事件，print 1
});

Javascript - 学习总目录