bind与on的区别就在于–事件冒泡,关于jquery中的on与bind绑定事件的区别通过本文给大家实例讲解
on(events,[selector],[data],fn)
- events:一个或多个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown.myPlugin” 。
- selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代.
- data:当一个事件被触发时要传递event.data给事件处理函数。
- fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。
- bind(type,[data],fn)
- 为每个匹配元素的特定事件绑定事件处理函数。
- jQuery 3.0中已弃用此方法,请用 on()代替。
- 参数类型跟前面那个on一样.
bind与on的区别就在于–事件冒泡
demo1:
## 点击相应的li弹出里面内容,这里把on换成bind是一样的没有区别.也就是说on不使用selector属性与bind并无区别
1
2
3
4
5
6
7
8
9
10
11
12
|
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
$(
function
() {
$(
'ul li'
).on(
'click'
,
function
(){
alert($(
this
).text())
});
})
</script>
|
demo2:
1
2
3
4
5
6
7
8
9
10
11
|
<script>
$(
function
() {
$(
'ul li'
).bind(
'click'
,
function
(){
alert($(
this
).text())
});
var
ok = $(
'<li>4</li>'
);
$(
'ul'
).last().append(ok);
})
</script>
|
demo3
1
2
3
4
5
6
7
8
9
10
|
<script>
$(
function
() {
$(
'ul'
).on(
'click'
,
'li'
,
function
(){
alert($(
this
).text())
});
var
ok = $(
'<li>4</li>'
);
$(
'ul'
).last().append(ok);
})
</script>
|
事件委托的好处
- 万一子元素非常多,给每个子元素都添加一个事件,会影响到性能;
- 为动态添加的元素也能绑上指定事件;