1、绑定事件

$('获取的标签对象').bind('要操作的方法,  {操作的内容  是字典的形式},function(){} ')

语法:

bind(type,data,fn)

描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。

参数解释:

type (String) : 事件类型

data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象

fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数

示例:

当每个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();
});

绑定多个事件:

        $(function(){
$('p').bind('mouseover click',{name:'张飞'}, function(ev) { //绑定两个事件
console.log(1);
$(this).text(ev.data.name)
})

2、解绑事件

语法:

unbind(type,fn);

描述:

bind()的反向操作,从每一个匹配的元素中删除绑定的事件。

如果没有参数,则删除所有绑定的事件。

如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。

参数解释:

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() );
});

jQuery的事件绑定和解绑的更多相关文章

  1. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  2. 前端 -----jQuery的事件绑定和解绑

    11-jQuery的事件绑定和解绑   1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (S ...

  3. 10 jQuery的事件绑定和解绑

    1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (String) : 事件类型 data ( ...

  4. jQuery系列(十一):jQuery的事件绑定和解绑

    1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (String) : 事件类型 data ( ...

  5. python全栈开发day49-jquery的位置信息、事件流、事件对象,事件委托,事件绑定和解绑

    一.昨日内容回顾    1. jQuery的属性操作 1) html属性操作:attr 2) DOM属性操作:prop 3) 类样式操作:addClass.removeClass.toggleClas ...

  6. 11-jQuery的事件绑定和解绑

    1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (String) : 事件类型 data ( ...

  7. jQuery笔记(事件绑定和解绑)

    事件绑定一.bind()1.传两参数 第一个参数是事件名,第二个是事件处理函数2.传键值对(对象) <body> <input type="button" val ...

  8. jQuery绑定和解绑点击事件及重复绑定解决办法

    原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...

  9. 原生js绑定和解绑事件,兼容IE,FF,chrome

    主要是最近项目中用到了原生的js 解绑和绑定 事件  然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了. 需求:当鼠标移上去以后,给Select加载元素,接着解 ...

随机推荐

  1. Linux C代码 获取IP地址

    Ubuntu 16.04下,可编译通过: #include <stdio.h> #include <ifaddrs.h> #include <arpa/inet.h> ...

  2. 构造函数与普通函数关于“new”操作符

    javascript中构造函数与普通函数的区别还有关于“new”操作符的一些原理   有一种创建对象的方法叫做工厂模式,例如: 1 function person(name,age){ 2 var o ...

  3. app接口,如何保证是由app内部调用而非外部模拟post请求调用。

    在爬虫快手主播信息的时候,发现只要我改动一下参数,比如第一页 page=1的时候,需要爬下一页,把page改为2发现提示sign验证失败了 也就是说,快手在开发的时候考虑了有人抓包到接口后,通过修改参 ...

  4. Vue vs React: Javascript 框架之战

    https://baijiahao.baidu.com/s?id=1608210396818353443&wfr=spider&for=pc    原文档 正如我们之前提到的,Word ...

  5. (转)Linux企业运维人员常用的150个命令分享

    Linux企业运维人员常用的150个命令分享 原文:http://www.jb51.net/article/127014.htm 本文将向大家介绍Linux企业运维人员常用的150个命令,如有不足之处 ...

  6. Oracle 通过子查询批量添加、修改表数据

    1.通过查询快速创建表 create table test1(id,job,mgr,sal) as () ) ---这是一个分页查询 ok,表创建成功 2.通过查询快速创建视图 create or r ...

  7. jmeter调试脚本之变量参数化

    前言 对于参数化,觉得用得最多的应该是csvread函数.csv data config以及用户自定义变量(前一篇文章已经进行了讲解)控制器这几个 案例:bugfree ,提交bug,参数bug名称和 ...

  8. 【随笔】Linux主机简单判断CC攻击的命令

    今天看到一个很有意思的命令tcpdump,在这里记录下. 如果想要看tcpdump的详细用法,可以点击这里. 什么是CC攻击? 关于CC攻击,这里引用百度的解释: CC攻击的原理就是攻击者控制某些主机 ...

  9. idea maven install 卡住,无报错排查。

    今天使用idea打包,执行install,看控制台日志,卡主了(意思是日志不继续在控制台输打印了,卡主了,也看不到错误),也没有报错,然后进行排查. 进入dos命令,进入到项目的根目录,使用 运行 m ...

  10. Hackers top in China

    黑客,英文hacker.精通计算机各类技术的计算机高手,泛指擅长IT技术的人群.计算机科学家. 最近受某机构所托搜集国内活跃黑客近况.本着客观专业,权威可信的原则参考了国内从00年到最新的黑客榜单,以 ...