jquery中的事件

加载DOM
在js中，通常使用window.onload方法，而在jquery中使用$(document).read()

方法。
区别：
1.执行时机
window.onload是在网页中所有元素（包括元素的所有关联文件）完全加载到浏

览器后才执行，即js此时才可以访问网页中的任何元素
$(document).read()在DOM完全就绪时就要可以被调用，并不意味着这些元素关

联的文件都已经下载完毕。
由于在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此

可能此时元素的关联文件未下载完。要解决这个问题可使用load()方法

$(window).load(function{
})

等同于

window.load=function(){
}

2.多次使用
js:

function one(){
 alert("one");
}
function two(){
 alert("two");
}

当页面加载完成后，用js的方式调用

window.onload=one;
window.onload=two;

只会弹出two对话框，后面的函数会覆盖前面的函数

用jquery的方式调用

$(document).ready(function(){
 one();
})

$(document).ready(function(){
 two();
})

会在现有的行为上追加行为

3.简写方式

$(document).ready(function(){
})
$().ready(function(){
})
$(function(){
})

事件绑定
bind(type [data],fn);
第1个参数： blur,click,load,dbclick,mousedown等
第2个参数：为可选参数。作为event.data属性值传给事伯对象的额外数据对象
第3个参数：用来绑定的处理函数

dom装载完后，在title上绑定事件 ，找到内容元素，并显示

html:

<div id="panel">
 <h5 class="head">title</h5>
 <div class="content">
	content...
 </div>
</div>

js:
$(function(){
  $("#panel h5.head").bind("click",fucntion(){
      $(this).next("div.contet").show();
 })
})

2.如果“内容”元素是显示的，则隐藏，反之则显示

$(function(){
  $("#panel h5.head").bind("click",fucntion(){
     var $content = $(this).next("div.content");
     if($content.is(":visible")){
	 $content.hide();
     }else{
	 $content.show();
     }
 })
})

合成事件
1.hover()方法
hover(enter,leave);
模拟光标悬停事件 。当光标移动到元素上时，会触发指定的第1个函数(enter),
当光标移出这个元素时，会触发(leave)

$(function(){
    $("#panel h5.haed").hover(function(){ 
	$(this).next("div.content").show();
    },function(){
	$(this).next("div.content").hide();
   })
})

2.toggle()方法
toggle(fun1,fn2,...fnN);
用于模拟鼠标连续单击事件，第1次单击元素，触发fun1,以此类推

$(function(){
    $(#panel h5.head).toggle(function(){
	$(this).next("div.content").show();
    },function(){
	$(this).next("div.content").hide();
    })
})

toggle()方法还有个作用：切换元素的可见状态

$(function(){
    $(#panel h5.head).toggle(function(){
	$(this).next("div.content").toggle();
    },funct
ion(){
	$(this).next("div.content").toggle();
    })
})

事件对象属性
1.event.type()方法
获取事件的类型

$("a").click(function(event){
    alert(event.type);//获取事件类型
    return false; //阻止链接跳转
})
结果：
"click"

2.event.preventDefault()方法
阻止默认的事件行为。
3.event.stopPropagation()方法
阻止事件的冒泡
4.event.target()方法
获取到触发事件的元素

$("a[href="http://baidu.com"]").click(function(event){\
    alert(event.target.href);
    return false;
})
结果：
"http://baidu.com"

5.event.relatedTarget()方法
在标准dom中，mouseover和mouseout所发生的元素可通过event.target()来访问

相关元素是通过 event.relatedTarget来访问的.
6.event.pageX()/event.pageY()
获取光标相对于页面的x坐标和y坐标

$("a").click(function(event){
    alert("当前坐标: "+event.pageX+","+event.pageY);
    return false;
})

7.event.which()
在鼠标单击事件中取到鼠标的左中右键

$(function(){
    $("body").mousedown(function(e){
	alert(e.which); //1=left 2=mid 3=right
   })
})

8.event.metaKey()
为键盘事件获取<ctrl>按键
9.event.originalEvent()
指向原始的事件对象

移除事件
可以为同一个元素绑定多个事件，也可为多个元素绑定同一个事件

$(function(){
    $('#btn').bind('click',function(){
	$('#test').append("<p>--one--</P>");
    }).bind('click',function(){
	$('#test').append("<p>--two--</P>");
    }).bind('click',function(){
	$('#test').append("<p>--third--</P>");
    })
})

<button id="btn">click</button>
<div id="test"></div>

1.移除元素上以前注册的事件

<button id="delAll">删除所有事件</button>
$('#delAll').click(function(){
    $('#btn').unbind('click');
})

unbind([type][,data]);
第1个参数是事件类型
第2个参数是将要移除的函数
如果没有参数，则删除所有绑定事件
如果提供了事件类型作为参数，则只删除该类型的绑定事件
如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函

数会被删除
2.移除<button>元素的其中一个事件
首先为这些匿名处理函数指定一个变量

$(function(){
    $('#btn').bind('click',m1=function(){
	$('#test').append("<p>--one--</P>");
    }).bind('click',m2=function(){
	$('#test').append("<p>--two--</P>");
    }).bind('click',m3=function(){
	$('#test').append("<p>--third--</P>");
    })
})

然后单独删除某一个事件

$('#del').click(functin(){
	$('btn').unbind('click',m2);
})

对于只需要触发一次，随后就要立即解除绑定的情况，jquery提供了one()方法

$(function(){
    $('#btn').on('click',m1=function(){
	$('#test').append("<p>--one--</P>");
    }).on('click',m2=function(){
	$('#test').append("<p>--two--</P>");
    }).on('click',m3=function(){
	$('#test').append("<p>--third--</P>");
    })
})

模拟操作
1.常用模拟
例如用户进入页面后，就触发click事件，而不需要用户去主动单击
jquery中可使用trigger()完成模拟操作

$('#btn').trigger('click');
也可直接简化写法click();
$('#btn').click();

2.触发自定义事件

$('#btn').bind('myclick',function(){
    $('#test')append('<p>自定义事件</p>');
})
触发该事件：
$('#btn').trigger('myclick');

3.传递数据
trigger(type[,data])
第1个参数是要触发的事件类型，
第2个参数是要传递给事件处理函数的附加数据，以数组形式传递。可传递一个

加调参数给回调函数来区别这次事件是代码触发还是用户触发

$('#btn').bind('myclick',function(event,ms1,ms2){
    $('#test').append('<p>'+ms1 + ms2 + '</P>');
})
$('#btn').trigger('myclick',['自定义','事件']);
4.执行默认操作
$('input').trigger('focus');