首页 > JavaScript jQuery 这俩格式,单纯只是格式不同,还是有什么特殊用处?

JavaScript jQuery 这俩格式,单纯只是格式不同,还是有什么特殊用处?

前天在网上搜 DOM 的时候,搜到了jQuery ,就觉得挺好,学了 [格式1];
今天然后问别的问题,知道了 [格式2];

我问问,我觉得格式1就挺好,为什么弄个 [格式2]?
这东西有什么特殊的用法吗?

格式1:

<div id="one">aa</div>

<script>
    function BIANHONG()
    {document.bgColor='red';}

    $("#one").on("click",BIANHONG);
</script>

格式2:

<div id="one">aa</div>

            
<script>
    function BIANHONG()
    {document.bgColor='red';}

    $("#one").click(BIANHONG);
</script>

建议使用on,性能更好


on -> 事件委托
.click(fn) -> 简洁明了


是否事件委托


我知道用 on 可以做事件委托

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>

<body>
<div>
    <ul>
        <li>0</li>
    </ul>
</div>
<button>增加LI</button>
<script type="text/javascript">
$(function() {
    
    //新增加LI
    $('body').on('click', 'button', function() {
        var i = $('li').length + 1;
        $('ul').append('<li>' + i + '</li>')
    });
    
    /* 这个后面加进来的LI也能半丁事件
    $('body').on('click', 'li', function() {
        console.log($(this).html())
    });
    */
    
    // 这个不可
    $('li').click(function() {
        console.log($(this).html())
    });
    
});
</script>
</body>
</html>

有一次面试就问了我为什么用ON,我说不知道,我就知道我习惯用这个,他可以事件委托,做前端这么多年,一直没去追究为什么,就知道用,后来人家没要我


一个事件委托,一个直接绑定事件。像动态生成的元素你用二种方法试一下就知道区别了。


click 是一个很常用的事件绑定,使用第二种方法会更简洁一些。


第二种只是第一种的别名,在 jquery 源码中能看到第二种其实就是转换成第一种执行。
为什么会有第二种,大概是因为少打点字嘛,方便咯。

【热门文章】
【热门文章】