jQuery中的事件（七）

1. ready(fn), 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数

这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

在DOM加载完成时运行的代码，可以这样写

$(document).ready(function(){
  // 在这里写你的代码...
});

使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。

$(function($) {
  // 你可以在这里继续使用$作为别名...
});

2. submit([[data],fn]), 当提交表单时，会发生 submit 事件

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

参数说明：

  • fn：在每一个匹配元素的submit事件中绑定的处理函数
  • [data],fn
    • data：submit([Data], fn) 可传入data供函数fn处理
    • fn：在每一个匹配元素的submit事件中绑定的处理函数
$("form:first").submit();

//阻止表单提交
$("form").submit( function () {
  return false;
} );

3. select([[data],fn]), 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件

这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

参数说明：

  • fn：在每一个匹配元素的select事件中绑定的处理函数
  • [data], fn
    • data：select([Data], fn) 可传入data供函数fn处理
    • fn：在每一个匹配元素的select事件中绑定的处理函数
//触发所有input元素的select事件
$("input").select();
//当文本框中文本被选中时执行的函数
$(":text").select( function () { /* ...do something... */ } );

4. scroll([[data],fn]), 当用户滚动指定的元素时，会发生 scroll 事件

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

参数说明：

  • fn：在每一个匹配元素的scroll事件中绑定的处理函数
  • [data],fn

    • data：scroll([Data], fn) 可传入data供函数fn处理。

    • fn：在每一个匹配元素的scroll事件中绑定的处理函数。
//当页面滚动条变化时，执行的函数
$(window).scroll( function() { /* ...do something... */ } );

//对元素滚动的次数进行计数
$("div").scroll(function() {
  $("span").text(x+=1);
});

5. resize([[data],fn]), 当调整浏览器窗口的大小时，发生 resize 事件

参数说明：

  • fn：在每一个匹配元素的resize事件中绑定的处理函数
  • [data],fn

    • data：resize([Data], fn) 可传入data供函数fn处理。

    • fn：在每一个匹配元素的resize事件中绑定的处理函数。
//让人每次改变页面窗口的大小时很郁闷的方法
$(window).resize(function(){
  alert("Stop it!");
});

//对浏览器窗口调整大小进行计数
$(window).resize(function() {
  $('span').text(x+=1);
});

6. mouseup([[data],fn]), 当在元素上放松鼠标按钮时，会发生 mouseup 事件

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

参数说明：

  • fn：在每一个匹配元素的mouseup事件中绑定的处理函数
  • [data],fn

    • data：mouseup([Data], fn) 可传入data供函数fn处理。

    • fn：在每一个匹配元素的mouseup事件中绑定的处理函数。
//当松开鼠标按钮时，隐藏或显示元素
$("button").mouseup(function(){
  $("p").slideToggle();
});

类似的还有：

  • mouseout([[data],fn])：当鼠标指针从元素上移开时，发生 mouseout 事件
  • mousemove([[data],fn])：当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件
  • mouseover([[data],fn])：当鼠标指针位于元素上方时，会发生 mouseover 事件
  • mouseleave([[data],fn])：当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
  • mouseenter([[data],fn])：当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
  • mousedown([[data],fn])：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

7. keyup([[data],fn]), 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上

注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

参数说明：

  • fn：在每一个匹配元素的keyup事件中绑定的处理函数
  • [data],fn
    • data：keyup([Data], fn) 可传入data供函数fn处理。
    • fn：在每一个匹配元素的keyup事件中绑定的处理函数。
//当按下按键时，改变文本域的颜色
$("input").keyup(function(){
  $("input").css("background-color","#D6D6FF");
});

类似的还有：

  • keypress([[data],fn])：当键盘或按钮被按下时，发生 keypress 事件。keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
  • keydown([[data],fn])：当键盘或按钮被按下时，发生 keydown 事件。如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

8. focusout([data],fn), 当元素失去焦点时触发 focusout 事件

focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

类似的还有：

  • focusin([data],fn)：当元素获得焦点时，触发 focusin 事件。focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
  • focus([[data],fn])：当元素获得焦点时，触发 focus 事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。
  • focus([[data],fn])：当元素获得焦点时，触发 focus 事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法

