jQuery之on和click和事件

今天在些代码时候出先了一个问题,就是关于jQueryon()click()的不同之处。
一个问题搞出了大量知识我也是是醉了。然后我们在来说说,jQuery的事件。我也复习下。

on和click

最大区别就是用click动态添加的事件。不会被删除。element.click()这种写法不支持给动态元素或样式绑定事件。

对比test

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function(){
$("#newclick").click(function(){
$(".li").append('<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>');
});

$("#newon").click(function(){
$(".li").append('<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>');
});


$(".li").on('click', ".deleteon", function(){
$(this).parent().remove();
})

$(".deleteclick").click(function(){
$(this).parent().remove();
});
});

jQuery 事件

jQuery本身封装了一些JavaSript事件。
例如:

  • 绑定事件:bind,on,live,delegate,keyup(<function>)
  • 触发事件:trigger('keyup'),keyup()
  • 解绑事件:unbind,off,die,keyup()

bind

在JavaSript中:

1
2
3
4
5
6
	<div onclick="func()"></div>
<script>
function func(){
console.log('clicked!');
}
</script>

然而在jQuery中;

1
2
3
4
5
6
	<div id='foo'></div>
<script>
$('#foo').click(function(){
console.log('clicked!');
});
</script>

事件的解绑:

1
$('#foo').unbind('click');

.bind将会给所有匹配的元素都绑定一次事件,当元素很多时性能会变差。 而且后来动态新增的元素不会被绑定。

我上面那个问题就用.on就比较好。

####事件冒泡

在DOM中默认情况下,事件是会冒泡的,即同样的事件会沿着DOM树逐级触发。在某些情况下我们要阻止冒泡。

有三种方法来应对不同情况:

1
2
3
4
5
6
7
8
9
10
11
12
13

$('#foo').click(function(event){
event.stopPropagation();
});

$('a').click(function(event){
event.preventDefault();
});

//强烈推荐第三种!
$('a').click(function(event){
return false;
});

Delegate

.Delegate是另外一种绑定方式。把事件绑定中根元素上,由于事件会冒泡,它用来处理指定的子元素上的事件。
不过使用方法相对来说比较复杂。

1
2
3
4
5
6
7
8
9
10
11
<div id="foo">
<a>A</a>
<a>B</a>
</div>
<script>

$('#foo').delegate('a', 'click', function(){
console.log('clicked');
});

</script>

自动绑定动态添加的元素。因为事件处理函数绑定在#foo上,新加的子元素事件也会冒泡到#foo
性能好于.bind()。只绑定一个事件处理函数,绑定速度相当快

On

终于提到了.on。它才是整个jQuery事件的主体。

.binddelegate都可以用实现。

1
2
3
4
5
6
7
8

// bind
$( "#foo" ).bind( "click", function( e ) {} );
$( "#foo" ).on( "click", function( e ) {} );

// delegate
$( "#foo" ).delegate( "a", "click", function( e ) {} );
$( "#foo" ).on( "click", "a", function( e ) {} );
坚持原创技术分享,您的支持将鼓励我继续创作!