【无标题】

  一. 加载DOM两种方式
        window.onload方式
            执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行
            编写个数：1个
        jQuery方式
            执行时间：网页结构绘制完成后，执行
            编写个数：多个
        两个都有的情况下执行顺序
            jQuery3.0：window.onload比jQuery先执行
            jQuery1.0和2.0：jQuery比window.onload先执行
二：绑定事件两种方式
        元素.on("事件名",function(){})
        元素.事件名(function(){})
案例：演示鼠标悬停和点击的两种方式
        <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            /* 一、事件 */
            //1.1 加载DOM两种方式(区别)
            // 原生态JavaScript加载DOM的方式
            // 当网页全部加载完毕后才会执行的函数，该方式在一个页面上只能出现1次，如果出现多次 会覆盖
 
            // 一个页面同时出现原生态jsDOM和jQueryDOM加载，版本不同，先后顺序不同。3.0版本以前--jQuery先执行，3.0版本以后--原生态JavaScript先执行
 
            $(function() {
                //1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
                //--元素.on/bind()
                $("#obtn1").on('click', function() {
                    alert("on事件出现")
                })
                $("#obtn1").bind('click', function() {
                    alert("bind事件")
                })
                //--元素.事件名
                $("#obtn1").click(function() {
                    alert("元素事件")
                })
 
                // 鼠标移入移除事件 mouserover mouseout
                $("#obtn1").mouseover(function() {
                    console.log("鼠标移入")
                })
                $("#obtn1").mouseout(function() {
                    console.log("鼠标移出")
                })
三：合成事件/事件切换
hover()：鼠标悬停合成事件
            鼠标移上去第一个函数
            鼠标移除第二个函数
toggle()：鼠标点击合成事件
演示
//1.3 合成事件/事件切换
                //--hover()悬停控制元素[div]的显示和隐藏
                $("#odiv").hover(function() {
                    $(this).addClass("over")
                }, function() {
                    $(this).removeClass("over")
                })
                //--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
                $("#obtn2").click(function() {
                    // 没有传递参数 调用后立即隐藏与显示
                    // 有参数（毫秒）调用后有延时效果
                    // 多个会覆盖
                    $("#odiv").toggle(1000);
                    $("#odiv").toggle(function() {
                        alert("隐藏中...")
                    }, function() {
                        alert("出现中...")
                    })
                })
 四：事件传播（事件冒泡）
                 传播：小-->中-->大
                 阻止传播：事件后面加上  return false
演示
//1.4 事件的传播(事件冒泡) 小p->中div->大body
                $("body").click(function() {
                    alert("事件冒泡了")
                })
                $("#obtn3").click(function() {
                    alert("要阻止了")
                    return false; //阻止body点击事件
                })
    五：事件坐标
                offsetX：当前元素左上角
                clientX：窗口左上角
                pageX：网页左上角
演示
//1.5 事件event的坐标[pageX,pageY]
                $("body").click(function() {
                    // pageX横坐标
                    // 鼠标
                    console.log(event.pageX, event.pageY);
                    // left和top body有默认的margin和padding
                    console.log(event.offsetX, event.offsetY);
                    // 窗口
                    console.log(event.clientX, event.clientY);
 
                })
六： 移除事件
              元素.unbind("事件名")
              注意1：一般情况下，不会使用unbind，推荐使用变量控制事件
              注意2：如果某个元素只允许使用一次事件，则可以使用one()
演示
                //1.6 事件的移除
                //--按钮只能点击一次[2]
                // var flag = true;
                // $("#obtn4").click(function(){
                //     if(flag == true){
                //         alert("一次性")
                //         flag = false;
                //     }
                // 一次性作用 通过调用解绑事件即可
                // $(this).off();
                // $(this).unbind();//解绑事件
                // })
                //jQuery中提供一个方法one
                $("#obtn4").one('click', function() {
                    alert("jQuery方法一次性")
                })
 
                //--按钮点击偶数次可行 奇数次不行
                var num = 1;
                $("#obtn5").click(function() {
                    if (num % 2 == 0) {
                        console.log("点击了" + num)
                    }
                    num++;
                    console.log(num)
                })
 
            })
        </script>
    </head>
