jQuery - Events操作

首页 / jQuery入门教程 / jQuery - Events操作

无涯教程可以使用事件创建动态网页,事件是Web应用程序可以检测到的操作。

绑定事件

使用jQuery事件模型,可以使用 bind()方法在DOM元素上创建事件处理程序,如下所示-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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>

此代码将使除法元素响应click事件;此后,当用户在该部门内单击时,将显示Alert

运行上面代码输出

bind()命令的完整语法如下:

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

以下是参数的描述-

  • eventType    -  包含JavaScript事件类型的字符串,如单击或提交。

  • eventData    -  这是可选参数,它是将传递给事件处理程序的数据映射。

  • handler         -  每次事件触发时执行的函数。

删除事件

通常,一旦创建了事件处理程序,该事件处理程序将在页面的剩余生命周期内保持有效。当您想要删除事件处理程序时,可能会需要。

jQuery提供了 unbind()命令来删除现有的事件处理程序。unbind()的语法如下:

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

以下是参数的描述-

  • eventType  -  包含JavaScript事件类型的字符串,如单击或提交。

  • handler       -  如果提供,则标识要删除的特定侦听器。

事件类型

Sr.No.Event Type & Remark
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

链接:https://www.learnfk.comhttps://www.learnfk.com/jquery/jquery-events.html

来源:LearnFk无涯教程网

卸载文档时发生。

事件属性

以下事件属性/属性是可用的,并且可以以独立于平台的方式安全地访问-
Sr.No.Property & Remark
1

altKey

如果在触发事件时按下Alt键,则设置为true;否则,则设置为false。在大多数Mac键盘上,Alt键标签为Option。

2

ctrlKey

如果在触发事件时按下Ctrl键,则设置为true;否则,则设置为false。

3

data

创建处理程序时,该值(如果有)作为第二个参数传递给bind()()命令。

4

keyCode

对于按键事件和按键事件,这将返回按下的键。

5

metaKey

如果在触发事件时按下Meta键,则设置为true;否则,则设置为false。 Meta键在PC上是Ctrl键,在Mac上是Command键。

6

pageX

对于鼠标事件,指定相对于页面原点的事件的水平坐标。

7

pageY

对于鼠标事件,指定相对于页面原点的事件的垂直坐标。

8

relatedTarget

对于某些鼠标事件,标识触发事件时光标离开或输入的元素。

9

screenX

对于鼠标事件,指定事件相对于屏幕原点的水平坐标。

10

screenY

对于鼠标事件,指定事件相对于屏幕原点的垂直坐标。

11

shiftKey

如果在触发事件时按下Shift键,则设置为true;否则,则设置为false。

12

target

标识触发事件的元素。

13

timeStamp

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

14

type

对于所有事件,指定触发的事件的类型(如:click)。

15

which

对于键盘事件,请指定导致事件的键的数字代码,对于鼠标事件,请指定按下的按钮(左为1,中为2,右为3)。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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>

运行上面代码输出

事件方法

有一个可以在事件对象上调用的方法列表-

Sr.No.Method & Remark
1 preventDefault()

阻止浏览器执行默认操作。

2 isDefaultPrevented()

返回是否曾经在此事件对象上调用过event.preventDefault()。

3 stopPropagation()

停止将事件冒泡到父元素,从而防止任何父处理程序收到该事件的通知。

4 isPropagationStopped()

返回是否曾经在此事件对象上调用过event.stopPropagation()。

5 stopImmediatePropagation()

停止执行其他处理程序。

6 isImmediatePropagationStopped()

返回是否曾经在此事件对象上调用event.stopImmediatePropagation()。

事件处理方法

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

Sr.No.Method & Remark
1 bind( type, [data], fn )

为每个匹配的元素将处理程序绑定到一个或多个事件(如click)。也可以绑定自定义事件。

2 off( events [, selector ] [, handler(eventObject) ] )

这与实时相反,它删除了绑定的实时事件。

3 hover( over, out )

模拟悬停,如在对象上上下移动鼠标。

4 on( events [, selector ] [, data ], handler )

将所有当前-和将来-匹配元素的处理程序绑定到事件(如click)。也可以绑定自定义事件。