9. dblclick([[data],fn]), 当双击元素时，会发生 dblclick 事件

当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次 double click 事件。提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。

$("p").dblclick( function () { alert("Hello World!"); });

10. click([data],fn]), 触发每一个匹配元素的click事件

参数说明：

  • data：click([Data], fn) 可传入data供函数fn处理。
  • fn：在每一个匹配元素的click事件中绑定的处理函数。
$("p").click();

11. change([data],fn]), 当元素的值发生改变时，会发生 change 事件

该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

参数说明：

  • data：change([Data], fn) 可传入data供函数fn处理。
  • fn：在每一个匹配元素的change事件中绑定的处理函数。
$(selector).change();

$("input[type='text']").change( function() {
  // 这里可以写些验证代码
});

12. blur([data],fn]), 当元素失去焦点时触发 blur 事件

这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的。

参数说明：

  • data：blur([Data], fn) 可传入data供函数fn处理。
  • fn：在每一个匹配元素的blur事件中绑定的处理函数。
$("p").blur();

$("p").blur( function () { alert("Hello World!"); } );

13. toggle([speed],[easing],[fn]), 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

1.9版本 .toggle(function, function, … ) 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

参数说明：

  • [speed] [,fn]
    • speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"
    • fn:在动画完成时执行的函数，每个元素执行一次。

    • speed： 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"

    • easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

    • fn：在动画完成时执行的函数，每个元素执行一次。

  • switch
    • 用于确定显示/隐藏的开关。如：true - 显示元素，false - 隐藏元素
$('td).toggle();

$("p").toggle("slow");


$("p").toggle("fast",function(){
   alert("Animation Done.");
 });

$('#foo').toggle(showOrHide);

//相当于
if (showOrHide) {
  $('#foo').show();
} else {
  $('#foo').hide();
}

14. hover([over,]out), 模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件

参数说明：

  • over,out
    • over:鼠标移到元素上要触发的函数
    • out:鼠标移出元素要触发的函数
$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

15. triggerHandler(type, [data]), 触发指定的事件类型上所有绑定的处理函数

这个方法的行为表现与trigger类似，但有以下三个主要区别：

  • 不会触发浏览器默认事件, 也不会产生事件冒泡
  • 只触发jQuery对象集合中第一个元素的事件处理函数
  • 返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。

参数说明：

  • type,[data]  String,Array
    • type:要触发的事件类型
    • data:传递给事件处理函数的附加参数
//如果你对一个focus事件执行了 .triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作。
//html代码
<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>
<input type="text" value="To Be Focused"/>

//jquery代码
$("#old").click(function(){
  $("input").trigger("focus");
});
$("#new").click(function(){
  $("input").triggerHandler("focus");
});
$("input").focus(function(){
  $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});

16. trigger(type,[data]), 在每一个匹配的元素上触发某类事件

这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。

参数说明：

  • type,[data]   String|Event,Array

    • type：一个事件对象或者要触发的事件类型；Event 是事件发生时运行的函数

    • data：传递给事件处理函数的附加参数

//提交第一个表单，但不用submit()
$("form:first").trigger("submit")

//给一个事件传递参数
$("p").click( function (event, a, b) {
  // 一个普通的点击事件时，a和b是undefined类型
  // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

//下面的代码可以显示一个"Hello World"
$("p").bind("myEvent", function (event, message1, message2) {
  alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);

17. one(type,[data],fn), 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数

在每个对象上，这个事件处理函数只会被执行一次。

这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。

参数说明：

  • type,[data],fn    String,Object,Function
    • type：添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
    • data：将要传递给事件处理函数的数据映射
    • fn：每当事件触发时执行的函数。
//当所有段落被第一次点击的时候，显示所有其文本。
$("p").one("click", function(){
  alert( $(this).text() );
});

18. off(events,[selector],[fn]), 选择元素上移除一个或多个事件的事件处理函数 v1.7

off() 方法移除用.on()绑定的事件处理程序。

当有多个过滤参数，所提供的参数都必须匹配的事件处理程序被删除。

$("p").off()

$("p").off( "click", "**" )

 

posted @ 2019-11-03 00:33  codedot  阅读(292)  评论(0)  编辑  收藏  举报