（JavaScript）前端JS不知道怎么理解网页？本专栏从0开始教学！（十四）：滚轮属性Scroll；常用事件；文档加载顺序；事件绑定

用户11865655

发布于 2025-10-13 17:44:22

11500

代码可运行

文章被收录于专栏：CSDN专栏CSDN专栏

运行总次数：0

代码可运行

scroll滚轮属性

body标签

<body>
<h4 >欢迎用户注册</h4>
	<p id="article">
		特别提示
		北京陌陌科技有限公司（以下简称“陌陌科技”）在此特别提醒您，在您注册成为陌陌会员之前，请认真阅读本《陌陌会员服务条款》（以下简称“服务条款”），确保您充分理解服务条款中各条款，包括免除陌陌科技责任的条款及限制会员权利的条款。请您审慎阅读并选择接受或不接受本服务条款。除非您接受本服务条款所有条款，否则您不得注册、登录或使用本服务条款所涉服务。您的注册、登录、使用等行为将视为对本服务条款的接受，并同意接受本服务条款各项条款的约束。

		本服务条款约定陌陌科技与您之间关于“陌陌会员”服务的各项事项。“会员”是指注册、登录、使用本服务条款中陌陌科技提供的各种服务的个人。陌陌会员服务是有偿的增值服务，会员必须完全同意本服务条款，并完成付费，才能享受相关服务。

		本服务条款是基于“陌陌”软件的《用户协议》而制定，是其不可分割的一部分。同时，陌陌科技不时发布的关于会员服务的各种规范、规则等也是本服务条款的一部分。您选择接受本服务条款，开通会员服务成为会员用户，即表示您同意接受本服务条款、《用户协议》及各种规范、规则的各项约束，并将遵守。如果您不接受本服务条款，则不能享受本服务条款所涉会员服务。

		本服务条款可由陌陌科技随时更新，更新后的服务条款一旦公布即代替原来的服务条款，恕不再另行通知，用户可在本网站查阅最新版服务条款。

		一、总则
		1、陌陌是由陌陌科技创建、运行的基于地理位置的移动社交产品。

		2、陌陌用户是指完成全部注册流程，愿意接受陌陌《用户协议》并在陌陌相关使用规范的规定下使用陌陌服务的注册用户。

		3、陌陌会员服务是陌陌为陌陌用户提供的有偿增值服务，用户向陌陌支付相关费用后，方可享受专门为会员提供的各项服务。

		4、陌陌会员必须遵守陌陌《用户协议》及本服务条款。

		二、服务费用
		1、会员资格以月为单位计算（每月按31天计算），会员服务费用标准为120陌陌币/月，用户应通过一次性支付陌陌币的方式购买会员服务。陌陌科技将根据不同的购买方式和数量，向用户提供不同幅度的优惠，具体优惠信息以会员资格支付页上内容为准。

		2、陌陌科技可以根据实际情况随时调整会员服务费用标准，经调整的会员服务费用标准将在会员资格支付页上显示，用户按调整后的服务费用标准支付后方可享有或延续会员资格。已按原会员服务费用标准购买会员服务的用户，其会员资格以及所享有的会员服务在已取得的会员资格期限内不受影响，无需补充缴纳差额。

		三、服务内容
		1、陌陌将为会员提供多种专享的增值服务，具体内容将在会员页面显示。

		2、陌陌可以根据实际情况随时调整会员服务内容。

		四、服务的开通和终止
		1、陌陌用户完成用户注册程序，并通过陌陌平台提供的付费途径完成会员费用的支付后，即取得陌陌会员资格。

		2、陌陌用户通过陌陌平台完成会员注册，所提交的内容与个人资料必须真实有效。当会员的个人资料发生变化时，会员应及时修改注册的个人资料，否则由此造成的会员权利不能全面有效行使或其他任何后果、责任由会员自行承担。

		3、会员资格有效期自陌陌会员服务开通之时起算，具体期限可以登录陌陌客户端“设置”页查看。

		4、除非用户开通自动延续功能，会员资格有效期届满后，陌陌科技将终止向该用户提供会员增值服务，该用户可以通过续交会员服务费用延续会员资格。

		5、会员在会员资格有效期内续费，会员资格有效期将在原有效期基础上相应延长。此外，陌陌科技提供自动按月延续会员资格的功能，用户亦可在其会员资格有效期内开通该项功能，授权陌陌科技在用户会员资格有效期届满时，自动对其会员资格期限予以续期一个月并从其用户账户中扣除相应的陌陌币，并在续期届满后依此自动延续。如用户账户内陌陌币不足以支付该续期费用，则该功能无法实现。

		五、会员的权利和义务
		1、陌陌会员平等享有会员的权利，同时应遵守陌陌科技的各项规范、规则，包括但不限于本服务条款和《用户协议》。

		2、因违反陌陌《用户协议》而导致会员服务被暂停使用的相关损失，由用户自行承担。

		3、会员在会员资格有效期内可以享受陌陌会员的各项增值服务。

		4、如会员在会员资格有效期内主动终止或取消会员资格，陌陌科技不负责退还与该会员剩余会员资格有效期对应的服务费用。

		5、会员自行承担在陌陌中传送、发布信息及使用陌陌免费服务或收费服务的法律责任，会员使用陌陌服务，包括免费服务与收费服务的行为，均应遵守各项法律法规、规章、规范性文件（以下简称“法律法规”）。

		六、陌陌科技的权利和义务
		1、陌陌科技有义务保证遵守本服务条款、陌陌《用户协议》及各项规范、规则的会员正常使用会员服务，当出现技术故障影响会员服务的正常提供时，陌陌科技应尽快排除故障，但对于会员因此产生的任何损失，陌陌科技不承担责任。

		2、陌陌在未经会员授权时，不得公开、编辑或透露会员注册及保存的非公开信息，但法律法规明确规定及《用户协议》约定的情形除外。

		3、陌陌科技将通过陌陌系统对会员进行通知和公告。

		4、因不可抗力造成会员服务提供的中断或其它缺陷，陌陌科技不承担任何责任，但将尽力减少因此给会员造成的损失和影响。

		5、因会员原因造成的陌陌帐号密码泄露，陌陌不承担责任，同时为避免陌陌帐号被盗用后滥用而引起法律风险，陌陌可以在用户举报该情形后采取一切措施避免第三方对用户的会员帐号实施操作行为，而不论该第三方基于何种目的、获取方式是否善意。

		6、因会员在使用陌陌免费服务或收费服务的过程中，故意进行有损陌陌科技、陌陌平台、其他陌陌用户合法权益的行为，或存在《用户协议》约定的相关情形，陌陌科技有权取消该会员的会员资格或中断一项或多项会员服务而无须给予任何补偿，并保留追究该会员法律责任的权利。

		7、因会员在使用陌陌免费服务或收费服务的过程中，存在违反法律法规的行为，陌陌科技有权取消该会员的会员资格而无须给予任何补偿，且该会员须自行承担全部责任。

		七、其他
		1、陌陌科技不时发布的关于会员服务的规范、规则等，是本服务条款不可分给的一部分。

		2、如本服务条款与《用户协议》发生冲突或本服务条款无规定时，应以《用户协议》的规定为准。

		3、本服务条款的解释，效力及纠纷的解决，适用中华人民共和国法律。若会员和陌陌科技之间发生任何纠纷或争议，首先应友好协商解决，协商不成的，会员同意将纠纷或争议提交陌陌科技住所地有管辖权的人民法院管辖。

		4、本服务条款的版权由陌陌科技所有，陌陌科技保留一切解释和修改的权利。

		5、陌陌科技可依照陌陌发展的不同阶段，随着社区管理经验的不断丰富，出于维护陌陌会员秩序的目的，不断完善本服务条款。
	</p>
	<h4>
		<input type="checkbox" disabled id="ck">
		<label for="ck">我已经认真阅读完</label>
		<input type="button" value="注册" disabled>
	</h4>
	
	<script>
	</script>
