您的位置：首页 > Web前端 > JavaScript

onload和onclick及其他事件的默认执行顺序

2017-08-07 20:35 453 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<!-- 以ie最新模式渲染当前页面 -->
<!--  X-UA-Compatible是ie8专有meta属性-->
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>document.wirte()测试</title>

</head>
<body>
<div class="wrap" style="text-align:center;">
<button id="btn" >千万不要点，如果点了这个页面所有内容都被覆盖掉了</button>
</div>

<script>
/*  onclick事件在onload事件后执行，执行结果成功 */
window.onload = function(){
alert("页面加载完成了，后续onclick事件开始执行");
document.getElementById("btn").onclick=function()
{
alert("onclick事件开始执行");
document.write("<center style='color:red;'>让你不要点不要点，你非要点，看吧，是不是页面之前的所有内容都没了</center><br/>");
document.write("<center style='color:red;'>为什么页面之前的内容没有了？</center><br/>");
document.write("<center style='color:red;'>答：因为页面加载完成以后，浏览器输出流随之关闭。给button添加了onclick事件，当该事件被触发时，浏览器输出流重新打开，重新输出内容，所以之前的内容会被覆盖掉</center>");
// 是否说明onclick事件以及其他事件会触发或者说促使页面加载完成，即页面onload事件的触发？
//document.close();
}
}

/* onload事件在onclick之后执行，执行结果 失败

document.getELementById("btn").onclick = function(){
alert("onclick事件开始执行");
window.onload = function(){
alert("onload事件开始执行");
document.write("<center style='color:red;'>让你不要点不要点，你非要点，看吧，是不是页面之前的所有内容都没了</center><br/>");
document.write("<center style='color:red;'>为什么页面之前的内容没有了？</center><br/>");
document.write("<center style='color:red;'>答：因为页面加载完成以后，浏览器输出流随之关闭。给button添加了onclick事件，当该事件被触发时，浏览器输出流重新打开，重新输出内容，所以之前的内容会被覆盖掉</center>");
}
}

*/
</script>
</body>
</html>
总结：说明onclick及其他事件都在window.onload之后执行。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航