jQuery事件(四)
一、基本事件函数
下面事件函数中参数相关说明:
eventType:事件类型,字符串'click' 'submit'多个事件类型可以通过用空格隔开【一次性绑定'click submit'】
eventData:事件数据,一个对象
handler:事件处理函数
eventObjec:事件对象
data:传递给事件处理函数handler的额外数据
bind(eventType,[eventData ],handler(eventObject)) 【事件绑定】
同时绑定多个事件类型/处理程序
eg:
$("button").bind({
click:function(){$("p").slideToggle();}, //点击按钮对p标签进行滑动显示隐藏
mouseover:function(){$("div").css("background-color","red");} //鼠标移入按钮时设置匹配div的背景颜色为红色
});
unbind([eventType],[handler(eventObject)]) 【事件解绑】
a、无参时,.unbind() 将移除指定元素上所有绑定的处理程序
b、参数为某事件类型时,移除该事件类型上的所有绑定的处理程序
c、参数为事件类型,事件处理函数时,移除该事件类型上绑定的该处理函数【处理函数在绑定时需单独定义出来赋予函数名】
on( events,[selector],[data],handler(eventObject)) 【绑定一个或多个事件;(类似事件代理)】
a、有selector参数时,表示只能添加事件到指定元素的selector选择的后代元素上【函数内的事件对象target,currentTarget和this均为selector选中的元素】
b、无selector参数时,表示给指定元素绑定相应的events事件
off( events,[selector],[handler]) 【解除on上面绑定的一个或多个事件】
与上面的unbind()函数类似,用于解除on()方法绑定的事件
trigger( eventType,[extraParams]) 【模拟事件执行,即让事件自动触发执行】
根据绑定到匹配元素的给定的事件类型eventType执行该事件处理程序的行为。
extraParams传递给事件处理程序的额外参数,为数组类型。
eg:
$("div").click(function(event,a,b){}).trigger("click", [123, 456]); //模拟div点击事件自动执行并传递两个额外参数给执行函数
二、鼠标事件
click() 鼠标单击事件
dblclick() 鼠标双击事件
hover() 鼠标悬停事件
mousedown() 鼠标按下事件
mouseup() 鼠标抬起事件
mouseenter() 鼠标进入事件【不支持子元素】
mouseleave() 鼠标离开事件【不支持子元素】
mouseout() 鼠标离开事件【支持子元素】
mouseover() 鼠标进入事件【支持子元素】
mousemove() 鼠标移动事件
三、键盘事件 【只简单介绍事件类型】
keypress() 按键按下事件
keyup() 按键抬起事件
keydown() 键按下的过程发生的事件
四、表单事件
focus() 聚焦事件
blur() 失焦事件
change() 元素的值改变时激发的事件
select() 当textarea或文本类型的input元素中的文本被选择时触发的事件,绑定在单行文本框或多行文本框上
submit() 表单提交事件,绑定在form
jQuery事件(四)的更多相关文章
- 解密jQuery事件核心 - 模拟事件(四)
前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...
- HTML Select 标签选择后触发jQuery事件代码实例
页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- jQuery事件绑定on()、bind()与delegate() 方法详解
jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...
- 一大波jQuery事件即将来袭!
一.jQuery事件 1.focus()元素获得焦点 2.blur()元素失去焦点 3.change() 表单元素的值发生变化(可用于验证用户名是否存在) 4.click() 鼠标单击 5.dbcli ...
- jQuery 事件绑定 和 JavaScript 原生事件绑定
总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...
- JQuery --- 第三期 (jQuery事件相关)
个人学习笔记 1.JQuery事件绑定 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 【Python全栈-JavaScript】jQuery事件
jQuery事件 一.页面载入 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. 这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向 w ...
- jQuery事件绑定与常用事件
jQuery事件与js类似,只是在名称上将前面的on去掉了,例如jQuery的click.mousedown.keypress事件.jQuery绑定事件有2种方法,下面用最基本的例子做演示. ①直接绑 ...
随机推荐
- 201871010135 张玉晶 《面向对象程序设计(java)》第二周学习总结
201871010135 张玉晶 <面向对象程序设计(java)>第二周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...
- 201671030103 实验十四 团队项目评审&课程学习总结
项目 内容 这个作业属于哪个课程 任课教师首页链接 这个作业的要求在哪里 作业链接地址 课程学习目标 (1)掌握软件项目评审会流程 (2)反思总结课程学习内容 任务一: 团队项目Github仓库中提交 ...
- java spring框架的定时任务
由于测试的原因,最近有接触java spring @Scheduled的定时任务,当时还以为配置起来表达式和crontab是完全一样的,没想到还有些许不一样. 在spring中,一个cron表达式至 ...
- React和Redux的开发经验之谈
1.显示控制用state,共享数据用redux,觉得可以不用redux的就不要用 2.表单项集中的地方,推荐用高阶组件,单个表单项,不推荐用高阶组件 3.涉及对服务数据的处理,在redux的model ...
- zzulioj - 2624: 小H的奇怪加法
题目链接:http://acm.zzuli.edu.cn/problem.php?id=2624 题目描述 小H非常喜欢研究算法,尤其是各种加法.没错加法包含很多种,例如二进制中的全加,半加等.全加: ...
- 【CF848B】 Rooter's Song
题目链接 \(solution\) 类似于蚂蚁那道题的做法 弹性碰撞相当于交换位置并继续前进,考虑一个起点\((x,0)\),时间为\(t\)出发的\(dancer\),相当于从\((x,-t)\)的 ...
- java 中 public default protected private 的区别
对于继承自己的class,父类可以认为他们都是自己的子女,而对于和自己都在同一个目录下的class,可以认为都是自己的朋友. public:对所有用户开发,所有用户都可以直接调用 private:自己 ...
- docker Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Post
利用docker构建时,报错 + docker pull maven:3-alpine Got permission denied while trying to connect to the Doc ...
- odoo @api.constrains _sql_constrains
实现机制: @api.constrains('fields') 服务器启动时将模型中的所有约束方法注册到对象池中: 在create.write时会根据创建或修改的fields检查是否有对应的约束方法, ...
- PHP生成正则表达式的类
正则表达式,写起来还是比较费劲的,于是封装个类,初稿,抛砖引玉. 关于正则,建议参考 https://github.com/CyC2018/CS-Notes/blob/master/notes/%E6 ...