jQuery学习笔记之事件

bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。

$(selector).bind({event:function, event:function, ...})

$(document).ready(function(){

  $("button").bind({

   click:function(){$("p").slideToggle();},

   mouseover:function(){$("body").css("background-color","red");}, 

   mouseout:function(){$("body").css("background-color","#FFFFFF");} 

  });

});

unbind() 方法移除被选元素的事件处理程序。

该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。

$(selector).unbind(event,function)

 

当元素获得焦点时发生 focus事件。

当元素失去焦点时发生 blur 事件。

$(document).ready(function(){

 $("input").focus(function(){

   $("input").css("background-color","#FFFFCC");

  });

 $("input").blur(function(){

   $("input").css("background-color","#D6D6FF");

  });

  $("#btn1").click(function(){

    $("input").focus();

  }); 

 $("#btn2").click(function(){

    $("input").blur();

  });

});

 

当元素的值发生改变时,会发生 change 事件。

该事件仅适用于文本域(text field),以及 textarea 和 select 元素。

change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。

注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。

$(document).ready(function(){

 $(".field").change(function(){

   $(this).css("background-color","#FFFFCC");

  });

});

当点击元素时,会发生 click 事件。dblclick为双击事件

$(document).ready(function(){

 $("button").click(function(){

    $("p").slideToggle();

  });

 $("p").dblclick(function(){

    $("button").click();

  });

});

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序。

$(selector).delegate(childSelector,event,data,function)

 

$(document).ready(function(){

 $("div").delegate("button","click",function(){

    $("p").slideToggle();

  });

});

当元素遇到错误(没有正确载入)时,发生 error 事件。

error() 方法触发 error 事件,或规定当发生 error 事件时运行的函数。

提示:该方法是 bind('error', handler) 的简写方式

 

$(document).ready(function(){

 $("img").error(function(){

   $("img").replaceWith("<p><b>图片未加载!</b></p>");

  });

});

isDefaultPrevented() 方法返回指定的 event 对象上是否调用了 preventDefault() 方法。

preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。

防止链接打开 URL,并声明来自 isDefaultPrevented() 的结果:

$(document).ready(function(){

 $("a").click(function(event){

    event.preventDefault();

    alert("Default prevented:" + event.isDefaultPrevented());

  });

});

pageX() 属性是鼠标指针的位置,相对于文档的左边缘。

pageY() 属性是鼠标指针的位置,相对于文档的上边缘。

$(document).ready(function(){

  $(document).mousemove(function(e){

    $("span").text("X:" + e.pageX + ", Y: " + e.pageY);

  });

});

result 属性包含由被指定事件触发的事件处理器返回的最后一个值,除非这个值未定义

$(document).ready(function(){

 $("button").click(function(e) {

    return ("最后一次点击的鼠标位置是: X" +e.pageX + ", Y" + e.pageY);

  });

 $("button").click(function(e) {

    $("p").html(e.result);

  }); 

});

target 属性规定哪个 DOM 元素触发了该事件。

$(document).ready(function(){

  $("p, button, h1,h2").click(function(event){

    $("div").html("点击事件由一个 " + event.target.nodeName + " 元素触发");

  });

});

 timeStamp 属性包含从 1970 年 1 月 1 日到事件被触发时的毫秒数

$(document).ready(function(){

  $("button").click(function(e){

    $("span").text(e.timeStamp);

  });

});

type 属性描述触发哪种事件类型。

Event.type

which 属性指示按了哪个键或按钮

event.which。

当元素获得焦点时,发生 focus 事件。

$("input").focus(function(){

 $("input").css("background-color","#FFFFCC");

});

完整的 key press 过程分为两个部分:1. 按键被按下;2. 按键被松开。

当按钮被按下时,发生 keydown 事件。

当按钮被松开时,发生 keyup 事件。

$("input").keydown(function(){

 $("input").css("background-color","#FFFFCC");

});

keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。

不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件

i=0;

$(document).ready(function(){

  $("input").keypress(function(){

    $("span").text(i+=1);

  });

});

 

当指定的元素(及子元素)已加载时,会发生 load() 事件。

该事件适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架)。

