jQuery的事件绑定和解除

时间：2023-01-13 17:10:20

　　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次单击事件的发生.

比如 :

jQuery的事件绑定和解除

解决 ;

<!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的事件绑定和解除

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

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

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

  2. &lbrack;HTML5&rsqb;原生事件绑定和jquery动态事件绑定的区别

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

  3. jquery 动态事件绑定&lpar;0512&rpar;

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

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

    一.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&amp&semi;JS等前端知识系列之jquery的事件绑定

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

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

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

随机推荐

  1. ASP&period;NET Core 源码阅读笔记&lpar;1&rpar; ---Microsoft&period;Extensions&period;DependencyInjection

    这篇随笔主要记录一下ASP.NET Core团队实现默认的依赖注入容器的过程,我的理解可能并不是正确的. DependencyInjection这个项目不大,但却是整个ASP.NET Core的基础, ...

  2. Java排序算法——插入排序

    import java.util.Arrays; //================================================= // File Name : Select_S ...

  3. Objective-C数据类型、数据类型转换

    数据类型 1.Objective-C数据类型可以分为:基本数据类型.对象数据类型和id类型. 2.基本数据类型有:int.float.double和char类型. 3.对象类型就是类或协议所声明的指针 ...

  4. TeamForge使用指南

    1.什么是TeamForge 可以把TeamForge简单的理解为另外一种github 2.TeamForge的地址 与Project有关,一般会有明确的Link 3.TeamForge登录 用户名和 ...

  5. git异常操作解决办法合集

    1. git add .后发现提交错误,想撤销 git reset head 文件名-----撤销某个文件 git reset head --hard 强制撤销当前的所有操作到上次提交的版本 2. g ...

  6. JQuery Checkbox 获取多选值 Checkbox选中个数

    1.获取checkbox选中个数 $("input[name='ckb-jobid']:checked").length $("input[type='checkbox' ...

  7. 详解MySQL中concat函数的用法（连接字符串）

    MySQL中concat函数 使用方法: CONCAT(str1,str2,…) 返回结果为连接参数产生的字符串.如有任何一个参数为NULL ,则返回值为 NULL. 注意: 如果所有参数均为非二进制 ...

  8. docker - kubernetes 网络（转）&plus; 架构图

    1.host网络 连接到 host 网络的容器共享 Docker host 的网络栈,容器的网络配置与 host 完全一样.可以通过--network=host指定使用 host 网络.docker ...

  9. 判断字符串是否为json字符串

    public static class JsonSplitExtention { public static bool IsJson(this string json) { return JsonSp ...

  10. Scrapyd API的安装

    安装好了Scrapyd之后,我们可以直接请求它提供的API来获取当前主机的Scrapy任务运行状况.比如,某台主机的IP为192.168.1.1,则可以直接运行如下命令获取当前主机的所有Scrapy项 ...

相关文章