Jquery中的事件处理

最新推荐文章于 2022-04-15 07:00:00 发布

极客研究者

最新推荐文章于 2022-04-15 07:00:00 发布

阅读量179

点赞数

分类专栏： JQuery 文章标签： jquery js

本文链接：https://blog.csdn.net/qq_34550459/article/details/106120054

版权

JQuery 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

1.页面加载响应事件:
在这里插入图片描述
2.Jquery中常见事件:

3.事件的绑定:
使用on()为匹配元素绑定指定的事件
格式:
on(events,[selector],[data],fn):
为匹配的元素绑定一个或多个事件处理函数

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jquery之事件处理</title>
    <style>
        .outer{
            width:200px;
            height:200px;
            background-color: pink;
        }
    
        .bc{
            background-color: green;
        }

        ul.data{
            width: 200px;
            height: 200px;
            list-style:none;
        }
        ul.news{
            margin:200px;
        }
    </style>
    <script src="../../js/jquery.min.js"></script>
    <script>
        $(function(){
        /*
        on(events,[selector],[data],fn):
        为匹配的元素绑定一个或多个事件处理函数
        
        */
        $("input[type='button']").on('click',function(){
            alert('您可真听话!');
        });

        //为一个元素绑定多个事件处理函数
        //方式一:
        // $('.outer').on({
        //     mouseenter:function(){
        //         $(this).css('background-color','#bfa');
        //     },
        //     mouseleave:function(){
        //         $(this).css('background-color','green');
        //     }
        // });
        
        //方式二:
        $('.outer').on('mouseenter mouseleave',function(){
            $(this).toggleClass('bc');
        });


        //事件委派:on()方法
        $('ul.data').on('click','li',function(){
            alert('li click event!');
        });


        //on()方法:可以给后期动态创建的元素绑定事件
        // $('ul.news li').click(function(){ //不支持
        //     alert('new li element!');
        // });

        $('ul.news').on('click','li',function(){//支持
            
            alert('new li element!');
        });

        $('ul.news').append('<li>you are my destiny</li>');

});
    </script>
</head>
<body>
    <div class="box">
        <input type="button" value="点我试试">
    </div>

    <div class="outer">
    </div>

    <ul class="data">
        <li>1111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>44444</li>
        <l>555555</l>
    </ul>
    <ul class="news">
        </ul>
</body>
</html>