jQuery事件注册

最新推荐文章于 2023-03-14 13:17:10 发布

夏大爷耶耶耶

最新推荐文章于 2023-03-14 13:17:10 发布

阅读量700

点赞数 3

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

本文链接：https://blog.csdn.net/xy_is_fhh/article/details/122094056

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<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>事件注册</title>
    <script src="jquery-3.5.1.min.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .current{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div></div>
    <ul>
        <li>又是开心的一天呀</li>
        <li>又是开心的一天呀</li>
        <li>又是开心的一天呀</li>
        <li>又是开心的一天呀</li>
        <li>又是开心的一天呀</li>
    </ul>
    <ol></ol>
</body>
<script>
    //1.jQuery事件注册
    //语法：element.事件(function() {})
    //$("div").click(function() {事件处理程序})
    //其他事件和原生基本一致。
    //比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等
    $(function(){
        // $('div').click(function() {
        //     $(this).css("background","purple");
        // });
        // $('div').mouseenter(function() {
        //     $(this).css('background','skyblue');
        // })

    //2.jQuery事件处理
    //2.1事件处理on()绑定事件
    //on()方法在匹配元素上绑定一个或多个事件的事件处理函数
    //语法:element.on(events,[selector],fn)
    //1.events:一个或多个用空格分隔的事件类型，如'click'或'keydown'。
    //2.selector:元素的子元素选择器
    //3.fn:回调函数即绑定在元素身上的侦听函数。

    //事件处理on
    // $('div').on({
    //     mouseenter:function() {
    //         $(this).css('background','skyblue');
    //     },
    //     click:function() {
    //         $(this).css('background','red');
    //     },
    //     mouseleave:function() {
    //         $(this).css('background','black');
    //     }
        //on()方法优势1：
        //可以绑定多个事件，多个处理事件处理程序。
    //     $("div").on("mouseenter mouseleave",function() {
    //     $(this).toggleClass('current');
    // })
    
        //on()方法优势2：
        //可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
        //$('ul li').click();
        // $("ul").on('click','li',function(){
        //     alert(11);
        // });//click是绑定在ul身上的，但是触发的对象是ul里面的小li
        
        //on()方法优势3：on可以给未来动态创建的元素绑定事件
        //动态的创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件
        // $("ol li").click(function() {
        //     alert(11);
        // })
        $('ol').on('click','li',function(){
            alert(11);
        })
    var li=$('<li>我是后来的</li>');
    $('ol').append(li);
    })

    
</script>
</html>

夏大爷耶耶耶

关注

3
点赞
踩
2

收藏

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

<!DOCTYPE html><html lang="en"><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>事件.
复制链接

扫一扫