jQuery得事件绑定
1、 绑定事件
语法
bind(type,data,fn)
描述:为每一个匹配元素得特定事件绑定一个事件处理器函数。
参数解释:
type:事件类型
data:作为event.data属性值传递给事件对象得额外数据对象
fn: 绑定到每个元素的事件上面的处理函数
当每个p标签被点击的时候,弹出其文本
$("p").bind("click", function(){alert( $(this).text() ); });
你可以在事件处理之前传递一些附加的数据。
function handler(event) { //event.data 可以获取bind()方法的第二个参数的数据alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler)
通过返回false来取消默认的行为并阻止事件起泡。
$("form").bind("submit", function() { return false; })
通过使用 preventDefault() 方法只取消默认的行为。
$("form").bind("submit", function(event){event.preventDefault(); });
2、解绑事件
语法:
unbind(type,fn);
描述:
如果没有参数,则删除所有绑定的事件。
如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。
参数解释:
type (String) : (可选) 事件类型
fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数
示例:
把所有段落的所有事件取消绑定
$("p").unbind()
将段落的click事件取消绑定
$("p").unbind( "click" )
删除特定函数的绑定,将函数作为第二个参数传入
var foo = function () {//绑定事件和解绑事件的事件处理函数 };$("p").bind("click mouseenter", foo); // 给p段落绑定click mouseenter事件$("p").unbind("click", foo); // 只解绑了p段落标签的click事件
3.自定义事件
其实事件的绑定和解绑,都是我为了自定义事件做准备(大家把jQuery的提供的事件熟记在心),以后对jquery熟了以后,可以玩一下自定义事件
语法:
trigger(type,data);
描述:在每一个匹配的元素上触发某类事件,它触发的是由bind()注册的自定义事件。
参数解释:
type (String) : 要触发的事件类型
data (Array) : (可选)传递给事件处理函数的附加参数
示例:
给一个按钮添加自定义的事件
$('button').bind('myClick',function(ev,a,b){//给button按钮添加的自定义事件myClick事件 })
然后通过trigger()触发自定义的事件
$('button').trigger('myClick',[1,2])
4.补充 一次性事件
语法:
one(type,data,fn)
描述:
为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同
参数解释:
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn (Function) : 绑定到每个匹配元素的事件上面的处理函数
示例:
当所有段落被第一次点击的时候,显示所有其文本。
$("p").one("click", function(){ //只有第一次点击的时候才会触发,再次点击不会触发了alert( $(this).text() ); });
转载于:https://www.cnblogs.com/wanrong/p/9517658.html
jQuery得事件绑定相关推荐
- jQuery之事件绑定到触发全过程及知识点补充
前言: 最重要的还是最后的流程图,可以试着根据流程图手写实现$().on(),下篇文章会放出模拟实现的代码. 一.举例 <div id="A" style="bac ...
- HTML——jQuery之事件绑定、取消事件绑定及事件委托
事件绑定 事件绑定有两种方法:分别是:.click() 和.on() <!DOCTYPE html> <html lang="en"> <head&g ...
- jQuery的事件绑定和解绑
1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (String) : 事件类型 data ( ...
- jQuery jq事件绑定
jQuery已经很多年没有更新过了,因此ES6新增的一些事件和箭头函数等,它是不支持的
- jQuery之事件绑定
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 下面是具体的用法: <script type="text/javascript"> ...
- java mvc jquery weui_WEUI 事件绑定
1.**简易的输入同步框** 所需用到的事件为bindinput,详情可以查看[开发文档][Link 1] > 通过bindinput事件来监听输入框的值是否发生改变且获取到改变后的值,之后在j ...
- jQuery文本框(input textare)事件绑定方法教程
jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接 ...
- jQuery事件绑定on()、bind()与delegate() 方法详解
啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是 ...
- 1、jquery事件绑定和委托的实现
jQuery的事件绑定和委托可以使用 on().one().bind().live().delegate()等方法实现. 1.on() : 语法:$(selector).on(event,child ...
最新文章
- 外卖小哥转行IT面完阿里后,又回去送外卖了,真实经历!
- centos下如何停止ping命令
- 丹琦女神的对比学习新SOTA,在中文表现如何?我们补充实验后,惊了!
- 全国高校安徽考区计算机,关于做好2021年上半年全国高校(安徽考区)计算机水平考试报名工作的通知...
- rds基于什么开发_玩物得志: 基于DataWorks+MaxCompute+MC-Hologres 构建大数据平台
- 用C++实现Logo语言的基本命令。
- window上装python,pip
- 实例展示:用css实现网页图片特效
- 定义一个长方形类,求周长和面积--学习笔记--16
- Docker 入门,万字详解!
- jquery ui和easy ui联合使用
- 数字电路的一些基本知识
- android 翻书动画效果怎么做,android ViewPager实现滑动翻页效果实例代码
- Vue爬坑之旅(二十一):vue使用富文本编辑器vue-quill-editor实现配合后台将图片上传至七牛
- 《时代》发布2010百人榜:科技业乔布斯李彦宏等上榜
- keras安装教程 linux,Linux+Anaconda+ tensorflow + keras 安装
- bert4keras中预训练代码阅读
- 机器学习中的数学(2):均数
- MATLAB文件中文乱码问题
- 防火墙 -- 负载均衡
热门文章
- openGauss 正式开源并成立开源社区
- .NET Framework 4.5的C#中的对话框消息
- 微软发布首个 Chromium Edge stable 预览版
- ASP.NET Core——身份验证UI安装
- python可哈希_Python,TypeError:不可哈希类型:'list'
- python正则化_Python正则表达式
- python第三周笔记_Python第四周 学习笔记(1)
- jenkins访问地址_运维机器人hubot集成jenkins
- phpstorm 如何设置函数的注释内容
- java 数据库mysql_java是怎么连接mysql数据库的