刚开始我们先看一下它的定义：

.bind( eventType [, eventData], handler(eventObject))

.Bind()方法的主要功能是在向它绑定的对象上面提供一些事件方法的行为。期中它的三个参数的意义分别如下：

 eventType是一个字符串类型的事件类型，就是你所需要绑定的事件。这类类型可以包括如下：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。这里需要注意的是，这里用的都是javascript里面的事件方法，而不是JQuery里面的，JQuery里面的事件方法均在JavaScript 前面多了一个“on”，比如onclick,onblur 等等。

eventData参数是一个可选参数，不过它在平时用的比较少。如果提供了这个参数，那么我们就能把一些附加信息传递给事件处理函数了。这个参数有个很好的用处，就是处理闭包带来的问题。待会在给大家举实例。

Handler是用来绑定的处理数，其实也也就是回调函数，处理完数据之后相应的方法。

1.第一个简单的bind ()事件---Hello Word

<input id="BtnFirst"type="button"value="Click Me"/>
$(function () {

    $("#BtnFirst").bind("click", function () {

        alert("Hello World");

    });

})

打开页面之后，点击按钮“Click Me”，就会弹出”Hello World”。这算是我们最简单的绑定事件吧。很简单吧。

2.绑定多个事件

我们可以通过bind()来绑定多个事件（其实，这也就是JQuery以及Linq中非常有名的链式编程）。实现的主要功能就是当我们点击的时候，弹出“Hello World”，当离开button的时候，显示出一个div。

<div>

   <input id="BtnFirst"type="button"value="Click Me"/></div>

   <div id="TestDiv"style=" width:200px; height:200px; display:none; ">

</div>
$(function () {

    $("#BtnFirst").bind("click", function () {

        alert("Hello World");

    }).bind("mouseout", function () {

        $("#TestDiv").show("slow");

    });

})

这段代码页很容易理解，就是当button被点击的时候，弹出一个"Hello World"，在离开的时候，在把div给显示出来。JQuery里的动画，均可以用“slow”、“fast”和“normal”，当然你还可以设置相关的毫秒数。

3.bind()事件的对象

Handler这个回调函数可以接受一个参数，当这个函数被调用时，一个JavaScript事件对象会作为一个参数传进来。

这个事件对象通常是没有必要且可以省略的参数，因为当这个事件处理函数绑定的时候就能够明确知道他在触发的时候应该做些什么，通常就已经可以获得充分的信息了。然而在有些时候，在事件初始化的时候需要获取更多关于用户环境的信息。

给一个JQuery官网上面的例子：

