jQuery

jQuery 知识量:7 - 32 - 105

3.2 简单事件><

事件绑定函数- 3.2.1 -

对于文档加载之外的其他事件,jQuery也提供了大量的函数以便于操作,其中一个基本的方法是.bind()方法。通过.bind()可以指定任何DOM事件,并为事件添加一种行为。以下以点击事件(click)为例:

$(document).ready(function () {
    $('a.clickme').bind('click', function () {
        $(this).addClass('setRed');
    });
});

以上代码的意思是:在DOM就绪后就找到类为“clickme”的链接a,并绑定一个click事件,当a被点击后,向被点击的a添加新类“setRed”。

.bind()方法中传递了两个参数,第一个参数是事件名,表示要绑定什么事件,除了click事件,还可以绑定change,focus,load等等所有标准的DOM事件。第二个参数是一个匿名函数,表示绑定什么动作(行为),也就是当发生前一个参数指定的事件后,要做些什么。

以上示例中使用了$(this),$(this)总是指向发生绑定事件的那个DOM元素构成的jQuery对象,this则指向该DOM元素。

事件的简写格式- 3.2.2 -

jQuery为标准的DOM事件都提供了相应的简写格式,简写事件方法的原理与使用.bind()方法调用一样,但是确可以减少一定的代码输入量,同时也更方便,因此推荐使用事件简写格式。

$(document).ready(function () {
    $('a.clickme').click(function () {
        $(this).addClass('setRed');
    });
});

以上代码与使用.bind()实现的功能一样,但是更简洁也更易理解。

主要的jQuery标准DOM事件简写方法如下:

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

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

  • select 当textarea或文本类型的input元素中的文本被选择时发生。

  • change 当元素的值发生改变时发生。

  • click 当元素被点击时发生。

  • dblclick 当元素被双击时发生。

  • load 当指定的元素(及子元素)已加载时发生。

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

  • keydown 当按钮被按下时发生,返回键盘的代码(keyCode)。

  • keyup 当按钮被松开时发生,返回键盘的代码(keyCode)。

  • keypress 当按钮被按下时发生,返回键盘的ASCII字符。

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

  • mouseup 当在元素上放松按压的鼠标按键时发生。

  • mouseover 当鼠标指针移动到元素或其子元素上方时发生。

  • mouseout 当鼠标指针从元素或其子元素上移开时发生。

  • mousemove 当鼠标指针在元素中移动时发生。

  • resize 当调整浏览器窗口大小时发生。

  • scroll 当滚动指定的元素时发生。

  • submit 当提交表单时发生。

  • unload 当用户离开页面时发生,只应用于window对象。