语法:

$(selector).bind(eventType[, eventData], handler(eventObject));

参数解释:

    <li>eventType(String): 一个包含一个或多个DOM事件类型的字符串, 比如"click"或"submit"或自定义事件的名称。</li>
    <li>eventData(Ojbect): 可选,它包含的数据键值对映射将被传递给时间处理程序</li>
    <li>handler(function): 每当时间触发时执行的函数</li>

    作用:为每一个匹配元素的特定时间(如click)绑定一个时间处理器函数。

    示例代码:

    .bind()的一个基本用法,绑定一个或者多个DOM事件

    当每个p标签被点击的时候,显示其文本

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>bind Demo</title>
    <style type="text/css">
    p{
    background-color: yellow;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
    } p.over{
    background-color: #ccc;
    } span{
    color: red;
    } </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
    $("p").bind("click", function(event){
    $("span").text("Click happened!"); }); $("p").bind("dblclick", function(){
    $("span").text("Double-click happened!");
    }); $("p").bind("mouseenter mouseleave", function(event){
    $(this).toggleClass("over");
    });
    })
    </script>
    </head>
    <body>
    <p>Click or double clice here.</p>
    <span></span>
    </body>
    </html>

    还可以在event处理之前传递一些附加的数据

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

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

    1. 关于Jquery的delegate绑定事件无效

      今天在做一个页面,用的是easyui页面有很多的tabs,里面都放了iframe 需要在load事件动态调整iframe高度 发现始终无法使用delegate来绑定load事件. 纠结了一下午发现了问 ...

    2. jQuery学习-事件之绑定事件(三)

      在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event ...

    3. jQuery学习-事件之绑定事件(二)

      在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) {   ...

    4. JQuery Mobile - 为什么绑定事件后会被多次执行?

      JQuery Mobile 在绑定事件时候,发现会被多次执行,为什么啊? 原来,jquery click  不是替换原有的function ,而是接着添加,所以才会执行次数越来越多,怎么办才能按需实现 ...

    5. jquery-10 jquery中的绑定事件和解绑事件的方法是什么

      jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...

    6. 2017年3月25日工作日志:Jquery使用小结[绑定事件判断、select标签、军官证正则]

      jQuery获取DOM绑定事件 在1.8.0版本之前,我们要想获取某个DOM绑定的事件处理程序可以这样: $.data(domObj,'events');//或者$('selector').data( ...

    7. jQuery添加html绑定事件

      jQuery添加html绑定事件 $("#xxx").on("click",".dev",function(){ });

    8. jquery中on绑定事件

      之前项目中动态创建的标签元素  在绑定事件的时候  都是无效  无论如何都不能触发 eg:在页面加载完成之后   再由脚本动态创建的<div>元素  在绑定事件的时候 例如click事件 ...

    9. jquery之on()绑定事件和off()解除绑定事件

      off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该 ...

    10. jQuery的live绑定事件在mobile safari(iphone / ipad / ipod)上失效的解决方案

      jQuery的live绑定为什么会在mobile safari上失效呢?其实可以追溯到jQuery里live的实现方式.live的实现方式实际上是通过事件委托机制来实现的,也就是说是通过诸如冒泡的方式 ...

    随机推荐

    1. Java EE javax.servlet中的ServletContext接口

      ServletContext接口 public interface ServletContext (https://docs.oracle.com/javaee/7/api/javax/servlet ...

    2. Neo4j Cypher语法(二)

      目录 4 子句 4.1 CREATE 4.2 MATCH 4.3 Match 4.4 Create match return连用来返回一个关系基础 4.5 Optional_match 4.6 Wit ...

    3. JS实现带省略号的长分页显示

      // 刷新|生成分页信息 function refreshPageInfo(data, pageIndex) { var pageSize = data.pageCount pagingInfo.ht ...

    4. 进阶Java编程(13)反射与Annotation

      1,反射取得Annotation信息 从JDK1.5之后Java提供了Annotation技术支持,这种技术为项目的编写带来了新的模型,而后经过了十年的发展,Annotation的技术得到了非常广泛的 ...

    5. vs2013nuget版本更新

      记录记录. NuGet 程序包还原失败: “Newtonsoft.Json 12.0.1”程序包需要 NuGet 客户端版本“2.12”或更高版本,但当前的 NuGet 版本为“2.7.40911.2 ...

    6. SNI功能在NetScaler上的实现

      SNI功能在NetScaler上的实现 来源  https://raynorli.com/2018/09/11/sni-on-netscaler/ 现网中经常是一台主机上运行多个Web站点,如果启用了 ...

    7. 在Win10上运行ESXI-Comstomer

      在Win10上运行ESXI-Comstomer 来源 https://www.v-front.de/p/esxi-community-packaging-tools.html ESXi-Customi ...

    8. JS基础_for循环练习3

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

    9. UVA10603Fill题解--BFS

      题目链接 https://cn.vjudge.net/problem/UVA-10603 分析 经典的倒水问题,直接BFS. 对于喜闻乐见的状态判重,一开始想来个哈希函数把一个三元组映射成一个数,后面 ...

    10. python对比线程,进程,携程,异步,哪个快

      目录概念介绍测试环境开始测试测试[单进程单线程]测试[多进程 并行]测试[多线程 并发]测试[协程 + 异步]结果对比绘图展示概念介绍首先简单介绍几个概念: 进程和线程进程就是一个程序在一个数据集上的 ...