五、jQuery事件处理

最新推荐文章于 2024-08-30 11:12:09 发布

2401_85124192

最新推荐文章于 2024-08-30 11:12:09 发布

阅读量320

点赞数 4

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/2401_85124192/article/details/139593639

版权

<!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>

事件举例

鼠标拖动




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



图3 jQuery事件举例



注：本文通过 CDN（内容分发网络）引用jQuery，用户可以不下载存放 jQuery。

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

,size_20,color_FFFFFF,t_70,g_se,x_16)

图3 jQuery事件举例

注：本文通过 CDN（内容分发网络）引用jQuery，用户可以不下载存放 jQuery。


<head>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

</script>



### 总结

>技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。



![](https://img-blog.csdnimg.cn/img_convert/c597c1a883c14cd9cf4d9c07acb312aa.webp?x-oss-process=image/format,png)

2401_85124192

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
五、jQuery事件处理

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。图3 jQuery事件举例注：本文通过 CDN（内容分发网络）引用jQuery，用户可以不下载存放 jQuery。### 总结>技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。!
复制链接

扫一扫