onload 和 onunload 事件
当用户进入后及离开页面时,会触发 onload 和 onunload 事件。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,然后基于该信息加载网页的恰当版本。
onload 和 onunload 事件可用于处理 cookie。
onload点击事件
1.window.onload 是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像,脚本文件,css文件等),就调用的处理函数下面的代码,当点击按钮,并不会弹出对话框,因为页面还没有加载到按钮元素,无法执行 js 点击事件
<button>点击</button>
<script>
var btn=document.querySelector("button");
btn.onclick=function(){
alert("点击了");
}
</script>
处理办法是:
window.onload = function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('点击我');
})
}
2,window.onload传统注册事件方式,只能写一次,如果有多个,会以最后一个window.onload为准下面的代码,页面一加载,就会弹出“22",
然后再点击按钮,不能执行点击事件,无法弹出”点击我“
window.onload = function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('点击我');
})
}
window.onload = function() {
alert(22);
}
解决方法:如果使用addEventListener 则没有限制
window.addEventListener('load' ,function(){
var btn=document.querySelector("button");
btn.onclick=function(){
alert("点击");
}
})
window.addEventListener('load' , function(){
alert("22");
})
3,窗口加载事件:document.addEventListener( ’ DOMContentLoaded ’ , function(){})DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。(IE9以上才支持)如果页面的图片很多的话,从用户访问到 onload触发可能需要较长的时间,交互效果就不能实现,必然影响用户体验,此时用DOMContentLoaded事件比较合适。
onunload 事件
描述:
当用户关闭一个页面时触发 onunload 事件。
关闭浏览器窗口
通过地址栏或收藏夹前往其他页面的时候
点击返回,前进,刷新,主页其中一个的时候
点击 一个前往其他页面的url连接的时候
调用以下任意一个事件的时候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind,location replace,location reload,form submit.
当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。
重新赋予location.href的值的时候。
通过input type=”submit”按钮提交一个具有指定action的表单的时候。
<body>
<button></button>
</body>
<script>
var btn=document.querySelector("button");
btn:onunload =function(){
alert("欢迎下次再来!");
}
</script>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数:
onmouseover 事件
onmouseover 事件会在鼠标指针移动到指定的对象上时发生。
语法:
οnmοuseοver="SomeJavaScriptCode"
SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。
代码:
var p = document.getElementById("p") /*获取id名字为p的标签*/
/* 给获取到的id添加事件 */
p.onmouseover = function (){
alert("鼠标已经移动上来!");
/>
onmouseout 事件
onmouseout事件:指鼠标移出某个指点的HTML标签后,会出现什么效果。
var p = document.getElementById("p") /*获取id名字为p的标签*/
/* 给获取到的id添加事件 */
p.onmouseout = function (){
alert("鼠标已经移出!");
}
onmouseover和onmouseout事件结合案例:
HTML部分
<!-- 按钮 -->
<label id="info">
<input type="checkbox" />免登录十天
</label>
<!-- 弹框 -->
<div class="div_dis">
你好!
</div>
javascript部分
/* 找元素---找对象 */
var oInp = document.getElementById("info");
var oDiv = document.getElementsByClassName("div_dis")[0];
/* 操作元素---搞对象 */
/* 鼠标一上去之后 */
oInp.onmouseover = function (){
oDiv.style.display = "block";
oInp.style.cursor = "pointer";
}
/* 鼠标移出之后 */
oInp.onmouseout = function (){
oDiv.style.display = "none";
}
效果:
onmouseover时
onmouseout时