56、GlobalEventHandlers 接口

简介: 某个对象的abort事件(停止加载)发生时,就会调用onabort属性指定的回调函数。各种元素的停止加载事件,到底如何触发,目前并没有统一的规定。因此实际上,这个属性现在一般只用在<img>元素上面。

GlobalEventHandlers.onabort

某个对象的abort事件(停止加载)发生时,就会调用onabort属性指定的回调函数。

各种元素的停止加载事件,到底如何触发,目前并没有统一的规定。因此实际上,这个属性现在一般只用在<img>元素上面。

// HTML 代码如下
// <img src="example.jpg" id="img">
var img = document.getElementById('img');
img.onabort = function () {
  console.log('image load aborted.');
}

GlobalEventHandlers.onerror

error事件发生时,就会调用onerror属性指定的回调函数。

error事件分成两种。

一种是 JavaScript 的运行时错误,这会传到window对象,导致window.onerror()

window.onerror = function (message, source, lineno, colno, error) {
  // ...
}

window.onerror的处理函数共接受五个参数,含义如下。

  • message:错误信息字符串
  • source:报错脚本的 URL
  • lineno:报错的行号,是一个整数
  • colno:报错的列号,是一个整数
  • error: 错误对象

另一种是资源加载错误,比如<img><script>加载的资源出现加载错误。这时,Error 对象会传到对应的元素,导致该元素的onerror属性开始执行。

element.onerror = function (event) {
  // ...
}

注意,一般来说,资源的加载错误不会触发window.onerror

GlobalEventHandlers.onload、GlobalEventHandlers.onloadstart

元素完成加载时,会触发load事件,执行onload()。它的典型使用场景是window对象和<img>元素。对于window对象来说,只有页面的所有资源加载完成(包括图片、脚本、样式表、字体等所有外部资源),才会触发load事件。

对于<img><video>等元素,加载开始时还会触发loadstart事件,导致执行onloadstart

GlobalEventHandlers.onfocus,GlobalEventHandlers.onblur

当前元素获得焦点时,会触发element.onfocus;失去焦点时,会触发element.onblur

element.onfocus = function () {
  console.log("onfocus event detected!");
};
element.onblur = function () {
  console.log("onblur event detected!");
};

注意,如果不是可以接受用户输入的元素,要触发onfocus,该元素必须有tabindex属性。

GlobalEventHandlers.onscroll

页面或元素滚动时,会触发scroll事件,导致执行onscroll()

GlobalEventHandlers.oncontextmenu,GlobalEventHandlers.onshow

用户在页面上按下鼠标的右键,会触发contextmenu事件,导致执行oncontextmenu()。如果该属性执行后返回false,就等于禁止了右键菜单。document.oncontextmenuwindow.oncontextmenu效果一样。

document.oncontextmenu = function () {
  return false;
};

上面代码中,oncontextmenu属性执行后返回false,右键菜单就不会出现。

元素的右键菜单显示时,会触发该元素的onshow监听函数。

其他的事件属性

鼠标的事件属性。

  • onclick
  • ondblclick
  • onmousedown
  • onmouseenter
  • onmouseleave
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onwheel

键盘的事件属性。

  • onkeydown
  • onkeypress
  • onkeyup

焦点的事件属性。

  • onblur
  • onfocus

表单的事件属性。

  • oninput
  • onchange
  • onsubmit
  • onreset
  • oninvalid
  • onselect

触摸的事件属性。

  • ontouchcancel
  • ontouchend
  • ontouchmove
  • ontouchstart

拖动的事件属性分成两类:一类与被拖动元素相关,另一类与接收被拖动元素的容器元素相关。

被拖动元素的事件属性。

  • ondragstart:拖动开始
  • ondrag:拖动过程中,每隔几百毫秒触发一次
  • ondragend:拖动结束

