jQuery事件操作

2023-11-13 16:22:16

文档加载

$(function () {});和window.onload = function () {}区别：

一、什么时候触发
1. jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。
2. 原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象,还要等标签显示时需要的内容加载完成。
二、触发的顺序
3. jQuery 页面加载完成之后先执行
4. 原生js的页面后执行
三、执行的次数
1. 原生js的页面加载完成之后，只会执行最后一次的赋值函数。
2. jQuery的页面加载完成之后是全部把注册的function 函数，依次顺序全部执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../../jQuery包/jquery.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            alert("原生js的页面加载完成之后");
        }

        // jquery的页面加载完成之后
        $(function () {
            alert("jquery的页面加载完成之后");
        });
    </script>
</head>
<body>
<div>
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
    <span>span4</span>
</div>
<button>我是按钮</button>

<iframe src= "http://localhost:8080"></iframe>
<img src="http://localhost:8080/1.jpg" alt=""/>
</body>
</html>

事件绑定

click()：它可以绑定单击事件，以及触发单击事件
mouseover()：鼠标移入事件
mouseout()：鼠标移出事件
bind()：可以给元素一次性绑定一个或多个事件
one()：使用上跟bind 一样。但是one方法绑定的事件只会响应一次。
unbind()：跟bind方法相反的操作，解除事件的绑定
live()：也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../../jQuery包/jquery.min.js"></script>
    <script type="text/javascript">
        //绑定单击事件
        $(function () {
           // $("h5").click(function (){
           //     alert("h5单击事件");
           // })

           //live绑定事件
           $("h5").live("click",function (){
               alert("h5单击事件");
           })

           $('<h5 class="head">什么是jQuery?</h5>').appendTo( $("#panel"));

           //  //触发事件
           //  $("button").click(function (){
           //      $("h5").click();//单击button触发h5的单击事件
           //  })
           //
           //  //绑定鼠标移入/移出事件
           //  $("h5").mouseover(function (){
           //      console.log("鼠标移入")
           //  })
           //
           //  $("h5").mouseout(function (){
           //      console.log("鼠标移出")
           //  })

            // //bind绑定事件
            // $("h5").bind("click mouseover mouseout",function (){
            //     console.log("bind绑定事件");
            // })

            // //one绑定事件
            // $("h5").one("click mouseover mouseout",function (){
            //     console.log("bind绑定事件");
            // })
            //
            // //unbind解除绑定事件
            // $("h5").unbind("click",function (){
            //     console.log("bind绑定事件");
            // })
        });


    </script>
</head>
<body>
<div id= "panel">
    <h5 class="head" >什么是jQuery?</h5>
    <div class="content">
        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由John Resig 创建于2006年1月的开源项目。
    </div>
</div>
<button>触发</button>
</body>
</html>

事件对象

javaScript事件对象
事件对象，是封装有触发的事件信息的一个javascript对象。
我们重点关心的是怎么拿到这个javascript 的事件对象。以及使用。
如何获取呢javascript 事件对象
在给元素绑定事件的时候，在事件的function( event)参数列表中添加一一个参数，这个参数名，我们习惯取名为event。
这个event就是javascript 传递参事件处理函数的事件对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
        #div2{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
    <script type="text/javascript" src="../../jQuery包/jquery.min.js"></script>
    <script type="text/javascript">
        // window.onload = function () {
        //     //原生js获取事件对象
        //     document.getElementById("div1").οnclick=function (event){
        //         console.log(event)
        //     }
        // }

        $(function (){
            // //jQuery获取事件对象
            // $("#div2").click(function (event){
            //     console.log(event)
            // })

            $("#div1").bind("mouseover mouseout",function (event){
                if (event.type == "mouseover"){
                    console.log("鼠标移入")
                }else if (event.type == "mouseout"){
                    console.log("鼠标移出")
                }
            })
        })


    </script>
</head>
<body>
<div id="div1"></div>
<br/>
<div id="div2"></div>

</body>
</html>

事件冒泡

什么是事件的冒泡
事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。
如何阻止事件冒泡
在子元素事件函数体内，return false;可以阻止事件的冒泡传递。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #content{
            width: 200px;
            height: 100px;
            border: 1px solid black;
        }
        span{
            display: block;
            border: 1px solid black;
        }
    </style>
    <script type="text/javascript" src="../../jQuery包/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(" #content"). click(function () {
                alert('我是div' );
            });
            $("span").click(function () {
                alert('我是span' );

                return false;
            });
        })
    </script>
</head>
<body>
<div id="content" >
    外层div元素
    <span>内层span元素</span>
    外层div元素
</div>
<div id="msg"></div>
</body>
</html>

码农公寓

文档加载

事件绑定

事件对象

事件冒泡

相关文章