jQuery 教程
jQuery 教程
阅读(2.4k) 书签 赞(0) 我要纠错

事件处理

2018-08-12 21:27 更新

jQuery - 事件处理

使用事件我们可以创建动态 Web 页面。事件是行为，可以通过 Web 应用程序检测到。

以下是事件的示例 ——

  • 鼠标点击

  • 一个 Web 页面加载

  • 用鼠标取代元素

  • 提交 HTML 表单

  • 键盘上的按键

  • 等等

当这些事件被触发时，你可以使用自定义函数实现你想要用事件实现的任何事情。这些自定义函数称为事件处理程序。

创建事件处理程序

使用 jQuery 事件模型，我们可以在 DOM 中用下述 bind() 方法实现事件处理程序 ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js"></script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>

      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>

   </head>

   <body>

      <p>Click on any square below to see the result:</p>

      <div class="div" style="background-color:blue;">ONE</div>
      <div class="div" style="background-color:green;">TWO</div>
      <div class="div" style="background-color:red;">THREE</div>

   </body>

</html>

这段代码会导致 division 元素响应点击事件；当用户点击这个 division 内部之后，警报将被显示出来。

这将产生如下所示结果：

bind() 指令的全部语法如下所示 ——

selector.bind( eventType[, eventData], handler)

下面是各个参数的描述 ——

  • eventType —— 一个字符串，包含一个 JavaScript 事件类型，例如点击或提交。请参考下一节事件类型的完整列表。

  • eventData —— 这是一个可选参数，是数字的映射，会被传递到事件处理程序中。

  • handler —— 一个函数，每次事件被触发时，该函数会被执行。

删除事件处理程序

通常来说，一旦建立了一个事件处理程序，它仍在影响其余部分的页面。有时你可能会需要删除事件处理程序。

jQuery 提供了 unbind() 命令来删除一个已存在的事件处理程序。unbind() 的语法如下：

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

下面是各个参数的描述 ——

  • eventType —— 一个字符串，包含一个 JavaScript 事件类型，如点击或提交。请参考下一节事件类型的完整列表。

  • handler —— 如果提供的话，确定要被删除的特定的监听器。

事件类型

下述是跨平台的，建议你使用 jQuery 来绑定事件类型 ——

序号 事件类型 & 描述
1 blur

当元素失去关注时会出现。
2 change

当元素发生改变时出现。
3 click

当鼠标点击时出现。
4 dblclick

当鼠标双击时出现。
5 error

当有错误在下载或卸载等时出现。
6 focus

当元素获取关注时出现。
7 keydown

当按下键盘时出现。
8 keypress

当键盘被按下并被释放时出现。
9 keyup

当键盘被释放时出现。
10 load

当文档被下载后出现。
11 mousedown

按下鼠标按钮后出现。
12 mouseenter

当鼠标进入元素区域时出现。
13 mouseleave

当鼠标离开元素区域时出现。
14 mousemove

当鼠标指针移动时出现。
15 mouseout

当鼠标指针移动一个元素时出现。
16 mouseover

当鼠标指针移开一个元素时出现。
17 mouseup

释放鼠标按钮时出现。
18 resize

调整窗口大小时出现。
19 scroll

滚动窗口时出现。
20 select

选中文本时出现。
21 submit

提交表单时出现。
22 unload

卸载文档时出现。

事件对象

回调函数接受一个参数，当调用处理程序时，JavaScript 事件对象将通过它进行传递。

事件对象通常是不必要的并且参数也会被省略，因为足够的上下文通常是可用的，当处理程序被触发时，处理程序一定会知道需要做什么，但是还有一些你需要访问的属性。

事件属性

下述是可用的事件属性，并且可以以与平台无关的方法来安全的访问 ——

序号 属性 & 描述
1 altKey

当事件触发时，如果 Alt 键被按下去，该属性设置为 true，如果没有则设置为 false。Alt 键在大多数 Mac 键盘上是标签选项。
2 ctrlKey

当事件触发时，如果 Ctrl 键被按下去，该属性设置为 true，如果没有则设置为 false。
3 data

当处理程序建好后，任何值都会作为第二个参数传递给 bind() 命令。
4 keyCode

对于 keyup 和 keydown 事件，该属性会返回键被按下去了。
5 metaKey

当事件触发时，如果 Meta 键被按下去，该属性设置为 true。在 PC 上，Meta 是 Ctrl 键，而在 Macs 上，它是 Command 键。
6 pageX

对于鼠标事件，指定了原始页面的相关事件的水平坐标。
7 pageY

对于鼠标事件，指定了原始页面的相关事件的竖直坐标。
8 relatedTarget

对于一些鼠标事件，当事件触发时，识别了光标离开或进入的元素。
9 screenX

对于鼠标事件，指定了原始屏幕的相关事件的水平坐标。
10 screenY

对于鼠标事件，指定了原始屏幕的相关事件的竖直坐标。
11 shiftKey

当事件触发时，如果 Shift 键被按下，该属性设置为 true，如果没有则设置为 false。
12 target

识别要触发的事件的元素。
13 timeStamp

创建事件时的时间戳(以毫秒为单位)。
14 type

对于所有的事件来说，指定了要触发的事件类型(例如，点击)。
15 which

