jQuery的加载后自动绑定事件的问题

最新推荐文章于 2023-06-09 18:19:05 发布

riverrun_z

最新推荐文章于 2023-06-09 18:19:05 发布

阅读量172

点赞数

分类专栏： jquery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_48047636/article/details/124755632

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

"本文探讨了网页加载过程中的事件处理，特别是`DOMContentLoaded`和`window.onload`的区别及其应用场景。解释了为何在同时使用多个js文件时可能出现的事件覆盖问题，并提供了使用`window.addEventListener("load", function() {...}

摘要由CSDN通过智能技术生成

index

<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">
    <script src="../jquery-1.8.3.min.js"></script>
    <!-- 1.如果先写第一个js文件,只有第二个文件会有效果;
    如果先写第二个js文件,只有第一个js文件有效果的原因:
    因为两个js文件都有window.onload,第一个保存到window.onload时,
    执行第二个js文件也是保存到window.onload这样后者就会覆盖前者,
    最终只有后者有效果
    解决:可以用事件监听window.addEventListener("load",function(){})
    因为事件监听会把js内容放到事件队列,然后window.load再去事件队列遍历
     -->
     <!-- 2.故意在这两个js文件之前写一个window.onload -->
     <script>
         window.onload=function(){
             alert("把html+css+js+图片全部加载完成");
         };
     </script>
    <script src="js/01_onload2.js"></script>
    <script src="js/01_onload1.js"></script>
    <!-- 
        2.问题:类似抢票系统这样的不需要页面全部加载完就要响应的
        解决:页面加载过程中有两次页面加载完成事件,一次是
        DOMContentLoaded,仅有html+js下载完成提前触发
        一次是window.load.必须等到html+css+js+图片下载生成才触发
     -->
     <!-- DOMContentLoaded有兼容性问题
    解决:可以用jq封装好的DOMContentLoaded事件
    $(document).ready(function(){}) --作用在DOMContentLoaded阶段提前自动执行.  
    这一句的简写形式:$().ready(function(){})最后简写W为$(function(){})
    用es6还可以简写为箭头函数$(()=>{})
    如果是需要图片和css才能正常执行的代码,只能放在window.addEventListener("load",function(){...})
    -->
    <title>Document</title>
</head>
<body>
    <h1>页面加载完成事件</h1>
    <p>welcome to my first web page</p>
    <!-- 需求:在页面加载的时候就给这两个按钮绑定单击事件 -->
    <button id="btn1">click me1</button>
    <button id="btn2">click me2</button>
    <script>
        //怎么让元素的事件处理函数在页面加载完成后自动绑定上
        //怎么让页面在数据完成加载后自动发送ajax请求
        //id属性的选择器前面要加#号
        /*如果把下面的js放到head中,会导致效果不出现,因为代码是从上往下执行的
        但是如果放在html的body中又会影响维护,并且不方便复用,所以要把js文件外部引入*/
        /*
        问题:今后别人在引入我们写的js文件时,有时会放在body,有时会放在head,怎么保证放在哪里都能在页面加载完后自动执行?
        解决:
        可以用window.οnlοad=function(){}事件,它能让你的的js内容在页面加载完后才执行
        */  
        // $("#btn1").click(function(){alert("啊疼")})
        // $("#btn2").click(function(){alert("疼")}) 
    </script>
</body>

外部引入js文件1

$(document).ready(function(){
    alert("仅把js+html加载完成就触发点击事件");
    $("#btn1").click(function(){alert("啊疼")})
})

外部引入js文件2

$(document).ready(function(){
    alert("仅把js+html加载完成就触发点击事件");
    $("#btn2").click(function(){alert("2疼")})
})

在这里插入图片描述

riverrun_z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的加载后自动绑定事件的问题

index<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"> <script src="../jquery-1.8.3.min.js"></script&
复制链接

扫一扫

专栏目录