</body>

style标签

<style>
h4{
		text-align: center;
	}
	p{
		width:600px;
		height: 500px;
		margin: 0 auto;
		border:2px solid #7B7272;
		overflow: auto;
	}
</style>

js内容

//当满足scrollWidth==clientWidth+scrollLeft
//说明水平滚动条滚动到底了
var article=document.getElementById("article");
var inputs=document.getElementsByTagName("input");
var height=0;
var index=0;

// onscroll  ——  当元素滚动条被滚动时触发；
article.onscroll=function(){
	// alert(12);

	// ? .clientHeight  ——  返回article元素的高度
	// +舍入   article元素的顶部高度   最接近整数的数字
	height=article.clientHeight+Math.round(article.scrollTop);

	//当满足scrollHeight==clientHeight+scrollTop
	//说明垂直滚动条滚动到底了
	if(article.scrollHeight==height){

		if(index == 0){
			alert("到底了！");
		}

		//disabled  ——  为true时当前元素不可用；为false时解除当前元素的不可用；
		inputs[0].disabled=false;
		inputs[1].disabled=false;
		index = 1;
	}
}

在js可以指定 window.scrollTop 属性对页面的滚轮位置进行调整

JavaScript事件

在上文中，dom.onscroll 就是一个 js 滚轮事件

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间
JavaScript 与 HTML 之间的交互是通过事件实现的。
对于 Web 应用来说，有下面这些代表性的事件：单击事件、鼠标移入移出事件、键盘按下/弹起事件等等

