jquery 如何绑定事件？直接绑定和使用事件代理分别如何使用

2018-07-28 本文已影响0人初入前端的小菜鸟

jquery 如何绑定事件

事件处理中最头疼的就是浏览器兼容问题，jQuery封装了很好的API，可以方便的进行事件处理

简单介绍 live bing dagelate
对应的解除监听的函数分别是unbind、die、undelegate

bing
一：bind(type,[data],function(eventObject))

bind是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数，参数的含义如下：
- type:事件类型，如click、change、mouseover等;
- data:传入监听函数的参数，通过event.data取到。可选;
- function:监听函数，可传入event对象，这里的event是jQuery封装的event对象，与原生的event对象有区别，使用时需要注意

bind的源码：

  bind: function( types, data, fn ) {
 
  return this.on( types, null, data, fn );
 
  }
 
$('#myol li').bind('click',getHtml);

bind的特点就是会把监听器绑定到目标元素上，有一个绑一个，在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个“列表元素5”，点击它是没有反应的，必须再bind一次才行。要想不这么麻烦，我们可以使用live。

jQuery还有一种事件绑定的简写方式如a.click(function(){});、a.change(function(){});等，它们的作用与bind一样，仅仅是简写而已。

二：live(type, [data], fn)
live的参数和bind一样，它又有什么蹊跷呢，我们还是先瞄一眼源码：

live: function( types, data, fn ) {
 
jQuery( this.context ).on( types, this.selector, data, fn );
 
return this;

可以看到live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。这个context是什么东西呢?其实就是元素的限定范围，看了下面的代码就清楚了：

$('#myol li').context; //document
 
$('#myol li','#myol').context; //document
 
$('#myol li',$('#myol')[0]); //ol

通常情况下，我们都不会像第三种方式那样使用选择器，所以也就认为这个context通常就是document了，即live方法把监听器绑定到了 document上了。不把监听器直接绑定在元素上，你是不是想起事件委托机制来了呢?若没有，可以点击这里回忆一下。live正是利用了事件委托机制来完成事件的监听处理，把节点的处理委托给了document。在监听函数中，我们可以用event.currentTarget来获取到当前捕捉到事件的节点。下面的例子来揭晓：
$('#myol li').live('click',getHtml);

三: dagelate
live存在那样的缺点，所以我们就思考，既然老爷子负担那么重，可不可以别把监听器绑定在document上呢，绑定在就近的父级元素上不就好了。顺应正常逻辑，delegate诞生了。

参数多了一个selector，用来指定触发事件的目标元素，监听器将被绑定在调用此方法的元素上。看看源码：

delegate: function( selector, types, data, fn ) {
 
return this.on( types, selector, data, fn );
 
}

又是调用了on，并且把selector传给了on。看来这个on真的是举足轻重的东西。照样先不管它。看看示例先：
$('#myol').delegate('li','click',getHtml);

在1.7之前的版本中jQuery处理事件有多个方法， (google 搜索: jquery live bind degelate)作用各不相同，后来统一的使用on/off方法

on/off

.on( events [,selector ] [,data ], handler(eventObject) )

看起来参数及其复杂，我们看一下各个参数的意思

events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
data：当一个事件被触发时，要传递给事件处理函数的event.data
handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false

简单示例：

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script> //不要忘记引入
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<p>点击弹框</p>
<script>
$('p').on('click',function(){
  console.log($(this).text())
})
</script>
</body>

.one
.one( events [, selector ] [, data ], handler(eventObject) )
同 on，绑定事件，但只执行一次

$('p').one('click',function(){
  console.log($(this).text())
})

只执行一次

.off
.off( events [, selector ] [, handler ] )
移除一个事件处理函数

$('p').on('click',function(){
  console.log($(this).text())  
})  // 添加点击事件
$('p').off('click') // 移除点击事件

未移除

移除后

直接绑定和使用事件代理分别如何使用

直接绑定
示例：

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <input type="text">
  <button>添加</button>

  <script>
  $('ul li').on('click',function(){
    console.log($(this).text())
  })
  $('button').on('click',function(){
    var str = $('input').val() //获取input的值
    var li1 = $('<li>'+ str + '</li>'); //新建li 接收 input的值
    li1.appendTo('ul')  //将li添加到队列中去
  })
</script>

效果：

image

可以清楚的看到我们直接给li添加事件，会导致后来新增的DOMli点击没有效果，这个和javaScript的点击事件和事件代理是一样的。我们可以使用事件代理来处理这个点击事件
代码

$('ul').on('click','li',function(){  // 选中ul 下的 li
  console.log($(this).text())
})
 $('button').on('click',function(){
    var str = $('input').val() //获取input的值
    var li1 = $('<li>'+ str + '</li>'); //新建li 接收 input的值
    li1.appendTo('ul')  //将li添加到队列中去
  })

效果：

image

给ul绑定事件，选中ul下的li 可以查看上面的绑定事件的on方法下的

.on( events [,selector ] [,data ], handler(eventObject) )

selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件

jquery 如何绑定事件？直接绑定和使用事件代理分别如何使用