jquery常用事件处理方法

加载DOM

页面加载完毕后,浏览器会通过js为DOM元素添加事件

$(document).ready();// 相当于 window.onload 简写 $(function() {});

// 这个方法可以极大提高web应用程序的响应速度
// window.onload 方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行
// $(document).ready() 方法注册的事件处理程序在DOM完全就绪时就可以被调用,此时网页的元素,使用jquery可以使用,但并不意味这些元素关联的文件已经下载完毕
// 另一个差别:$(document).ready() 可以多次使用
// 而 window.onload()在一个页面只能使用一次

bind()

使用这个方法来对匹配元素绑定特定事件;

bind(eventType [, data], fn);
/*
blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error
*/

简写绑定事件

click();// 点击事件
mouseover();// 鼠标悬停
mouseout();// 鼠标移出

hover()

hover(enter, leave);// 鼠标移入触发第一个函数, 鼠标移除触发第二个函数

toggle()

该方法用于模拟鼠标连续单击事件

toggle(fn1, fn2, ...fnN);// 第一次单击元素,触发指定的第一个函数,当第二次单击同一元素时,触发指定的第二个函数,依次类推
// 当完成一轮之后,再次重复

阻止事件冒泡

stopPropagation();

阻止默认行为

用来阻止元素的默认行为,如,表单提交,当表单没有通过验证时,阻止其提交行为

preventDefault();

事件的属性

event.type;// 获取事件的类型
event.preventDefault();// 阻止元素默认行为
event.stopPropagation();// 停止事件冒泡
event.target;// 获取触发事件的元素
event.realtedTarget;// 获取触发事件的相关元素
event.pageX;// 获取到光标相对于页面的x坐标
event.pageY;// ..和y坐标
event.which;// 获取鼠标单击事件中获取鼠标的左中右,键盘事件中获取键盘的按键

移出事件

unbind()

unbind('click');// 删除元素的所有click事件
unbind();// 删除元素的所有事件

触发事件

trigger()

$('#btn').trigger("click");// 触发按钮的点击事件
$('#btn').trigger("myClick");// 触发按钮的自定义事件

/* 使用trigger() 方法传递数据 */
$('#btn').bind("myClick", function (event, msg1, msg2) {
    $('#test').append(msg1 + msg2);
});

// 触发事件的时候传递数据
$('#btn').trigger("myClick", ["数据1", "数据2"]);