DOM事件

最新推荐文章于 2022-08-08 20:35:58 发布

Zhweb_box

最新推荐文章于 2022-08-08 20:35:58 发布

阅读量153

点赞数

分类专栏： js 笔记文章标签： js

本文链接：https://blog.csdn.net/ZiXiaweb/article/details/108435640

版权

js 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

笔记

15 篇文章 0 订阅

订阅专栏

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时

Zhweb_box

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM事件

onload 和 onunload 事件当用户进入后及离开页面时，会触发 onload 和 onunload 事件。onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。onload 和 onunload 事件可用于处理 cookie。onload点击事件1.window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，css文件等），就调用的处理函数下面的代码，当点击按钮，并不会弹出对话框，因为页面还没有
复制链接

扫一扫