jQuery Evenementen

jQuery is speciaal ontworpen voor evenementenverwerking.

jQuery事件函数

jQuery eventhandler方法是jQuery中的核心函数。

Een eventhandler is een methode die wordt aangeroepen wanneer er een bepaald evenement in HTML optreedt. De term 'wordt getriggerd' (of 'geactiveerd') wordt vaak gebruikt.

Meestal wordt de jQuery-code geplaatst in de evenementenverwerking in het <head>-gedeelte:

实例

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>Dit is een kop.</h2>
<p>Dit is een paragraaf.</p>
<p>Dit is een ander paragraaf.</p>
<button>Click me</button>
</body>
</html>

亲自试一试

In het bovenstaande voorbeeld wordt een functie aangeroepen wanneer het klikken op de knop wordt geactiveerd:

$("button").click(function() {  // enige code... } )

Deze methode verbergt alle <p>-elementen:

$("p").hide();

Functies in een apart bestand

Als uw website veel pagina's bevat en u wilt dat uw jQuery-functies gemakkelijk te onderhouden zijn, dan moet u uw jQuery-functies in een aparte .js-bestand plaatsen.

当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

实例

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict();，以帮助您使用自己的名称（比如 jq）来代替 $ 符号。

亲自试一试

结论

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

  • 将所有 jQuery 代码置于事件处理函数中
  • 将所有事件处理函数置于文档就绪事件处理器中
  • 将 jQuery 代码置于单独的 .js 文件中
  • 如果存在名称冲突，则重命名 jQuery 库

jQuery Evenementen

以下是 jQuery 中事件方法的一些例子：

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

如需完整的参考手册，请访问我们的 jQuery 事件参考手册。