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. 前端模板adminlte

    adminlet是一个前端模板,包含各种各样的功能,自己的网站可以根据需要进行修改:可以免费使用,也有收费增强版,界面如下: 参考: 1.https://adminlte.io/ 2.https:// ...

  2. VS2010 MFC中 创建文件夹及文件判空的方法

    1. MFC中 创建文件夹的方法如下: CString strFolderPath = "./Output"; //判断路径是否存在 if(!PathIsDirectory(str ...

  3. DB11 TCP数据协议拆包接收主要方法

    北京地标(DB11) 据接收器. /// <summary> /// DB11协议拆包器 /// </summary> public class SplictProtocol ...

  4. Google SEO 学习网站记录

    在搜索结果中创建良好的标题和摘要: https://support.google.com/webmasters/answer/35624?hl=zh-Hans&ref_topic=600194 ...

  5. Notification(二)——PendingIntent的flag导致数据同样的问题

    MainActivity例如以下: package cc.cu; import android.os.Bundle; import android.view.View; import android. ...

  6. JAVA基础针对自己薄弱环节总结01（循环之前的知识）

    java中的标识符 组成:数字.字母.下划线.美元$符号组成.  规则:不能由数字开头.  类名:每一个单词的首字母大写  包名:所有小写  变量名.方法名:第一个单词首字母小写.后面首字母大写  常 ...

  7. MD5算法了解(JAVA实现)

    MD5算法:尽管已经被破解,但任然广泛应用于各个领域中 如文件校验:当我们下载文件时为了保证文件的安全性,我们能够在其站点上找到相应的md5值进行校验,假设md5值不一致,也就是说文件被人动过(一般都 ...

  8. 用PROXYCHAINS实现SSH全局代理

    NUX下可以实现SSH全局代理的软件有tsocks和proxychains两种,但是个人感觉proxychains要更加稳定简单. $ yum install proxychains # vim /e ...

  9. dockerfile VOLUME 对外暴露目录设置问题

    最近遇到一个特殊问题, 容器对外映射挂载目录 , 发现容器中的目录并没有映射到宿主机上. 后经排查是是镜像中没有指定 volume # 例如 FROM debian:wheezy VOLUME /da ...

  10. el表达式注意

    如果action那边是String类型,el表达式进行判断的时候必须加引号,即使是数字也要加. 否则可能导致windows正常,linux出错.