javascript核心技术（三十五）jquery中最常用的事件绑定语法

人亦已歌 · 发表于 2023-1-27 12:40:05

本节主要涉及以下三个知识点：
1、页面加载完成事件的三种绑定语法。
2、事件的单独绑定
3、事件的批量绑定

下面请看代码：

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <title>jquery中最常用的事件绑定语法</title>
        <script src="./jquery.js"></script>
</head>
<style>
        #box1 {
                height: 200px;
                width: 200px;
                background-color: antiquewhite;
        }

        #box2 {
                height: 100px;
                width: 100px;
                background-color: rgb(151, 104, 43);
        }
        #box3 {
                height: 100px;
                width: 100px;
                background-color: rgb(126, 117, 105);
        }
</style>

<body class="" id="body">
        <div id="box1">
                <div id="box2">

                </div>
                <div id="box3">

                </div>
        </div>
        <script type="text/javascript">
                //页面加载完成事件的三种绑定语法
                // $(document).ready(function(){console.log(123);});
                // $().ready()(function(){console.log(123);});
                // $(function(){console.log(123);});

                //单独绑定
                $('#box2').click(function(){console.log('你点了box2');});
                $('#box2').on('click',function(){console.log('你点了box2');});
                $('#box2').bind('click',function(){console.log('你点了box2');});

                //批量绑定
                //以上语法中，如果选中的元素为多个则为批量绑定
                //例如：
                $('div').click(function(){console.log('给页面中的所有div绑定了点击事件');});
        </script>

</body>

</html>