脚本宝典收集整理的这篇文章主要介绍了jQuery 事件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

jQuery 代码:

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

描述:

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

jQuery 代码:

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

on(events,[selector],[data],fn)：在选择元素上绑定一个或多个事件的事件处理函数。

参数

描述:

Display a paragraph's text in an alert when it is clicked:

$("p").on("click", function(){
alert( $(this).text() );
});

Pass data to the event handler, which is specified here by name:

function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)

Cancel a form submit action and prevent the event from bubbling up by returning false:

$("form").on("submit", false)

Cancel only the default action by using .preventDefault().

$("form").on("submit", function(event) {
  event.preventDefault();
});

Stop submit events from bubbling without preventing form submit, using .stopPropagation().

$("form").on("submit", function(event) {
  event.stopPropagation();
});

off(events,[selector],[fn])：在选择元素上移除一个或多个事件的事件处理函数。

events,[selector],[fn]

• events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin".
• selector:一个最初传递到.on()事件处理程序附加的选择器。
• fn:事件处理程序函数以前附加事件上，或特殊值false.

events-map,[selector]

• events-map:一个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示先前事件绑定的处理函数。
• selector:一个最初传递到.on()事件处理程序附加的选择器。

示例：

Remove all event handlers from all paragraphs:

$("p").off()

Remove all delegated click handlers from all paragraphs:

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

Remove just one previously bound handler by passing it as the third argument:

var foo = function () {
  // code to handle some kind of event
};
// ... now foo will be called when paragraphs are clicked ...
$("body").on("click", "p", foo);
// ... foo will no longer be called.
$("body").off("click", "p", foo); 

Unbind all delegated event handlers by their namespace:

var validate = function () {
  // code to validate form entries
};
// delegate events under the ".validator" namespace
$("form").on("click.validator", "button", validate);
$("form").on("keypress.validator", "input[type='text']", validate);
// remove event handlers in the ".validator" namespace
$("form").off(".validator");

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

jQuery 代码:

$("p").one("click", function(){
  alert( $(this).text() );
});

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

type,[data]String|Event,Array 

• type:一个事件对象或者要触发的事件类型

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

示例：

提交第一个表单，但不用submit()

jQuery 代码:

$("form:first").trigger("submit")

描述:给一个事件传递参数

jQuery 代码:

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

描述:下面的代码可以显示一个"Hello World"

jQuery 代码:

$("p").bind("myEvent", function (event, message1, message2) {
  alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);

hover([over,]out)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

over,outFunction,Function

• over:鼠标移到元素上要触发的函数
• out:鼠标移出元素要触发的函数

over,out 描述:鼠标悬停的表格加上特定的类

jQuery 代码:

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

out 描述:hover()方法通过绑定变量"handlerInOut"来切换方法。

jQuery 代码:

$("td").bind("mouseenter mouseleave",handlerInOut);
$("td").hover(handlerInOut);

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

[speed] [,fn]String,FunctionV1.0

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

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

[speed], [easing ], [fn ] String,String,FunctionV1.4.3

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

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

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

switchBooleanV1.3

• 用于确定显示/隐藏的开关。如：true - 显示元素，false - 隐藏元素

无参数描述:对表格切换显示/隐藏

jQuery 代码:

$('td).toggle();

speed 描述:用600毫秒的时间将段落缓慢的切换显示状态

jQuery 代码:

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

speed,fn 描述:用200毫秒将段落迅速切换显示状态，之后弹出一个对话框。

jQuery 代码:

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

switch参数描述:如果这个参数为true ，那么匹配的元素将显示;如果false ，元素是隐藏的

jQuery 代码:

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

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

fnFunctionV1.0

• 在每一个匹配元素的blur事件中绑定的处理函数。

[data],fnString,FunctionV1.4.3

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

• fn:在每一个匹配元素的blur事件中绑定的处理函数。

描述:触发所有段落的blur事件

jQuery 代码:

$("p").blur();

描述:任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。

jQuery 代码:

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

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

参数

fnFunctionV1.0

• 在每一个匹配元素的change事件中绑定的处理函数。

[data],fnString,FunctionV1.4.3

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

$(selector).change();

描述:给所有的文本框增加输入验证

jQuery 代码:

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

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

fnFunctionV1.0

• 在每一个匹配元素的click事件中绑定的处理函数。

[data],fnString,FunctionV1.4.3

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

描述:触发页面内所有段落的点击事件

jQuery 代码:

$("p").click();

描述:将页面内所有段落点击后隐藏

jQuery 代码:

$("p").click( function () { $(this).hide(); });

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

fnFunctionV1.0

• 在每一个匹配元素的dblclick事件中绑定的处理函数。

[data],fnString,FunctionV1.4.3

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

描述:给页面上每个段落的双击事件绑上 "Hello World!" 警告框

jQuery 代码:

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

focus([[data],fn])：当元素获得焦点时，触发 focus 事件。

$(document).ready(function(){
  $("#login").focus();
});

$("input[type=text]").focus(function(){
  this.blur();
});

focusin([data],fn)：当元素获得焦点时，触发 focusin 事件。

参数

<p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>

$("p").focusin(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

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

参数

<p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>

$("p").focusout(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

keydown([[data],fn])：当键盘或按钮被按下时，发生 keydown 事件。

参数

$(window).keydown(function(event){
  switch(event.keyCode) {
    // ...
    // 不同的按键可以做不同的事情
    // 不同的浏览器的keycode不同
    // 更多详细信息:     http://unixpapa.com/js/key.html
    // 常用keyCode： 空格 32   Enter 13   ESC 27
  }
});

keypress([[data],fn])：当键盘或按钮被按下时，发生 keypress 事件。

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

$("input").keyup(function(){
  $("input").css("background-color","#D6D6FF");
});

mousedown([[data],fn])：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

参数

$("button").mousedown(function(){
  $("p").slideToggle();
});

mouseenter([[data],fn])：当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。

$("p").mouseenter(function(){
  $("p").css("background-color","yellow");
});

mouseleave([[data],fn])：当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。

参数

$("p").mouseleave(function(){
  $("p").css("background-color","#E9E9E4");
});

mousemove([[data],fn])：当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。

参数

$(document).mousemove(function(e){
  $("span").text(e.pageX + ", " + e.pageY);
});

$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4");
});

$("p").mouseover(function(){
  $("p").css("background-color","yellow");
});

$("button").mouseup(function(){
  $("p").slideToggle();
});

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

参数

$(window).resize(function(){
  alert("Stop it!");
});

$(window).resize(function() {
  $('span').text(x+=1);
});

$(window).scroll( function() { /* ...do something... */ } );

$("div").scroll(function() {
  $("span").text(x+=1);
});

$("input").select();

$(":text").select( function () { /* ...do something... */ } );

$("form:first").submit();

$("form").submit( function () {
  return false;
} );

JS中阻止冒泡事件的三种方法

冒泡事件：比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡。

//冒泡事件

            function   stopPropagation(e){
                e.stopPropagation();//阻止事件冒泡
                e.preventDefault(); //阻止默认行为 reset  submit a [href]
                return false;
            }

           $(".child").click(function(e){
               console.log
               (".child");
               return stopPropagation(e);// 调用返回函数
           })

           $(".parent").click(function(){
               console.log(".parent");
           })

阻止冒泡事件有三种方法：

1.event.stopPropagation()方法

 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。例如：

2.event.preventDefault()方法

这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

3.return false ；

这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

脚本宝典总结

以上是脚本宝典为你收集整理的jQuery 事件全部内容，希望文章能够帮你解决jQuery 事件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。