5 one( type, [data], fn )

将处理程序绑定到一个或多个事件,以对每个匹配的元素执行一次。

6 ready( fn )

绑定每当准备好遍历和操纵DOM时要执行的函数。

7 trigger( event, [data] )

在每个匹配的元素上触发一个事件。

8 triggerHandler( event, [data] )

触发元素上的所有绑定事件处理程序。

9 unbind( [type], [fn] )

这与bind()相反,它从每个匹配的元素中删除绑定事件。

事件铺助方法

jQuery还提供了一组事件帮助器函数,可用于触发事件以绑定上述任何事件类型。

触发方式

以下是将触发所有段落的模糊事件的示例-

$("p").blur();

绑定方法

以下是将在所有<div>上绑定click事件的示例-

$("div").click( function () { 
   // do something here
});
这是jQuery提供的所有支持方法的完整列表-
Sr.No.Method & Remark
1

blur()

触发每个匹配元素的模糊事件。

2

blur(fn)

将函数绑定到每个匹配元素的模糊事件。

3

change()

触发每个匹配元素的更改事件。

4

change(fn)

将函数绑定到每个匹配元素的change事件。

5

click()

触发每个匹配元素的click事件。

6

click(fn)

将函数绑定到每个匹配元素的click事件。

7

dblclick()

触发每个匹配元素的dblclick事件。

8

dblclick(fn)

将函数绑定到每个匹配元素的dblclick事件。

9

error()

触发每个匹配元素的错误事件。

10

error(fn)

将函数绑定到每个匹配元素的错误事件。

11

focus()

触发每个匹配元素的焦点事件。

12

focus(fn)

将函数绑定到每个匹配元素的焦点事件。

13

keydown()

触发每个匹配元素的keydown事件。

14

keydown(fn)

将函数绑定到每个匹配元素的keydown事件。

15

keypress()

触发每个匹配元素的按键事件。

16

keypress(fn)

将函数绑定到每个匹配元素的按键事件。

17

keyup()

触发每个匹配元素的keyup事件。

18

keyup(fn)

将函数绑定到每个匹配元素的keyup事件。

19

load(fn)

将函数绑定到每个匹配元素的加载事件。

20

mousedown(fn)

将函数绑定到每个匹配元素的mousedown事件。

21

mouseenter(fn)

将函数绑定到每个匹配元素的mouseenter事件。

22

mouseleave(fn)

将函数绑定到每个匹配元素的mouseleave事件。

23

mousemove(fn)

将函数绑定到每个匹配元素的mousemove事件。

24

mouseout(fn)

将函数绑定到每个匹配元素的mouseout事件。

25

mouseover(fn)

将函数绑定到每个匹配元素的mouseover事件。

26

mouseup(fn)

将函数绑定到每个匹配元素的mouseup事件。

27

resize(fn)

将函数绑定到每个匹配元素的resize事件。

28

scroll(fn)

将函数绑定到每个匹配元素的滚动事件。

29

select()

触发每个匹配元素的选择事件。

30

select(fn)

将函数绑定到每个匹配元素的select事件。

31

submit()

触发每个匹配元素的Submit事件。

32

submit(fn)

将函数绑定到每个匹配元素的Submit事件。

33

unload(fn)

将函数绑定到每个匹配元素的unload事件。

这一章《jQuery - Events操作》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持,感谢!😊

好记忆不如烂笔头。留下你的足迹吧 :)

相关推荐

Java并发编程实战 -〔王宝令 - 〕

黄勇的OKR实战笔记 -〔黄勇 - 〕

Node.js开发实战 -〔杨浩 - 〕

陶辉的网络协议集训班02期 -〔陶辉 - 〕

为什么要两次声明 jQuery?

如何在没有要映射的对象数组的情况下在 React.js 中循环和渲染元素?

如何使用新的 JSON 数据手动更新数据表

带有 LIKE 的 Spring JPA @Query

如何判断是否有任何 JavaScript 事件侦听器/处理程序附加到元素/文档?

如果 iframe src 无法加载,则捕获错误.错误:-“拒绝在框架中显示 'http://www.google.co.in/'..”

视频推荐

jQuery-13-复习 更多视频教程 »