jQuery事件

jQuery事件

常见 DOM 事件：

一、鼠标事件

1，click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：

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

2，dblclick()

当双击元素时，会发生 dblclick 事件。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).hide();
  });
});

3，mouseenter()

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

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
  });
});

4，mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

$(document).ready(function(){
  $("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
  });
});

5，mousedown()

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

mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

$(document).ready(function(){
  $("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
  });
});

6，mouseup()

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

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

$(document).ready(function(){
  $("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
  });
});

7，hover()

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$(document).ready(function(){
    $("#p1").hover(
        function(){
            alert("你进入了 p1!");
        },
        function(){
            alert("拜拜! 现在你离开了 p1!");
        }
    )
});

二、键盘事件

与 keypress 事件相关的事件顺序：

1. keydown - 键按下的过程
2. keypress - 键被按下
3. keyup - 键被松开

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

keypress 事件与 keydown 事件类似。当按钮被按下时发生该事件。

然而，keypress 事件不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）。请使用 keydown() 方法来检查这些键。

三、表单事件

1，submit()

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

该事件只适用于 <form> 元素。

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

$(document).ready(function(){
  $("form").submit(function(){
    alert("提交");
  });
});

2，change()

当元素的值改变时发生 change 事件（仅适用于表单字段）。

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

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

$(document).ready(function(){
  $("input").change(function(){
    alert("文本已被修改");
  });
});

3，focus()

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

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});

9，blur()

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

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});

四、文档/窗口事件

1，load()

load() 方法在 jQuery 版本 1.8 中已废弃。

load() 方法添加事件处理程序到 load 事件。

当指定的元素已加载时，会发生 load 事件。

该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）以及 window 对象。

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

注意：还存在一个名为 load() 的 jQuery AJAX 方法。根据不同的参数决定调用哪个方法。

$(document).ready(function(){
  $("img").load(function(){
    alert("图片已载入");
  });
});

2，resize() 

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

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

x=0;
$(document).ready(function(){
  $(window).resize(function(){
    $("span").text(x+=1);
  });
});

3，scroll() 

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

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

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

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

4，unload()

unload() 方法在 jQuery 版本 1.8 中被废弃，在 3.0 版本被移除。

Firefox 与 Chrome 会阻止弹窗，所以没办法看到效果。

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

当发生以下情况下，会触发 unload 事件：

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

unload() 方法规定当 unload 事件发生时会发生什么。

unload() 方法只应用于 window 对象。

注意：unload 事件在不同浏览器中效果不一样，请确保使用前在所有浏览器测试该方法。

$(document).ready(function(){
  $(window).unload(function(){
    alert("Goodbye!");
  });
});