JS-事件类型-UI事件_js ui事件-CSDN博客

本文链接：https://blog.csdn.net/qq_29209481/article/details/79274201

//感谢杨老师

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件类型-UI事件</title>
<style type="text/css">
* { margin: 0; padding: 0; }
body { height: 2000px; background: #ccc; }
#box { width: 300px; height: 200px; margin: 100px auto; overflow-y: scroll; background: #fff; border: 1px #999 solid; }
#text { display: block; width: 300px; height: 200px; margin: 0 auto; }
</style>
</head>
<body>
<div id="box">好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊</div>

<textarea id="text">好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊好多内容啊</textarea>
</body>
<script type="text/javascript">

var box = document.getElementById("box");
var text = document.getElementById("text");

//load事件已经学习运用过

//resize事件
window.onresize = function (event) {
console.log("窗口大小发生变化");
}

//scroll事件
window.onscroll = function () {
console.log("窗口滚动条发生变化");
}

box.onscroll = function () { //div没有自带滚动条，是通过样式添加的滚动条
console.log("元素1滚动条发生变化");
}

text.onscroll = function () { //textarea自带滚动条
console.log("元素2滚动条发生变化");
}

// window.onbeforeunload = function(){
// alert('您确定关闭么?')
// }
var _t;
window.onbeforeunload = function(e)
{ var evt = e||window.event; //此方法为了在firefox中的兼容
evt.returnValue='离开会使编写的内容丢失。';
//console.log(e)
//setTimeout(function(){_t = setTimeout(onunloadcancel, 0)}, 0);
return false;//"真的离开?";
}

window.onunloadcancel = function()
{
clearTimeout(_t);
alert("取消离开");
}
</script>
</html>