body

<!--我们可以在事件对应的属性中设置js代码，
这样当事件被触发的时候，这些代码就会被执行-->
<button onclick="alert('O(∩_∩)O哈哈~')">我是一个按钮</button>
<button id="btn">按钮</button>
<input type="text">

常用事件

事件	说明
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onerror	当加载文档或图像时发生某个错误
onfocus	元素获得焦点
onblur	元素失去焦点
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onload	某个页面或图像被完成加载
onmousedown	某个鼠标按键被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标被移到某元素之上
onmouseup	某个鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被调整尺寸
onselect	文本被选定
onsubmit	提交按钮被点击
onunload	用户退出页面

示例

//给button按钮绑定事件
var btn=document.getElementById("btn");
btn.onclick=function(){
	alert("O(∩_∩)O哈哈~ 第二个按钮");
}

文档的加载

浏览器在加载一个页面时，是按照自上而下的顺序加载的读取到一行的时候就运行一行，如果将script标签写在上面，在执行代码时，页面还没有加载

/*
	onload事件会在整个页面加载完成之后触发
	为window绑定一个onload事件	
*/
window.onload=function(){
}

示例：这是一段完整的body标签代码

<body>
	<script>
		/*
			浏览器在加载一个页面时，是按照自上而下的顺序加载的
			读取到一行的时候就运行一行，如果将script标签写在上面，
			在执行代码时，页面还没有加载
		*/
		window.onload=function(){
			var btn=document.getElementById("btn");
			console.log(typeof btn);
//			console.log(btn);
			btn.onclick=function(){
				alert("这是一个button按钮");
			};
		}
	</script>
	<!--onload 事件-->
	<button id="btn">按钮</button>	
	<script>
		/*从性能方面考虑，写在下边更好*/
		
		/*将js代码写在页面的下面，就是为了保证执行代码的时候页面已经加载完毕*/
		/* window.onload 在页面上只能出现一次，
			后面的代码会覆盖前面的代码
			*/
		window.onload=function(){
			var btn=document.getElementById("btn");
//			console.log(typeof btn);
			console.log(btn);
			btn.onclick=function(){
				alert("哈哈哈");
			};
		}
	</script>
</body>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-08-03，如有侵权请联系 cloudcommunity@tencent.com 删除

服务