史上最详细的DOM事件之框架事件

简介: 史上最详细的DOM事件之框架事件上篇博客讲了DOM的拖动事件,这篇博客我们来讲一讲DOM的媒体事件。HTML代码: <img src="../../CSS/0421/car.gif" alt=""> 1JS代码: var oImg=document.getElementsByTagName("img")[0]; // 属性 描述 DOM // onload 一张页面或一幅图像完成加载。 // window.onloda=function(){ // } oImg.onload=function(ev)

史上最详细的DOM事件之框架事件



上篇博客讲了DOM的拖动事件,这篇博客我们来讲一讲DOM的媒体事件。


HTML代码:



<imgsrc="../../CSS/0421/car.gif"alt="">


JS代码:


 

var oImg=document.getElementsByTagName("img")[0];
    // 属性 描述  DOM
    // onload 一张页面或一幅图像完成加载。
    // window.onloda=function(){
    // }
    oImg.onload=function(ev){
        console.log("图片加载完成");
        console.log(ev)
    }
    // onabort  图像的加载被中断。 ( <object>) 
    // onbeforeunload 该事件在即将离开页面(刷新或关闭)时触发  
    // onerror  在加载文档或图像时发生错误。 ( <object>, <body><frameset>)  
    // onhashchange 该事件在当前 URL 的锚部分发生修改时触发。  
    // onpageshow 该事件在用户访问页面时触发 
    // onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发  
    // onresize 窗口或框架被重新调整大小。 
    window.onresize=function(ev){
        console.log(innerWidth,innerHeight);
        console.log(ev);
    }
    // onscroll 当文档被滚动时发生的事件。 
    window.onscroll=function(ev){
        console.log(scrollY);
        console.log(ev);
    }
    // onunload 用户退出页面。 ( <body><frameset>)


视频讲解链接:


https://www.bilibili.com/video/BV1yi4y147gD/

相关文章
|
7月前
|
XML 消息中间件 JavaScript
从0开始学习JavaScript--JavaScript DOM操作与事件处理
在前端开发中,DOM(文档对象模型)是一个至关重要的概念,它为JavaScript提供了一种与HTML和XML文档交互的方法。本文将深入探讨DOM的概念与作用,以及JavaScript与DOM之间的密切关系。
|
XML 存储 JavaScript
Dom4j框架解析XML
Dom4j框架解析XML
124 0
|
1月前
|
编解码 JavaScript 前端开发
在跨平台虚拟 DOM 框架中处理动画效果
【10月更文挑战第25天】在跨平台虚拟 DOM 框架中处理动画效果需要综合运用多种技术和方法,充分考虑不同平台的特点和性能要求,通过合理的设计和优化,实现高效、流畅且具有良好兼容性的动画效果,从而为用户提供更加丰富和生动的交互体验。
109 63
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
47 5
|
1月前
|
JavaScript 前端开发 算法
框架为什么要设计虚拟 dom?
【10月更文挑战第26天】框架设计虚拟 DOM 是为了在性能优化、开发效率提升、可维护性增强以及跨平台适配等方面提供更好的解决方案。它有效地解决了传统前端开发中存在的诸多问题,使得前端开发更加高效、灵活和可维护,为构建复杂的现代 Web 应用和跨平台应用提供了有力的支持。
48 6
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
28 5
|
2月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
29 0
|
3月前
|
前端开发 JavaScript
CSS中禁用DOM事件
CSS中禁用DOM事件
|
4月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
142 1
|
4月前
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
57 1