GitHub 博客园 Nanakon

☀【jQuery事件绑定】one / bind / live / delegate / on 

$(window).live('click', function() { // 错误 live 是事件委托到 document的
    console.log('live')
})

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.2.min.js"></script>
    <script>
        // 所有的 .live() 事件被添加到 document 元素上
        $('.live').live('click', function() { // 事件委托 绑定到 $(document) 对象
            console.log('live $(document)')
        })
    </script>
</head>
<body>
    <ul>
        <script>
            // 获取到 ul
            $('ul').delegate('.delegate', 'click', function() { // 事件委托
                console.log('delegate')
            })

            // 受托方就从默认的 $(document) 变成了 $('ul')[0]，节省了冒泡的旅程
            // 上下文参数必须是一个单独的 DOM 元素
            $('.live', $('ul')[0]).live('click', function() { 
                console.log('live $(\'ul\')[0]')
            })
        </script>
        <li class="one">one</li>
        <li class="click">click</li>
        <li class="bind">bind unbind</li>
        <li class="live">live die, removed: 1.9</li>
        <li class="delegate">delegate undelegate</li>
        <li class="on">on off</li>
    </ul>
    <script>
        $('.one').one('click', function() {
            console.log('one')
        })
        $('.one').bind('mouseenter', function(event) { // 等效
            console.log('one mouseenter')
            $(this).unbind(event)
        })

        $('.click').click(function() {
            console.log('click')
        })

        var message = '1'
        $('.bind').bind('click', {msg: message}, function(event) {
            console.log(event.data.msg)
        })
        var message = '2'
        $('.click').bind('click', {msg: message}, function(event) { // 避免都是2
            console.log(event.data.msg)
        })

        $('.live').live('aa', function() { // 自定义事件
            console.log('live')
        })
        $('.click').live('click', function() {
            $('.live').trigger('aa')
        })

        $('ul').on('mouseenter mouseleave', '.on', function() { // 事件委托
            console.log('on')
        })
        $('.on').on({ // 非事件委托
            mouseenter: function() {
                console.log('mouseenter')
            },
            mouseleave: function() {
                console.log('mouseleave')
            }
        })
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://static01.baomihua.com/js/lib/jquery-1.4.4.min.js?t=20120926.js"></script>
</head>
<body>
    <ul>
        <li>item1</li>
    </ul>
    <script>
        $('ul').delegate('li', 'click mouseenter', function(e) {
            e || (e = window.event)
            if (e.type === 'click') {
                alert('click')
            } else if (e.type === 'mouseenter') {
                alert('mouseenter')
            }
        })
    </script>
</body>
</html>

jQuery API中文文档 √
http://www.css88.com/jqapi-1.9/

jQuery代码优化：事件委托篇 √
http://www.ituring.com.cn/article/467

posted on 2012-11-29 10:57  jzm17173  阅读(267)  评论(0)  编辑  收藏  举报

导航

轻音