根据不同的浏览器(Firefox 和 IE),如果图像已被缓存,则也许不会触发 load 事件。

注释:还存在一个名为 load() 的 jQuery Ajax 方法,根据不同的参数而定。

$(document).ready(function(){

  $("img").load(function(){

    $("div").text("图像已加载");

  });

});

当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。

与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。

当鼠标指针穿过元素时,会发生 mouseenter 事件。

该事件大多数时候会与 mouseleave 事件一起使用。

当鼠标指针穿过元素时,会发生 mouseenter 事件

当鼠标指针位于元素上方时,会发生 mouseover 事件。

当鼠标指针从元素上移开时,发生 mouseout 事件。

当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。

与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件

当在元素上放松鼠标按钮时,会发生 mouseup 事件。

与 click 事件不同,mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。

mouseup() 方法触发 mouseup 事件,或规定当发生 mouseup 事件时运行的函数。

 

one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。

当使用 one() 方法时,每个元素只能运行一次事件处理器函数。

$(document).ready(function(){

 $("p").one("click",function(){

   $(this).animate({fontSize:"+=6px"});

  });

});

当调整浏览器窗口的大小时,发生 resize 事件。

 

resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数。

x=0;

$(document).ready(function(){

$(window).resize(function(){

  $("span").text(x+=1);

});

 

});

当用户滚动指定的元素时,会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。

x=0;

$(document).ready(function(){

  $("div").scroll(function() {

    $("span").text(x+=1);

  });

});

当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件

$(document).ready(function(){

  $("input").select(function(){

    $("input").after(" Textmarked!");

  });

});

当提交表单时,会发生 submit 事件。

该事件只适用于表单元素。

$("form").submit(function(e){

  alert("Submitted");

});

当用户离开页面时,会发生 unload 事件。

具体来说,当发生以下情况时,会发出 unload 事件:

  • 点击某个离开页面的链接
  • 在地址栏中键入了新的 URL
  • 使用前进或后退按钮
  • 关闭浏览器
  • 重新加载页面

toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。该方法也可用于切换被选元素的 hide() 与 show() 方法。如果规定了两个以上的函数,则 toggle() 方法将切换所有函数。

trigger() 方法触发被选元素的指定事件类型。

$(document).ready(function(){

  $("input").select(function(){

    $("input").after("文本被选中!");

  });

  $("button").click(function(){

   $("input").trigger("select");

  });

});

与 trigger() 方法不同,triggerHandler() 方法不会引起所发生事件的默认行为(文本不会被选中)

triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作,也不会产生事件冒泡。

triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件(比如表单提交)的默认行为,而且只影响第一个匹配元素。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,关于 jQuery事件,我可以和你分享一些学习笔记。 1. 绑定事件jQuery 中,我们可以通过以下方式来绑定事件: ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中,`selector` 表示要绑定事件的元素,`event` 表示要绑定的事件类型,比如 `click`、`mouseover` 等等。事件处理程序则是在事件触发时要执行的代码块。 2. 多个事件绑定 我们可以通过 `on()` 方法来同时绑定多个事件: ``` $(selector).on({ event1: function(){ // 事件处理程序1 }, event2: function(){ // 事件处理程序2 } }) ``` 这样,当 `event1` 或 `event2` 中任意一个事件触发时,对应的处理程序都会被执行。 3. 解除事件 如果需要解除某个元素的事件处理程序,可以使用 `off()` 方法: ``` $(selector).off(event); ``` 其中,`event` 表示要解除的事件类型。如果不指定事件类型,则会解除该元素上所有的事件处理程序。 4. 事件委托 在 jQuery 中,我们可以使用事件委托来提高性能。事件委托是指将事件绑定到父元素上,而不是绑定到子元素上,然后通过事件冒泡来判断是哪个子元素触发了该事件。这样,当子元素数量较多时,只需要绑定一次事件,就可以监听到所有子元素的事件。 ``` $(selector).on(event, childSelector, function(){ // 事件处理程序 }) ``` 其中,`selector` 表示父元素,`event` 表示要绑定的事件类型,`childSelector` 表示要委托的子元素的选择器,事件处理程序则是在子元素触发事件时要执行的代码块。 以上是 jQuery事件的一些基本操作,希望对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值