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>
on
-
.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 或者忽略了该选择器，那么被选中的元素总是能触发事件
网友评论