首页 > 编程语言 >JavaScript 文档的加载

JavaScript 文档的加载

时间:2023-03-04 19:47:03浏览次数:37  
标签:DOM JavaScript 加载 文档 按钮 响应函数 btn 页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			/*
			 * 浏览器在加载一个页面时,是按照自上向下的顺序加载的,
			 * 	读取到一行就运行一行,如果将script标签写到页面的上边,
			 * 	在代码执行时,页面还没有加载,页面没有加载DOM对象也没有加载
			 * 	会导致无法获取到DOM对象
			 */
			
			
			
			/*
			 * onl oad事件会在整个页面加载完成之后才触发
			 * 为window绑定一个onload事件
			 * 		该事件对应的响应函数将会在页面加载完成之后执行,
			 * 		这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
			 * 	
			 */
			window.onload = function(){
				//获取id为btn的按钮
				var btn = document.getElementById("btn");
				//为按钮绑定一个单击响应函数
				btn.onclick = function(){
					alert("hello");
				};
			};
			
			
		</script>
	</head>
	<body>
		
		<button id="btn">点我一下</button>
		
		<!--<script type="text/javascript">
			
			/*
			 * 将js代码编写到页面的下部就是为了,可以在页面加载完毕以后再执行js代码
			 */
			//获取id为btn的按钮
			var btn = document.getElementById("btn");
			//为按钮绑定一个单击响应函数
			btn.onclick = function(){
				alert("hello");
			};
			
		</script>-->
		
	</body>
</html>

标签:DOM,JavaScript,加载,文档,按钮,响应函数,btn,页面
From: https://www.cnblogs.com/chuixulvcao/p/17178921.html

相关文章

  • JavaScript dom查询
    <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html> <head> <metahttp-equiv="Content-Type"content="text/html;......
  • JavaScript 前后切换图片
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> *{ margin:0; padding:0; } #outer......
  • JavaScript 邮件的正则
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *电子邮件 * hello.nihao......
  • JavaScript Dom
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> </head> <body> <buttonid="btn">我是一个按钮</button> <scripttype="text/javasc......
  • JavaScript 正则表达式2
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *创建一个正则表达式检查一个字符串中......
  • 2.JavaScript如何实现异步编程,可以详细描述EventLoop机制
    单线程和异步js的任务分为同步和异步两种,它们的处理方式也不同,同步任务是直接在主线程上排队执行,异步任务则会被放在任务队列中,若有多个任务(异步任务)则要在任务队列中排......
  • 浅谈下javascript的proxy和reflect
    近日喜欢上了uniapp和vue,但看到相关程序代码中频繁出现了proxy和reflect的使用,于是进行了一番学习,现总结如下。Proxy和Reflect是ES6(ECMAScript2015)引入的两个新的特性,它......
  • 定位Dll加载异常的方法
    总体说明动态库加载异常的原因有以下几种:1.dll不在dll搜索路径2.dll依赖的其他dll不在dll搜索路径3.dll与exe不是同一架构,如exe是64位,dll是32位4.dll或依赖的dll其导......
  • 定位解析一个因脚本劫持导致webpack动态加载异常的问题
    问题描述项目现场的前端项目在点击顶部的导航栏切换不同的模块时,会有小概率出现模块加载报错的情况:我们的前端项目里是有基于react-loadable做的懒加载的,上图的12.be789......
  • 关于 Javascript 的几种继承
    原型链的概念:原型链通俗易懂的理解就是可以把它想象成一个链条,互相连接构成一整串链子而原型链中就是实例对象和原型对象之间的链接每个函数都有一个prototype属性,这个p......