-jq-on注册事件

最新推荐文章于 2023-01-31 20:42:30 发布

喵帕斯_喵太

最新推荐文章于 2023-01-31 20:42:30 发布

阅读量122

点赞数

分类专栏： jquery 文章标签： javascript

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/116667555

版权

jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

01-jq-on注册事件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .current {
            /* height: 100px; */
            background-color: rebeccapurple;
        }
    </style>

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

<body>
    <ul>
        <li>隔壁老王1</li>
        <li>隔壁老王2</li>
        <li>隔壁老王3</li>
        <li>隔壁老王4</li>
        <li>隔壁老王5</li>
        <li>隔壁老王6</li>
        <li>隔壁老王7</li>
        <li>隔壁老王8</li>
        <li>隔壁老王9</li>
        <li class="current">隔壁老王10</li>
    </ul>
    <script>
        $(function () {
            // on的简单注册
            // $('ul').on('click', function () {
            //     console.log(this)
            //     $(this).css({ backgroundColor: 'green' })
            // })

            // on的委托事件
            /*  $('ul').on('click', 'li', function () {
                 console.log(this)
                 $(this).css({ backgroundColor: 'green' })
             }) */

            // on注册多个事件：
            $('ul').on({
                mouseover: function () {
                    $(this).css({ backgroundColor: 'green' })
                },
                mouseout: function () {
                    $(this).css({ backgroundColor: '' })
                },
                click: function () {
                    $(this).css({ color: 'yellow' })
                }
            }, 'li')

            // on可以注册任何事件

            // 1. 常用的：简单事件，on('事件类型：1个',回调函数)
            // 2. 事件委托：on('事件类型','目标子元素的选择器',回调函数)
            // 3. 同时多个事件：共用一个回调函数：on('事件1 事件2 ...',回调函数)：比较多的切换效果toggle系列的
            // $('ul').children('li:last').on('mouseover mouseout', function () {
            //     console.log(this)
            //     $(this).toggleClass('current')
            // })
            // 4. 同时注册多个事件：每个回调函数都不同：on({事件1:回调函数1,事件2:回调函数2...})
        })
    </script>
</body>

</html>

注意：

// on可以注册任何事件

        // 1. 常用的：简单事件，on('事件类型：1个',回调函数)
        // 2. 事件委托：on('事件类型','目标子元素的选择器',回调函数)
        // 3. 同时多个事件：共用一个回调函数：on('事件1 事件2 ...',回调函数)：比较多的切换效果toggle系列的
        // $('ul').children('li:last').on('mouseover mouseout', function () {
        //     console.log(this)
        //     $(this).toggleClass('current')
        // })
        // 4. 同时注册多个事件：每个回调函数都不同：on({事件1:回调函数1,事件2:回调函数2...})

喵帕斯_喵太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
-jq-on注册事件

01-jq-on注册事件<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫

专栏目录