完整代码：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            /* *{margin: 0px;padding: 0px;} */
            .over {
                border: 50px solid salmon;
            }
        </style>
        <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            /* 一、事件 */
            //1.1 加载DOM两种方式(区别)
            // 原生态JavaScript加载DOM的方式
            // 当网页全部加载完毕后才会执行的函数，该方式在一个页面上只能出现1次，如果出现多次 会覆盖
 
            // 一个页面同时出现原生态jsDOM和jQueryDOM加载，版本不同，先后顺序不同。3.0版本以前--jQuery先执行，3.0版本以后--原生态JavaScript先执行
 
            $(function() {
                //1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
                //--元素.on/bind()
                $("#obtn1").on('click', function() {
                    alert("on事件出现")
                })
                $("#obtn1").bind('click', function() {
                    alert("bind事件")
                })
                //--元素.事件名
                $("#obtn1").click(function() {
                    alert("元素事件")
                })
 
                // 鼠标移入移除事件 mouserover mouseout
                $("#obtn1").mouseover(function() {
                    console.log("鼠标移入")
                })
                $("#obtn1").mouseout(function() {
                    console.log("鼠标移出")
                })
                //1.3 合成事件/事件切换
                //--hover()悬停控制元素[div]的显示和隐藏
                $("#odiv").hover(function() {
                    $(this).addClass("over")
                }, function() {
                    $(this).removeClass("over")
                })
                //--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
                $("#obtn2").click(function() {
                    // 没有传递参数 调用后立即隐藏与显示
                    // 有参数（毫秒）调用后有延时效果
                    // 多个会覆盖
                    $("#odiv").toggle(1000);
                    $("#odiv").toggle(function() {
                        alert("隐藏中...")
                    }, function() {
                        alert("出现中...")
                    })
                })
                //1.4 事件的传播(事件冒泡) 小p->中div->大body
                $("body").click(function() {
                    alert("事件冒泡了")
                })
                $("#obtn3").click(function() {
                    alert("要阻止了")
                    return false; //阻止body点击事件
                })
 
                //1.5 事件event的坐标[pageX,pageY]
                $("body").click(function() {
                    // pageX横坐标
                    // 鼠标
                    console.log(event.pageX, event.pageY);
                    // left和top body有默认的margin和padding
                    console.log(event.offsetX, event.offsetY);
                    // 窗口
                    console.log(event.clientX, event.clientY);
 
                })
 
                //1.6 事件的移除
                //--按钮只能点击一次[2]
                // var flag = true;
                // $("#obtn4").click(function(){
                //     if(flag == true){
                //         alert("一次性")
                //         flag = false;
                //     }
                // 一次性作用 通过调用解绑事件即可
                // $(this).off();
                // $(this).unbind();//解绑事件
                // })
                //jQuery中提供一个方法one
                $("#obtn4").one('click', function() {
                    alert("jQuery方法一次性")
                })
 
                //--按钮点击偶数次可行 奇数次不行
                var num = 1;
                $("#obtn5").click(function() {
                    if (num % 2 == 0) {
                        console.log("点击了" + num)
                    }
                    num++;
                    console.log(num)
                })
 
            })
        </script>
    </head>
    <body>
        <button type="button" id="obtn1">obtn1事件</button>
        <br>
        <br>
        <div id="odiv" style="width: 100px;height: 100px;background-color: #DDA0DD">
 
        </div>
        <button type="button" id="obtn2">obtn2</button>
        <button type="button" id="obtn3">obtn3</button>
        <button type="button" id="obtn4">obtn4</button>
        <button type="button" id="obtn5">obtn5</button>
    </body>
</html>