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. MetaQ对接SparkStreaming示例代码

    由于JavaReceiverInputDStream<String> lines = ssc.receiverStream(Receiver<T> receiver) 中 没有 ...

  2. CF - 420B - Online Meeting（思维）

    题意:n 个人參加线上会议.某经理记录了中间一段时间的 m 条上下线记录(1 ≤ n, m ≤ 105).+ 表示上线,- 表示下线. leader是指仅仅要有人在线,他都在线的人.求全部可能的lea ...

  3. AutoCAD如何设置A0A1图纸

    可以从网上下载相应的图纸模板,下载之后可以发现有相应的文字和模板文件   随后我们新建并找到这个dwt文件模板(比如要做一个A1的模板)   随后即可发现模板的样式,包括每种颜色的粗细,颜色和明细栏等 ...

  4. （转）微信小程序开发项目——笑话大全

    此项目是学习完微信小程序后实现的一个demo,采用聚合数据的免费api获取最新的文本笑话和趣图(图片和gif图)   项目地址:https://github.com/zhijieeeeee/wecha ...

  5. vue 监听 watch 使用

    1.api https://cn.vuejs.org/v2/api/#watch 有2个配置: (1)深度 watcher deep: true(2)该回调将会在侦听开始之后被立即调用 immedia ...

  6. bzoj1061【NOI2008】志愿者招募

    1061: [Noi2008]志愿者招募 Time Limit: 20 Sec  Memory Limit: 162 MB Submit: 2740  Solved: 1703 [Submit][id ...

  7. php程序的三大流程控制

    php程序的三大流程控制 ①  顺序控制(从上到下.从左到右) ②分支控制 if(条件表达式){ //n多语句 }else if (条件表达式){ //n 多语句 }else if(条件表示式){ / ...

  8. scrapy递归抓取网页数据

    scrapy spider的parse方法能够返回两种值:BaseItem.或者Request.通过Request能够实现递归抓取. 假设要抓取的数据在当前页,能够直接解析返回item(代码中带**凝 ...

  9. 2014年7月微软MVP名单揭晓！

    微软公司于2001年8月起開始在亚洲与各大基本的第三方站点上的微软技术相关论坛合作,微软称之为"亚洲社区支持"计划.    为了鼓舞大家在论坛中更好地互相帮助,共同提高,微软在全亚 ...

  10. python之脚本参数optparse

    import optparse usage = "myprog[ -f <filename>][-s <xyz>] arg1[,arg2..]" opter ...