Jquery的事件

一，加载DOM
　　1，执行时机
　　window.onload：在页面(包括外部文件，图像等)，完全加载之后触发，等同于$(window).load(function(){})
　　$(document).ready(function(){})：在DOM树解析完成之后，无需等待外部文件，图像等加载
　　2，多次使用
　　window.onload:不能多次执行，如想执行多个函数，需放在window.load=function(){//多个函数}内部
　　$(document).ready(function(){//代码});可以多次执行
　　3，简写方法
　　$(document).ready(function(){//代码}) == $(function(){//代码});
二，事件绑定
　　bind(type[.data],function(){//代码});
　　one(type[.date],function(){});只在用户第一次触发事件时有用
　　1，基本效果
　　$(function(){
　　　　$("#id element.class").bind("click",function(){
　　　　　　$(this).next().show();
　　　　});
　　});
　　2，加强效果
　　$(function(){
　　　　$("#panel h5.head").bind("mouseover",function(){
　　　　　　var $content = $(this).next();
　　　　　　if($content.is(":visible")){
　　　　　　　　$content.hide();
　　　　　　}else{
　　　　　　　　$content.show();
　　　　　　}
　　　　})
　　})
　　3，改变绑定事件的类型
　　$(function(){
　　　　$("#panel h5.head").bind("mouseover",function(){
　　　　　　$(this).next().hide();
　　　　}).bind("mouseout",function(){
　　　　　　$(this).next().show();
　　　　});
　　})
　　4，简写绑定事件
　　$(function(){
　　　　$("#panel h5.head").mouseover(function(){
　　　　　　$(this).next().hide();
　　　　}).mouseout(function(){
　　　　　　$(this).next().show();
　　　　});
　　})
三，合成事件
　　1，hover()方法
　　两个参数hover(enter,leave)，用于模拟光标悬停事件，光标在元素之上调用第一个函数，离开调用第二个函数
　　2，toggle()方法
　　toggle(fn1,fn2,fn3,..fnN)，第一次单击触发第一个函数，再单击触发第二个函数，依次下去
　　可以方便的切换元素的可见状态
四，事件冒泡
　　1，事件对象
　　$("element").bind("click",function(event){});
　　单击element元素时，事件对象就被创建了，这个事件只有事件处理程序能访问到，事件处理函数执行结束，事件对象被销毁
　　2，停止事件冒泡
　　stopPropagation()方法来阻止事件冒泡
　　$("element").bind("click",function(event){event.stopPropagation();//事件处理函数});
　　或者return false
　　3，阻止默认行为
　　preventDefault()方法
　　$("element").bind("click",function(event){event.preventDefault();//事件处理函数});
　　4，事件捕获
J　　query不支持事件捕获
五，事件对象的属性
　　event.type：获取事件的类型
　　event.preventDefault()：阻止事件的默认行为
　　event.stopPropagation()：阻止事件的冒泡
　　event.target：获取触发事件的元素
　　event.relatedTarget：获取相关元素，只有mouseover和mouseout事件会产生相关元素
　　event.pageX,event.pageY：获取光标相对于页面（加上滚动条的宽度或高度）的X，Y坐标，
　　event.which：鼠标单击事件中获取鼠标的左中右键（1,2,3）
　　event.metakey：获取ctrl按键
六，移除事件
　　1，移除按钮元素上以前注册的事件
　　$("#btn").unbind("click"),删除click事件，没有参数删除所有事件
　　2，移除button元素中的一个事件
　　$("#btn").unbind("click",fn1)，删除函数名为的fn1的click事件
七，模拟操作
　　1，常用模拟
　　$("#btn").trigger("click") == $("#btn").click(),模拟用户点击
　　2，触发自定义事件
　　绑定事件$("#btn").bind("click",function(){$("#test").append("<p>我是自定义事件</p>")；});
　　触发事件$("#btn").trigger("myclick");
　　3，传递数据
　　触发事件中传递数据，区别事件是代码触发还是用户触发
　　$("#btn").trigger("myclick",["自定义","事件"])
　　4，执行默认操作
　　取消默认操作，$(input).triggerHandler("focus");
　　默认会获取焦点，现在只会触发focus事件而不会获取焦点
八，其他用法
　　1，绑定多个事件类型
　　bind("mouseover mouseout")
　　2，添加事件命名空间，便于管理
　　bind("click.plugin",function(){});
　　3，相同事件名称，不同命名空间执行方法
　　$(function(){
　　　　$("div").bind("click",function(){});
　　　　$("div").bind("click.plugin",function(){});
　　　　$("button").click(function(){$("div").trigger("click!");});
　　});
　　click!匹配所有不包含命名空间中的click方法

Jquery的事件,古老的榕树,5-wow.com