15 - 命名空间，委托，移入移出

命名空间

事件是通过on来绑定的
通过trigger触发事件

$(".son").on("click.ls", function () {
    alert("click2");
});
$(".son").trigger("click.ls");

PS：

利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发
利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发

示例代码：

委托

什么是事件委托?
请别人帮忙做事情, 然后将做完的结果反馈给我们

PS：
如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件

$("ul>li").click(function () {
    console.log($(this).html());
});

示例：

让ul帮li监听click事件

之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件
之所以this是li,是因为点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然知道this是谁

$("ul").delegate("li", "click", function () {
    console.log($(this).html());
});

委托联系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>32-jQuery事件委托练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .mask{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            position: fixed;
            top: 0;
            left: 0;
        }
        .login{
            width: 522px;
            height: 290px;
            margin: 100px auto;
            position: relative;
        }
        .login>span{
            width: 50px;
            height: 50px;
            /*background: red;*/
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 编写jQuery相关代码
            $("a").click(function () {
                var $mask = $("<div class=\"mask\">\n" +
                    "    <div class=\"login\">\n" +
                    "        <img src=\"images/login.png\" alt=\"\">\n" +
                    "        <span></span>\n" +
                    "    </div>\n" +
                    "</div>");
                // 添加蒙版
                $("body").append($mask);
                $("body").delegate(".login>span", "click", function () {
                    // 移除蒙版
                    $mask.remove();
                });
                return false;
            });
        });
    </script>
</head>
<body>
<!--<div class="mask">-->
    <!--<div class="login">-->
        <!--<images src="images/login.png" alt="">-->
        <!--<span></span>-->
    <!--</div>-->
<!--</div>-->
<a href="http://www.baidu.com">点击登录</a>
<div>我是段落...（此处省略1W字）...我是段落</div>
</body>
</html>

移入移出

mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件

$(".father").mouseover(function () {
    console.log("father被移入了");
});
$(".father").mouseout(function () {
    console.log("father被移出了");
});

mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件

$(".father").mouseenter(function () {
    console.log("father被移入了");
});
$(".father").mouseleave(function () {
    console.log("father被移出了");
});

简便写法：

$(".father").hover(function () {
    console.log("father被移入了");
},function () {
    console.log("father被移出了");
});

$(".father").hover(function () {
    console.log("father被移入移出了");
});