接收被拖动元素的容器元素的事件属性。

  • ondragenter:被拖动元素进入容器元素。
  • ondragleave:被拖动元素离开容器元素。
  • ondragover:被拖动元素在容器元素上方,每隔几百毫秒触发一次。
  • ondrop:松开鼠标后,被拖动元素放入容器元素。

<dialog>对话框元素的事件属性。

  • oncancel
  • onclose
目录
相关文章
|
8月前
|
前端开发 搜索推荐 编译器
【01】python开发之实例开发讲解-如何获取影视网站中经过保护后的视频-用python如何下载无法下载的视频资源含m3u8-python插件之dlp-举例几种-详解优雅草央千澈
【01】python开发之实例开发讲解-如何获取影视网站中经过保护后的视频-用python如何下载无法下载的视频资源含m3u8-python插件之dlp-举例几种-详解优雅草央千澈
368 34
【01】python开发之实例开发讲解-如何获取影视网站中经过保护后的视频-用python如何下载无法下载的视频资源含m3u8-python插件之dlp-举例几种-详解优雅草央千澈
|
10月前
|
存储 云安全 人工智能
带你读《阿里云安全白皮书》(二十四)——云上安全建设最佳实践(2)
本文介绍了阿里云在AI大模型云上安全方面的最佳实践,涵盖数据安全、模型安全、内容安全和合规性四大关键挑战。阿里云通过数据加密、私有链接传输、机密计算等技术手段,确保数据和模型的安全性;同时,提供内容安全检测、Prompt问答护栏等功能,保障生成内容的合法合规。此外,阿里云还帮助企业完成算法及模型备案,助力客户在AI大模型时代安全、合规地发展。
|
人工智能 搜索推荐 算法
啥是AI,认识身边的AI
人工智能,或AI,悄然融入我们的日常生活,成为不可或缺的一部分。在智能手机中,语音助手如Siri、小爱同学等,不仅帮我们完成日常操作,还能提供陪伴。AI还化身时尚摄影师,美化我们的照片;通过个性化推荐,在各类应用中呈现我们感兴趣的内容。智能家居中,智能音箱控制家电,安全摄像头守卫家庭,智能冰箱推荐健康食谱。在线上,AI优化购物体验,定制化信息流让我们享受个性化社交。在医疗领域,AI辅助诊断疾病,智能手环监测健康。出行时,AI规划最佳路线,自动驾驶预示未来。教育娱乐方面,AI定制学习计划,创造沉浸式游戏体验。AI已成为我们贴心的生活助手。
|
人工智能 测试技术 API
【AIGC】LangChain Agent(代理)技术分析与实践
【5月更文挑战第12天】 LangChain代理是利用大语言模型和推理引擎执行一系列操作以完成任务的工具,适用于从简单响应到复杂交互的各种场景。它能整合多种服务,如Google搜索、Wikipedia和LLM。代理通过选择合适的工具按顺序执行任务,不同于链的固定路径。代理的优势在于可以根据上下文动态选择工具和执行策略。适用场景包括网络搜索、嵌入式搜索和API集成。代理由工具组成,每个工具负责单一任务,如Web搜索或数据库查询。工具包则包含预定义的工具集合。创建代理需要定义工具、初始化执行器和设置提示词。LangChain提供了一个从简单到复杂的AI解决方案框架。
1046 3
|
网络协议 算法 网络性能优化
CCNA 200-301系列:TCP 窗口
【4月更文挑战第21天】
170 7
|
Java Go Scala
Go 语言基础之基本语法(3)
Go 语言基础之基本语法
|
机器学习/深度学习 人工智能 算法
AI日报:人工智能使用和评估的关键任务
AI日报:人工智能使用和评估的关键任务
SyntaxError: await is only valid in async function
SyntaxError: await is only valid in async function
|
存储 C语言 数据格式
【手把手带你刷题】-C语言编程入门篇(四)
【手把手带你刷题】-C语言编程入门篇(四)
122 0
Java将CST的时间字符串转换成需要的日期格式字符串
Java将CST的时间字符串转换成需要的日期格式字符串