<style>

    p {background:yellow;font-weight:bold;cursor:pointer;3 padding:5px;}

    p.over {background:#ccc;}

    span {color:red;}

</style>
<p>Click or double click here.</p>

<span></span>
<script>

    $("p").bind("click", function(event){

        var str = "( " + event.pageX + ", " + event.pageY + " )";

        $("span").text("Click happened! " + str);

    });

    $("p").bind("dblclick", function(){

        $("span").text("Double-click happened in " + this.nodeName);

    });

    $("p").bind("mouseenter mouseleave", function(event){

        $(this).toggleClass("over");

    });

</script>

这里的主要功能是为了实现当用户点击p这个对象的时候，把当前相对于页面的坐标显示在span标签里面，这里就用到了event这个事件。把参数传进去。
4.unbind()事件

unbind([type],[data]，Handler) 是
bind()的反向操作，从每一个匹配的元素中删除绑定的事件。如果没有参数，则删除所有绑定的事件。你可以将你用bind()注册的自定义事件取消绑
定。如果提供了事件类型作为参数，则只删除该类型的绑定事件。如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

<body onclick="MyBodyClick()">

    <div onclick="MyClickOut()">

        <div onclick="MyClickInner()">

            <span id="MySpan">I love JQuery!! </span>

        </div>

    </div>

    <span id="LooseFocus">失去焦点</span>

</body>
function MyClickOut() {

   alert("outer Div");

}

function MyClickInner() {

   alert("Inner Div");

}

function MyBodyClick() {

   alert("Body Click");

}

var foo = function () {

   alert("I'm span.");

}

$(function () {

   $("#MySpan").bind("click", foo);

})

$(function () {

   $("#LooseFocus").unbind("click", foo);

})

上面的代码也很好理解，就是当用户的鼠标在span上面停留的时候，然后把span的click事件给取消掉。所以，最后它只会弹出body里面的alert。

最后，简单的了解一下one()事件的使用，其实one和bind是一样，都是为了绑定事件而产生的。One与bind基本上差不多，不同的在调用 jQuery.event.add时，把注册的事件处理的函数做了一个小小的调整。One调用了jQuery.event.proxy进行了代理传入的事 件处理函数。在事件触发调用这个代理的函数时，先把事件从cache中删除，再执行注册的事件函数。这里就是闭包的应用，通过闭包得到fn注册的事件函数 的引用。

使用规则： one(type,[data],fn)

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。 在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。

贴一下，bind和one的各自代码的实现,看官可以稍微的做一个比较：

Bind()代码的实现：

bind : function(type, data, fn) {

    return type == "unload" ? this.one(type, data, fn) : this.each(function() {//fn || data, fn && data实现了data参数可有可无

        jQuery.event.add(this, type, fn || data, fn && data);

    });

}

One()  代码的实现：

one : function(type, data, fn) {

    var one = jQuery.event.proxy(fn || data, function(event) {

        jQuery(this).unbind(event, one);

        return (fn || data).apply(this, arguments);/this->当前的元素

    });

    return this.each(function() {

        jQuery.event.add(this, type, one, fn && data);

    });

}

5.最后呢，其实想在贴一个冒泡事件，因为在处理绑定事件的时候，如果调用内部的事件 有可能会触发外面的事件，所以给大伙一个借鉴吧。

javascript事件冒泡的文章：http://www.2cto.com/kf/201111/110252.html

简单的说，何为冒泡事件？其实，简单的理解是，也可以说是事件传播，它会从内部的控件广播到父类的元素，然后接着一直往上到祖先级别的元素。

则 冒泡实例代码：

<body onclick="MyBodyClick()">

    <div onclick="MyClickOut()">

      <div onclick="MyClickInner()">

               <span id="MySpan">

                    I love JQuery!!

                </span>

        </div>

    </div>

</body>
<script type="text/javascript">

   function MyClickOut() {

      alert("outer Div");

   }

   function MyClickInner() {

      alert("Inner Div");

   }

   function MyBodyClick() {

      alert("Body Click");

   }

   $(function () {

      $("#MySpan").bind("click", function (event) {

         alert("I'm span");

         event.stopPropagation();

   });

</script>

JQuery 的Bind()事件的更多相关文章

  1. js的onclick和jquery的bind事件执行先后顺序

    近期在项目中为每一个ajax触发按钮写正在加载的效果,用的是bootstarp 代码如下 $(function(){ $('.btn').bind('click',function(e){ var $ ...

  2. jquery中bind事件时的命名空间用法(转)

    场景:页面上的某个元素bind多个click事件处理函数,视用户的具体交互情况来决定到底使用哪个处理函数. 问题: unbind时会解绑所有的click事件,造成误伤.如果之前bind时有定义处理函数 ...

  3. jquery的bind跟on绑定事件的区别

    jquery的bind跟on绑定事件的区别:主要是事件冒泡: jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(ev ...

  4. Jquery中的事件绑定$(&quot;#btn&quot;).bind(&quot;click&quot;,function(){ })

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  5. jQuery中绑定事件bind() on() live() one()的异同

    jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也 ...

  6. JQuery中bind和unbind函数与onclick绑定事件区分

    JQuery中bind和unbind函数转载:   https://blog.csdn.net/liucheng417/article/details/51131982 页面代码: <body& ...

  7. JQuery中绑定事件（bind()）和移除事件（unbind()）

    有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 ...

  8. [jQuery]on和bind事件绑定的区别

    on和bind事件绑定的区别 一个demo展示 <!DOCTYPE html> <html lang="zh"> <head> <titl ...

  9. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

随机推荐

  1. hdu1285

    解题思路:拓扑排序+优先队列,每次找入度为零时的点的时候且值最小的...我觉得题目有点问题,刚开始写的时候,以为样例的答案是1 4 2 3,毕竟1和4没输过啊...结果去看了样例一眼,傻了. #inc ...

  2. Windows 下vim的配置文件_vimrc

    set nocompatible source $VIMRUNTIME/vimrc_example.vim source $VIMRUNTIME/mswin.vim behave mswin set ...

  3. BZOJ2213[Poi2011]Difference——DP

    题目描述 A word consisting of lower-case letters of the English alphabet ('a'-'z') is given. We would li ...

  4. 【CF961G】Partitions（第二类斯特林数）

    [CF961G]Partitions(第二类斯特林数) 题面 CodeForces 洛谷 题解 考虑每个数的贡献,显然每个数前面贡献的系数都是一样的. 枚举当前数所在的集合大小,所以前面的系数\(p\ ...

  5. 洛谷 P4148 简单题 解题报告

    P4148 简单题 题意 维护单点加与矩形求和,强制在线 说明 \(n\le 500000,m\le 200000\),\(4000ms / 20MB\) kd-tree 复杂度我不懂 是一颗平衡树, ...

  6. cf757F Team Rocket Rises Again (dijkstra+支配树)

    我也想要皮卡丘 跑一遍dijkstra,可以建出一个最短路DAG(从S到任意点的路径都是最短路),然后可以在上面建支配树 并不会支配树,只能简单口胡一下在DAG上的做法 建出来的支配树中,某点的祖先集 ...

  7. 洛谷P1315 观光公交

    SB贪心......暴露了我代码能力巨弱的本质. 题面 解:首先我们应该想到DP(但是我想到了贪心......) 然后分析题目本质,每个点有个限制,最早开走时间不得早于最晚上车时间. 然后我们就可以把 ...

  8. A1091. Acute Stroke

    One important factor to identify acute stroke (急性脑卒中) is the volume of the stroke core. Given the re ...

  9. echarts3地图如何添加点击事件？ 点击地图相应的区域ajax获取并展示本区域省下面所有市的信息

    myChart.on('click', function (params) { var city = params.name; loadChart(city); });

  10. Prometheus MySQL_exporter

    MySQL Exporter mysqld_exporter是用来搜集mysql的性能指标的,适用于mysql5.5及其以上版本 程序安装 下载地址:https://prometheus.io/dow ...