JavaScript——页面相关事件

Stella981
• 阅读 314

页面事件是在页面加载或改变浏览器的大小、位置,以及对页面中的滚动条进行操作时,所触发的事件处理程序。

加载与卸载事件

加载事件(onload)是在网页加载完毕后触发相应的事件处理程序,它可以在网页加载完成后对网页中的表格样式、字体、背景颜色等进行设置。卸载事件(unload) 是在卸载网页时触发相应的事件处理程序,卸载网页是指关闭当前页或从当前页跳转到其他网页中,该事件常被用于在关闭当前页或跳转其他网页时,弹出询问提示框。

在制作网页时,为了便于网页资源的利用,可以在网页加载事件中对网页中的元素进行设置。

例子:网页加载时缩小图片

在网页加载时,将图片缩小成指定的大小,当鼠标指针移动到图片上时,将图片大小情复成原始大小,这样可以避免使用大小相同的两个图片进行切换,并在关闭网页时,用提示框提示月户是否关闭当前页。

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
    </head>
    <body onunload="pclose()">
        <img src="img/banner01.png" name="img1" onload="blowup()" onmouseover="blowup()" onmouseover="reduce()"/>
        <script type="text/javascript">
            var h=img1.height;
            var w=img1.width;
            function blowup(){    //缩小图片
                if(img1.height>=h){
                    img1.height=h-100;
                    img1.width=w-100;
                }
            }
            function reduce(){   //恢复原始大小
                if(img1.height>=h){
                    img1.height=h;
                    img1.width=w;
                }
            }
            function pclose(){   //卸载时弹出提示框
                alert("欢迎浏览本网页");
            }
        </script>
    </body>
    
</html>
点赞
收藏
评论区
推荐文章
陈发良 陈发良
3年前
总结:常用js方法
javascript函数注释/获取页面缓存@methodgetSession函数名@param参数名字符串类型,需要获取的key名@return变量名对象类型/img.onload定义和用法onload事件在图片加载完成后立即执行。判断设备constuserAgentnavigator
Karen110 Karen110
2年前
盘点JavaScript focus/blur(聚焦)实际应用
大家好,我进阶学习者。一、前言当用户点击某个元素或使用键盘上的Tab键选中时,该元素将会获得聚焦(focus)。当网页加载时,HTML特性(attribute)。autofocus也可以让一个焦点落在元素上,不仅如此,还有其它途径可以获得焦点。二、focus/blur事件当元素聚焦时,会触发focus事件,当元素失去焦点时,会触发blur事件。
Wesley13 Wesley13
2年前
SSR再好,也要有优雅降级策略哟~
1、相关概念CSR:客户端渲染(ClientSideRender)。渲染过程全部交给浏览器进行处理,服务器不参与任何渲染。页面初始加载的HTML文档中无内容,需要下载执行JS文件,由浏览器动态生成页面,并通过JS进行页面交互事件与状态管理。SSR:服务端渲染(ServerSideRende
LinMeng LinMeng
3年前
js的防抖与节流
在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。函数防抖函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才
Stella981 Stella981
2年前
Android Hook技术
1\.什么是HookHook英文翻译过来就是「钩子」的意思,那我们在什么时候使用这个「钩子」呢?在Android操作系统中系统维护着自己的一套事件分发机制。应用程序,包括应用触发事件和后台逻辑处理,也是根据事件流程一步步地向下执行。而「钩子」的意思,就是在事件传送到终点前截获并监控事件的传输,像个钩子钩上事件一样,并且能够在钩上事件时
Wesley13 Wesley13
2年前
JS的事件冒泡和事件捕获
什么是事件?事件是文档和浏览器窗口中发生的特定的交互瞬间。事件是javascript应用跳动的心脏,也是把所有东西黏在一起的胶水,当我们与浏览器中web页面进行某些类型的交互时,事件就发生了。事件可能是用户在某些内容上的点击,鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是web浏览器中发生的事情,比如说某
Stella981 Stella981
2年前
Android的消息循环与Handler机制理解
一、概念1、事件驱动型什么是事件驱动?就是有事了才去处理,没事就躺着不动。假如把用户点击按钮,滑动页面等这些都看作事件,事件产生后程序就执行相应的处理方法,就是属于事件驱动型。2、消息循环把需要处理的事件表示成一个消息,并且把这个消息放入一个队列。消息循环就是一循环,for或者while都一样。从消息队列里面取出未处理的消息,然后调用该消息的
Stella981 Stella981
2年前
JavaScript事件 ——常见事件
1.什么是事件?      当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是Web浏览器中发生的事情,比如说某个Web页面加载完成,或者是用户滚动窗口或改变窗口大小。常见事件:(http://www.runoo
Stella981 Stella981
2年前
Javascript 页面行为事件&自定义事件
页面行为事件定义:指窗体(window)和根页面(document)的形态、状态的改变触发的时间,这里主要指出典型的页面行为事件。常见的页面行为事件//阻塞询问用户window.onbeforeunload  function() {     return '你确认要离开吗?';
Stella981 Stella981
2年前
Javascript高级编程学习笔记(57)—— 事件(1)事件流
事件JS与HTML的交互是通过事件实现的而事件指的就是:文档或浏览器窗口特定的交互瞬间可以通过侦听器来预定事件,以便在事件发生时执行相应的代码这种模式也是设计模式中的观察者模式事件流有了事件,也就有了事件流的概念事件流故名思意:也就是事件的流向,所以事件流描述的是从页面中接收事件的顺序虽然事件流描述的都是事件的流