五、jQuery事件处理(1)

2401_84093407

于 2024-05-16 05:44:41 发布

阅读量341

点赞数 5

分类专栏：程序员文章标签： jquery 前端 javascript

本文链接：https://blog.youkuaiyun.com/2401_84093407/article/details/138937889

版权

程序员专栏收录该内容

271 篇文章

订阅专栏

 <p>这是一段文字</p>

 <button>请点击这里</button>




  例2中通过bind()方法指定 contextmenu(鼠标右击)事件的处理函数，在该函数中返回false，从而取消事件的默认行为。  

【例2】

<!doctype html>

bind方法

 <p>您右击网页，将不会弹出右键快捷菜单！</p>




![在这里插入图片描述](https://img-blog.csdnimg.cn/dece941fb2b94eb69abb72cb3be35bdc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z5Liq5pi156ew5oiR5oOz5LqGMjDliIbpkp8=,size_20,color_FFFFFF,t_70,g_se,x_16)



图1 bind方法



### []( )（2）delegate()方法



>   `delegate()`方法是对指定元素的特定子元素增加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用`delegate()`方法的事件处理程序适用于当前或以后由脚本创建的新元素。其绑定事件的语法格式如下：

$(选择器).delegate(childSelector,eventType, function)




其中， childSelector 表示指定事件的子元素选择器；eventType指事件的类型；function指事件处理函数。



  例3将文档中`<ul>`元素下的`<li>`子元素的click事件绑定到指定的事件处理函数，单击`<li>`元素时，将在所有`<li>`元素的最后插入一个`<li>`元素，并且新添加`<li>`元素的内容是一个定义好的数组内容。



【例3】

<!doctype html>

delegate方法

```
<li>足球</li>
```




![在这里插入图片描述](https://img-blog.csdnimg.cn/e62f4ea554324b49858b67fd7ddb1d10.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z5Liq5pi156ew5oiR5oOz5LqGMjDliIbpkp8=,size_20,color_FFFFFF,t_70,g_se,x_16)



图2 delegate方法



[]( )3.jQuery事件的方法

----------------------------------------------------------------------------



>   jQuery提供了一组事件相关的方法，用于处理各种HTML事件。jQuery常用事件的方法及说明见表1。



表1 jQuery常用事件的方法及说明



| 事件的方法 | 说明 |

| :-: | :-- |

| `$("选择器").click`) | 鼠标单击触发事件，参数可选(data，function) |

| `$("选择器").dblelick()` | 双击触发事件，参数可选(data，function) |

| `$("选择器").mousedown()/mouseup()` | 鼠标按下／弹起触发事件 |

| `$("选择器”).mousemove()` | 鼠标移动触发事件 |

| `$("选择器").mouseover()/mouseout()` | 鼠标移入／移出触发事件 |

| `$("选择器”).mouseenter()/mouseleave ()` | 鼠标进入／离开触发事件 |

| `$("选择器").hover(func1，func2)` | 鼠标移入调用func1函数，移出调用func2函数 |

| `$("选择器").focusin()` | 鼠标聚焦到该元素时触发事件 |

| `$("选择器").focusout()` | 鼠标失去焦点时触发事件 |

| `$("选择器").focus()/blur()` | 鼠标聚焦／失去焦点触发事件（不支持冒泡） |

| `$("选择器").change()` | 表单元素发生改变时触发事件 |

| `$("选择器").select()` | 文本元素被选中时触发事件 |

| `$("选择器").submit()` | 表单提交动作触发事件 |

| `$("选择器").keydown()/keyup()` | 键盘按键按下／弹起触发事件 |

| `$("选择器").keypress()` | 键盘按下过程中触发事件 |



  例4是单击按钮后，在一个DIV块上按住左键不放进行拖动，这个DIV块会跟随鼠标移动，松开左键之后，DIV块会停止跟随。  

【例4】

<!doctype html>

事件举例

鼠标拖动