1 . 绑定事件

语法 :

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", finction() {return false; })

通过使用 preventDefault( ) 方法值取消默认的行为.

$("form").bind("submit", function(event){

   event.preventDefault();

});

　　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 . 自定义事件

语法 :

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

});

　　5 . 单双击事件

在点击按钮的时候,会出现双击的时候会有2次单击事件的发生.

比如 :

解决 ;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <button>按钮</button>

    <script src="jquery.js"></script>

    <script>

        $(function () {

            // var time = null;

            //

            // $('div').click(function () {

            //     // 取消上次延时未执行的方法

            //     clearTimeout(time);

            //     //执行延时

            //     time = setTimeout(function(){

            //         //do function在此处写单击事件要执行的代码

            //     },300);

            // });

            //

            // $('div').dblclick(functin ({

            //     // 取消上次延时未执行的方法

            //     clearTimeout(time);

            //     //双击事件的执行代码

            // });

            // 单双击 的时间 间隔 是300ms

            // 如果解决 单双击冲突  

            // 先做两次单击 一次双击   中间间隔 小于300ms

            // 定义 timer是null,

            var timer = null;

            $('button').click(function(event) {

                // console.log(timer);

                //清楚定时器,用定时器的时候要先清除定时器.当我们双击的时候,在点击第一下的时候,时间没到300ms,

                // 所以不会走 timer = setTimeout(function() 函数.第二下点击的时候清除的是第一下点击的定时器,所以第二次

                // 没有到300ms.所以显示双击,在双击的时候清除第二次点击的定时器.

                clearTimeout(timer);

                // 定时器  300ms 一次性定时器

                timer = setTimeout(function(){

                    console.log('单机了');

                }, 300);

            });

            $('button').dblclick(function(event) {

                // console.log(timer);

                clearTimeout(timer);

                console.log('双机了');

            });

        })

    </script>

</body>

</html>

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

  1. jQuery的事件绑定与触发 - 学习笔记

    jQuery的事件绑定与触发 事件绑定 自动触发事件 常用的鼠标事件 事件冒泡和默认行为 事件冒泡 默认行为 获得当前鼠标的位置和按键 jQuery的事件绑定与触发 事件绑定 基本绑定 $(eleme ...

  2. [HTML5]原生事件绑定和jquery动态事件绑定的区别

    原生事件绑定: <!-- 标签上绑定的事件是由window对象帮助调用,因此方法内的this其实是window对象 --> <label><input type=&quo ...

  3. jquery 动态事件绑定(0512)

    jquery动态事件绑定,父元素需为静态元素,(不能是动态生成): $("#parent").on("click","#child",fun ...

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

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

  5. 对jQuery的事件绑定的一些思考

    jQuery的事件绑定 问题 首先我们看下面的一个非经常见的事件绑定代码: //example $('#dom').click(function(e){ //do something }); $('# ...

  6. jQuery的事件绑定命名空间

    jQuery的bind的函数在实际应用中用的不是特别多,只是他可以绑定一个事件,但不会即时触发,也可以通过unbind来解除绑定.在没有看到这篇文章之前,我一直不知道原来bind也可以有命名空间.事实 ...

  7. jQuery学习-事件绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 7 HTML&JS等前端知识系列之jquery的事件绑定

    preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...

  9. jQuery中事件绑定到bind、live、delegate、on方法的探究

    1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...

随机推荐

  1. Android 蓝牙技术 实现终端间数据传输

    蓝牙技术在智能硬件方面有很多用武之地,今天我就为大家分享一下蓝牙技术在Android系统下的使用方法技巧.蓝牙是一种短距离的无线通信技术标准,蓝牙协议分为4层,即核心协议层.电缆替代协议层.电话控制协 ...

  2. 测试Apache服务器及httpd: Could not reliably determine the server's fully qualified domain name解决办法

    测试Apache服务器: 重启apache: sudo /usr/local/apache/bin/apachectl restart 若出现错误: httpd: Could not reliably ...

  3. EasyMvc入门教程-图形控件说明（21）线形图+柱状图+饼形图

    本章将介绍一些基本但常用的图形:线型图,柱状图和饼形图. 以上三种图形对于的数据都是键值对数组,请参考第一个例子: @{ var data = new List<LineItem>(); ...

  4. windows核心编程 DLL技术 【转】

    注:本文章转载于网络,源地址为:http://blog.csdn.net/ithzhang/article/details/7051558 本篇文章将介绍DLL显式链接的过程和模块基地址重定位及模块绑 ...

  5. VS2010 + C#4.0使用 async + await

    方法一: 安装官方出的Microsoft.Bcl.Async包 最新发布日期为 2014/4/12,版本1.0.168 (不支持VS2010) 1.解决方案-右键-管理解决方案的NuGet程序包 2. ...

  6. Unique Binary Search Trees I&II——给定n有多少种BST可能、DP

    Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...

  7. Python 的下载安装

    学习Python牛逼的教程: http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000,本文 ...

  8. Linux环境变量PS1配置

    1. 说明: 在Shell下,我们能够拥有更加色慘斑斓的提示行信息.这能够通过改变bash的$PS1环境变量还设置,如以下就是提示行的一种: user@host$ root用户的提示是这种: user ...

  9. 彻底解决zend studio 下 assignment in condition警告

    最近在mac系统下安装zend studio作为php开发工具,把以前的代码导入,发现项目中有很多 “assignment in condition”的警告,造成原因是在条件判断的if.while中使 ...

  10. Laravel 5.4的本地化

    简介 Laravel 的本地化功能提供方便的方法来获取多语言的字符串,让你的网站可以简单的支持多语言. 语言包存放在 resources/lang 目录下的文件里.在此目录中应该有应用对应支持的语言并 ...