05-jQuery事件代理

一只咸鱼测试 2022-09-08 原文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="jquery-1.12.4.min.js"></script>

    <script>
        $(function(){
           //找到元素
           var $btn = $("#btn");
           var $div = $("div")
           var $input = $("input");
           var $list = $("#list")
           //点击事件
           $btn.click(function(){
                alert("被点击了");
           });

           //得到焦点的事件...$(this)表示当前jQuery对象
           $input.focus(function(){
                    $(this).css({"background":"red"});
           });
           //失去焦点事件
           $input.blur(function(){
                    $(this).css({"background":"green"});
           });

           //鼠标进入
           $div.mouseover(function(){
                    $(this).css({"background":"gold"});
           });
           //鼠标离开
           $div.mouseout(function(){
                    $(this).css({"background":"white"});
           });

           //事件代理
           //第一个参数表示子元素的选择器,第二个参数表示事件,第三个执行函数
           $list.delegate("li","click",function(){
                     alert($(this).html());
           });


        });

    </script>
</head>
<body>
        <div>
             <input type="text" placeholder="请输入">
             <button id="btn">按钮</button>

        </div>
        <ol id="list">
            <li>第一个</li>
            <li>第二个</li>
            <li>第三个</li>
            <li>第四个</li>


        </ol>

</body>
</html>