对于键盘事件来说，指定了引发事件的键的数字代码，对于鼠标事件来说，指定了哪一个按钮被按下(1 是左键，2 是中间键，3 是右键)。

 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js"></script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>

      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>

   </head>

   <body>

      <p>Click on any square below to see the result:</p>

      <div class="div" style="background-color:blue;">ONE</div>
      <div class="div" style="background-color:green;">TWO</div>
      <div class="div" style="background-color:red;">THREE</div>

   </body>

</html>

这将产生如下所示结果：

事件方法

下述是方法列表，可以在事件对象中调用 ——

序号 方法 & 描述
1 preventDefault()

阻止浏览器执行默认操作。
2 isDefaultPrevented()

返回 event.preventDefault() 是否曾经在该事件对象中调用过。
3 stopPropagation()

停止向父元素 bubbing 事件，阻止通知任何父处理程序这一事件。
4 isPropagationStopped()

返回 event.stopPropagation() 是否曾经在该事件对象中调用过。
5 stopImmediatePropagation()

阻止其余的处理程序执行。
6 isImmediatePropagationStopped()

返回 event.stopImmediatePropagation() 是否曾经在该事件对象中调用过。

事件处理方法

下表列出了重要的事件相关的方法 ——

序号 方法 & 描述
1 bind( type, [data], fn )

为每个匹配的元素将一个处理程序捆绑到一个或多个事件上(如点击)。也可以捆绑自定义事件。
2 off( events [, selector ] [, handler(eventObject) ] )

该方法实现的是 live 的对立面，它删除了捆绑的 live 事件。
3 hover( over, out )

模拟徘徊，例如将鼠标移动到一个对象上，并将鼠标从该对象上移开。
4 on( events [, selector ] [, data ], handler )

为所有当前的 − 以及之后的 − 匹配元素将一个处理程序捆绑到一个事件上(如点击)。 也可以捆绑自定义事件。
5 one( type, [data], fn )

为每个匹配的元素将一个处理程序绑定到一个或多个要被执行的事件上。
6 ready( fn )

当 DOM 准备好要被遍历或者操作时，绑定一个要被执行的函数。
7 trigger( event, [data] )

在每个匹配的元素上触发一个事件。
8 triggerHandler( event, [data] )

在一个元素上触发全部绑定的事件处理程序。
9 unbind( [type], [fn] )

该方法实现绑定相反的操作，它从每个匹配的元素中删除绑定的事件。

事件辅助方法

jQuery 也提供了一组事件辅助函数，这些函数可以用于触发一个事件或绑定上述任何类型的事件。

触发方法

下面的例子中将触发所有段落中的 blur 事件 ——

$("p").blur();

绑定方法

下面的例子将一个 click 事件绑定到所有的 < div> 中 ——

$("div").click( function () { 
   // do something here
});

这是 jQuery 提供的所有支持方法完整的列表 ——

序号 方法 & 描述
1 blur( )

触发每个匹配元素的 blur 事件。
2 blur( fn )

将一个函数绑定到每个匹配元素的 blur 事件中。
3 change( )

触发每个匹配元素的 change 事件。
4 change( fn )

将一个函数绑定到每个匹配元素的 change 事件中。
5 click( )

触发每个匹配元素的 click 事件。
6 click( fn )

将一个函数绑定到每个匹配元素的 click 事件中。
7 dblclick( )

触发每个匹配元素的 dblclick 事件。
8 dblclick( fn )

将一个函数绑定到每个匹配元素的 dblclick 事件中。
9 error( )

触发每个匹配元素的 error 事件。
10 error( fn )

将一个函数绑定到每个匹配元素的 error 事件中。
11 focus( )

触发每个匹配元素的 focus 事件。
12 focus( fn )

将一个函数绑定到每个匹配元素的 focus 事件中。
13 keydown( )

触发每个匹配元素的 keydown 事件。
14 keydown( fn )

将一个函数绑定到每个匹配元素的 keydown 事件中。
15 keypress( )

触发每个匹配元素的 keypress 事件。
16 keypress( fn )

将一个函数绑定到每个匹配元素的 keypress 事件中。
17 keyup( )

触发每个匹配元素的 keyup 事件。
18 keyup( fn )

将一个函数绑定到每个匹配元素的 keyup 事件中。
20 load( fn )

将一个函数绑定到每个匹配元素的 load 事件中。
21 mousedown( fn )

将一个函数绑定到每个匹配元素的 mousedown 事件中。
22 mouseenter( fn )

将一个函数绑定到每个匹配元素的 mouseenter 事件中。
23 mouseleave( fn )

将一个函数绑定到每个匹配元素的 mouseleave 事件中。
24 mousemove( fn )

将一个函数绑定到每个匹配元素的 mousemove 事件中。
25 mouseout( fn )

将一个函数绑定到每个匹配元素的 mouseout 事件中。
26 mouseover( fn )

将一个函数绑定到每个匹配元素的 mouseover 事件中。
27 mouseup( fn )

将一个函数绑定到每个匹配元素的 mouseup 事件中
28 resize( fn )

将一个函数绑定到每个匹配元素的 resize 事件中。
29 scroll( fn )

将一个函数绑定到每个匹配元素的 scroll 事件中。
30 select( )

触发每个匹配元素的 select 事件。
31 select( fn )

将一个函数绑定到每个匹配元素的 select 事件中。
32 submit( )

触发每个匹配元素的 submit 事件。
33 submit( fn )

将一个函数绑定到每个匹配元素的 submit 事件中。
34 unload( fn )

将一个函数绑定到每个匹配元素的 unload 事件中。
以上内容是否对您有帮助：

推荐文章

推荐教程

推荐课程

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号