event:
event.data //当前执行的处理程序被绑定时传递到事件方法的可选数据
$("p").each(function(i){
$(this).on("click",{x:i},function(event){
alert("序号:" + $(this).index() + "。段落的数据为: " + event.data.x);
});
});
event.delegateTarget //返回当前调用的juery事件处理程序所添加的元素
$("div").on("click","button",function(event){
$(event.delegateTarget).css("background-color", "pink");
});
event.pageX //返回鼠标指针的位置,相对于文档的左边缘
event.pageY //返回鼠标指针的位置,相对于文档的上边缘
event.preventDefault() //阻止事件的默认行为
event.relatedTarget //返回鼠标移动时,哪个元素进入或退出
$("div,p").mouseenter(function(event){
$("#msg").html("关联的目标为: " + event.relatedTarget.nodeName);
})
event.result //包含右指定事件触发的事件处理程序返回的最后一个值
$("button").click(function(){
return "Hello world!";
});
$("button").click(function(event){
$("p").html(event.result);
});
event.timeStamp //鼠标左键第一次按下到最后一次抬起所消耗的毫秒数
$("button").click(function(event){
$("span").text(event.timeStamp);
});
event.which //返回被按下的键盘或鼠标号
$("input").keydown(function(event){
$("div").html("Key: " + event.which);
});
点击:
click() //添加、触发click事件
dblclick() //添加触发double click事件
光标:
blur() //添加触发失去焦点事件
change() //当用于select元素时,change事件会在选择某个选项是发生
当用于text fileld或textarea时,change事件在元素失去焦点时发生
focus( ) //获得焦点时发生的事情
$("input").focus(function(){
$("span").css("display","inline").fadeOut(2000);
});
focusin( ) //当在元素或在其内的任意元素上发生focus事件时,focusin()方法添加要运行的函数
focusout( ) //当在元素或在其内的任意元素上发生focusout事件时,focusout()方法添加要运行的函数
$("div").focusin(function(){
$(this).css("background-color","#FFFFCC");
});
$("div").focusout(function(){
$(this).css("background-color","#FFFFFF");
});
键盘:
keydown( ) //键按下的过程 发生事件
keypress( ) //键被按下 发生事件
keyup( ) //键被松开 发生事件
$("input").keydown(function(){
$("input").css("background-color","yellow");
});
$("input").keypress(function(){
$("span").text(i+=1);
});
$("input").keyup(function(){
$("input").css("background-color","pink");
});
鼠标:
hover( ) //当鼠标指针悬停在被选元素上时要运行的两个函数
方法触发mouseenter和mouseleave事件
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","pink");
});
mouseenter( ) //当鼠标移上
mouseleave( ) //当鼠标移出
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color","lightgray");
});
mousedown( ) //当鼠标按下
mouseup( ) //当鼠标按起来
$("div").mouseup(function(){
$(this).after("<p style='color:green;'>释放鼠标按钮。</p>");
});
$("div").mousedown(function(){
$(this).after("<p style='color:purple;'>按下鼠标按钮。</p>");
});
mousemove( ) //当鼠标在元素上移动
$(document).mousemove(function(event){
$("span").text(event.pageX + ", " + event.pageY);
});
mouseover( ) //当鼠标在元素上移动,与mouseenter不同。mouseover在鼠标进入被选元素或任意子元素都会触发,mouseente事件只有在鼠标进入被选元素时被触发
mouseout( ) //当鼠标在元素上移动,与mouseout不同。mouseout在鼠标离开被选元素或任意子元素都会触发,mouseleave事件只有在鼠标离开被选元素时被触发
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
$("p").mouseout(function(){
$("p").css("background-color","lightgray");
});
事件:
on( ) //在被选元素上添加一个或多个事件处理程序
$("p").on("click",function(){
alert("段落被点击了。");
});
off( ) //移除通过on() 方法添加的事件处理程序
$('p').on('click',function() {
$(this).css('background','#ccc')
})
$('button').click(function(){
$('p').off('click')
})
one( ) //在被选元素上添加一个或多个事件处理程序,且只能运行一次事件处理函数
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});
窗口:
resize( ) //当跳转浏览器窗口大小时,发生resize事件
<p>窗口重置了 <span>0</span> 次大小。</p>
<button>触发窗口的 resize 事件</button>
实例1:var x=parseInt($('span').text())
$(window).resize(function(){
$('span').text(x+=1)
})
实例2: $(window).resize(function(){
var x=parseInt($('span').text())
$("span").text(x+=1);
});
$("button").click(function(){
$(window).resize();
});
滚动:
scroll( ) //当用户滚动指定的元素时,会发生scroll事件
Scroll事件适用于所有可滚动的元素和window对象(浏览器窗口)
Scroll方法触发scroll事件,或规定当发生scroll事件时运行的函数
实例1:$('div').scroll(function() {
var x=parseInt($('span').text())
$('span').text(x+=1)
})
实例2: $("div").scroll(function(){
$("span").text(x+=1);
});
$("button").click(function(){
$("div").scroll();
});
表单:
select( ) //当textarea或文本类型的input元素的文本被选中(标记)时,会发生select事件
$("input").select(function(){
$("input").after("文本已选中!");
});
submit( ) //当提交表单时,发生submit事件
该事件只适用于<form>元素
$("form").submit(function(){
alert("提交");
});
trigger( ) //触发被选元素上指定的事件以及事件的默认行为(比如表单提交)
该方法与triggerHandler方法类似,不同的是triggerHandler()不触发事件的默认行为
triggerHandler方法创建的事件不会再DOM树中冒泡
$("input").select(function(){ //会触发冒泡
$("input").after("文本已选中!");
});
$("button").click(function(){
$("input").trigger("select");
});
triggerHandler( ) //触发被选元素上指定的事件,triggerHandler()不触发事件的默认行为
triggerHandler方法创建的事件不会再DOM树中冒泡
$("input").select(function(){ //不触发冒泡
$("input").after("select 事件触发!");
});
$("button").click(function(){
$("input").triggerHandler("select");
});
右键菜单事件:
contextmenu( ) //添加事件处理程序到contextmenu事件(右键菜单事件)
Contextmenu() 方法只是作为 .on( “contextmenu”,handler )
的一个速记方法,移除该事件可以用 .off( “contextmenu”)
$( "#div" ).contextmenu(function(event) {
alert( "处理程序.contextmenu()被调用。" );
event.preventDefault() //取消右键菜单的浏览器默认行为
});