jQuery-事件

83510998

2020-06-07

jQuery-事件

jQuery绑定事件

<script type="text/javascript">
    // 当页面框架加载完成之后（DOM结构），执行内部代码。
    $(function () {
        // 通过选择器找到指定标签
        $(‘li‘).onclick(function () {
            // 触发事件时，都会执行此匿名函数。  $(this)代表当前触发的标签。
        })
    })
</script>

jQuery-事件

案例：左侧菜单实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery学习</title>
    <style>
        body {
            margin: 0;
        }
        .header {
            height: 48px;
            background-color: #499ef3;
        }
        .body .menu {
            position: fixed;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 220px;
            border-right: 1px solid #dddddd;
            overflow: scroll;
        }
        .body .content {
            position: fixed;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 225px;
            /* 超出范围的话，出现滚轮 */
            overflow: scroll;
        }
        .body .menu .title {
            padding: 8px;
            border-bottom: 1px solid #dddddd;
            background-color: #5f4687;
            color: white;
        }
        .body .menu .child {
            border-bottom: 1px solid #dddddd;
        }
        .body .menu .child a {
            display: block;
            padding: 5px 10px;
            color: black;
            text-decoration: none;
        }
        .body .menu .child a:hover {
            background-color: #dddddd;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="header"></div>
<div class="body">
    <div class="menu">
        <div class="item">
            <div class="title" >国产</div>
            <div class="child">
                <a href="#">少年的你</a>
                <a href="#">我不是药神</a>
                <a href="#">我和我的祖国</a>
            </div>
        </div>
        <div class="item">
            <div class="title" >欧美</div>
            <div class="child hide ">
                <a href="#">战争之王</a>
                <a href="#">华尔街之狼</a>
                <a href="#">聚焦</a>
            </div>
        </div>
        <div class="item">
            <div class="title" >韩国</div>
            <div class="child hide">
                <a href="#">坏家伙们</a>
                <a href="#">寄生虫</a>
                <a href="#">燃烧</a>
            </div>
        </div>
    </div>
    <div class="content"></div>
</div>
<script type="text/javascript">
    $(function () {
        // 给所有样式有 title 的标签绑定事件
        $(‘.title‘).click(function () {
            // 当前触发事件的标签
            $(this).next().removeClass(‘hide‘);
            $(this).parent().siblings().find(‘.title‘).addClass(‘hide‘);
        })
    })
</script>
</body>
</html>

jQuery事件委托

jQuery的事件绑定是在页面加载完毕之后，找到相关标签并为其绑定事件，

如果后期通过js代码有新增表现，那么新标签中模式是没有事件的，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery学习</title>
</head>
<body>
<input type="button" id="btn" value="添加元素">
<ul id="greenBoy">
    <li>王宝强</li>
    <li>陈羽凡</li>
    <li>谢霆锋</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(‘li‘).click(function () {
            alert($(this).text());
        });
        $(‘#btn‘).click(function () {
            var tag = $(‘<li>‘);
            tag.text(‘alex‘);
            $(‘#greenBoy‘).append(tag);
        })
    })
</script>
</body>
</html>

为了避免类似这种情况的发生，jQuery中引入了事件委托的概念，只需要基于on进行绑定即可：

<script type="text/javascript">
    $(function () {
        // on的第一个参数：事件名称
        // 第二个参数：选择器
        // 第三个参数：事件触发时执行的函数
        $(‘#greenBoy‘).on("click","li",function () {
            alert($(this).text());
        });
        $(‘#btn‘).click(function () {
            var tag = $(‘<li>‘);
            tag.text(‘alex‘);
            $(‘#greenBoy‘).append(tag);
        })
    })
</script>

jquery jquery事件