jQuery之on和click和事件

发表于 | 更新于 | 分类于 |

今天在些代码时候出先了一个问题，就是关于jQuery的on()和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事件的主体。

.bind和delegate都可以用实现。

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 ) {} );