<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 事件冒泡，就是事件会一级一级往上传递 -->
    <script src="jquery-1.11.3/jquery.min.js"></script>
    <script>
        $(function(){
            var $btn =  $("#btn1");
            var $div = $("div");
            $btn.click(function(){
                alert("我是按钮");
                // 取消事件冒泡，不让事件向父级空间传递
                // 默认事件是会进行冒泡
                return false
            });
            // $div.click(function(){
            //     alert("我是div");
            // });
            // 通过事件代理让父控件代理子控件的事件，然后执行子控件的相关操作
            var $ul = $("div ul");
            $ul.delegate("li","click",function(){
                $(this).css({"color":"red"});
            });
            // 可以代理不同子控件的事件,多个选择器之间逗号分隔即可
            var $box = $("#box");
            $box.delegate("#p2,#btn2","click",function(){
                $(this).css({"color":"red"});
                alert('ok');
            });
        });
        
    </script>
</head>
<body>
    <div>
        <p id="p1">哈哈</p>
        <input type="button" value="按钮" id="btn1">
        <ul>
            <li>哈哈</li>
            <li>嘻嘻</li>
            <li>美滋滋</li>
        </ul>
    </div>
    <div id="box">
        <p id="p2">哈哈2</p>
        <input type="button" value="按钮" id="btn2">
    </div>
</body>
</html>