jQuery——on事件委托-原创手记-慕课网

jQuery——on事件委托

神威君 2017-06-03 16:48:35 浏览 3260

神威君

关注TA

手记 4

粉丝 0

获赞 6

通过jQuery的on绑定事件，实现事件委托

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <style type="text/css">
            #container{
                width: 800px;
                height: 800px;
                background-color: gray;
                text-align: right;
            }
            #one{
                width: 700px;
                height: 700px;
                background-color: red;
            }
            #two{
                width: 600px;
                height: 600px;
                background-color: blue;
            }

            #three{
                width: 500px;
                height: 500px;
                background-color: green;
            }

            #four{
                width: 400px;
                height: 400px;
                background-color: yellow;
            }
        </style>
        <script>
            $(document).ready(function(){
                $('#container').on('click','#three','message',function(e){
                    console.log(e.target);
                })
            })
        </script>
    </head>
    <body>
    <div id="container">
        <div id="one">
            one
            <div id="two">
                two
                <div id="three">
                    three
                    <div id="four">four</div>
                </div>
            </div>
        </div>
    </div>

    </body>
</html>

效果如图：
图片描述
点击four时候，控制台显示如下：

点击three时候，控制台显示如下：

结论：可见，事件委托是的冒泡阶段到匹配到的选择器目标后结束。

相关标签: JQuery

0人推荐

发表评论