百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

技术专栏-js事件 js事件概念

bigegpt 2024-10-12 06:29 3 浏览

内容导读

不同JavaScript引擎遵循的标识符解析规则略有差异,很可能会在访问非限定对象成员时出错 过HTML指定事件处理程序的最后一个缺点是HTML与JavaScript代码紧密耦合。5、IE事件处理程序 IE8及一下版本实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。abort :在用户停止下载过程时,如果嵌入的内容没有加载完,则在元素上面触发。select :当用户选择文本框(或)中的一或多个字符时触发。这一点对确保易访问性很重要,意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。Safari 3.1之前的版本也会在用户按下非字符键时触发keypress事件。

事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型

一、事件流

IE的事件流是事件冒泡流,而NetscapeCommunicator的事件流是事件捕获流

1、事件冒泡

即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。

2、事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。

3、DOM事件溜

“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。

IE9、Opera、Firefox、Chrome和Safari都支持DOM事件流;IE8及更早版本不支持DOM事件流。

二、事件处理程序

事件就是用户或浏览器自身执行的某种动作。诸如click、load和mouseover,都是事件的名字。而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以"on"开头

1、HTML事件处理程序

直接在html中绑定事件。例如:

<input type="button" value="Click Me" onclick="alert('Clicked')" />
缺点:
  • 在HTML中指定事件处理程序有两个缺点。首先,存在一个时差问题。因为用户可能会在HTML元素一出现在页面上就触发相应的事件,但当时的事件处理程序有可能尚不具备执行条件。

  • 这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。不同JavaScript引擎遵循的标识符解析规则略有差异,很可能会在访问非限定对象成员时出错

  • 过HTML指定事件处理程序的最后一个缺点是HTML与JavaScript代码紧密耦合。

2、DOM0级事件处理程序

是将一个函数赋值给一个事件处理程序属性。

var btn = document.getElementById("myBtn");
btn.onclick = function(){alert("Clicked");};
// 程序中的this引用当前元素。
//删除事件处理程序
btn.onclick = null;

3、DOM2级时间处理程序

“DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()removeEventListener()。所有DOM节点中都包含这两个方法,并且它们都接受3个参数:

  1. 要处理的事件名、

    1. 作为事件处理程序的函数

    1. 一个布尔值。最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。

    使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。

    var btn = document.getElementById("myBtn");
    btn.addEventListener("click", function(){alert(this.id);}, false);
    
    btn.addEventListener("click", function(){alert("Hello world!"); }, false);

    大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要,我们不建议在事件捕获阶段注册事件处理程序。

    4、DOM3级事件(规定了几类事件)

    • UI(User Interface,用户界面)事件,当用户与页面上的元素交互时触发;

    • 焦点事件,当元素获得或失去焦点时触发;

    • 鼠标事件,当用户通过鼠标在页面上执行操作时触发;

    • 滚轮事件,当使用鼠标滚轮(或类似设备)时触发;

    • 文本事件,当在文档中输入文本时触发;

    • 键盘事件,当用户通过键盘在页面上执行操作时触发;

    • 合成事件,当为IME(Input Method Editor,输入法编辑器)输入字符时触发;

    • 变动(mutation)事件,当底层DOM结构发生变化时触发。

    5、IE事件处理程序

    IE8及一下版本实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。

    三、事件对象

    在触发DOM上的某个事件时,会产生一个事件对象event

    e.preventDefault()
    e.stopPropagation()

    [图片上传失败...(image-2de301-1525359500979)]
    [图片上传失败...(image-397a8b-1525359500979)]

    四、事件类型

    1、UI 事件

    • load: 当页面完全加载后在window上面触发,当所有框架都加载完毕时在框架集上面触发,当图像加载完毕时在<img>元素上面触发,或者当嵌入的内容加载完毕时在<object>元素上面触发。

    • unload:当页面完全卸载后在window上面触发,当所有框架都卸载后在框架集上面触发,或者当嵌入的内容卸载完毕后在<object>元素上面触发。

    • abort:在用户停止下载过程时,如果嵌入的内容没有加载完,则在<object>元素上面触发。

    • error:当发生JavaScript错误时在window上面触发,当无法加载图像时在<img>元素上面触发,当无法加载嵌入内容时在<object>元素上面触发,或者当有一或多个框架无法加载时在框架集上面触发。第17章将继续讨论这个事件。

    • select:当用户选择文本框(<input>或<tex-terea>)中的一或多个字符时触发。第14章将继续讨论这个事件。

    • resize:当窗口或框架的大小变化时在window或框架上面触发。

    • scroll:当用户滚动带滚动条的元素中的内容时,在该元素上面触发。<body>元素中包含所加载页面的滚动条。

    2、焦点事件

    • blur:在元素失去焦点时触发。这个事件不会冒泡;所有浏览器都支持它。

    • focus:在元素获得焦点时触发。这个事件不会冒泡;所有浏览器都支持它。

    3、鼠标与滚轮事件

    DOM3级事件中定义了9个鼠标事件:

    • click:在用户单击主鼠标按钮(一般是左边的按钮)或者按下回车键时触发。这一点对确保易访问性很重要,意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。

    • dblclick:在用户双击主鼠标按钮(一般是左边的按钮)时触发。从技术上说,这个事件并不是DOM2级事件规范中规定的,但鉴于它得到了广泛支持,所以DOM3级事件将其纳入了标准。

    • mousedown:在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。

    • mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件,但DOM3级事件将它纳入了规范。IE、Firefox9+和Opera支持这个事件。

    • mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件,但DOM3级事件将它纳入了规范。IE、Firefox9+和Opera支持这个事件。

    • mousemove:当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。

    • mouseout:在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。又移

    • mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。

    • mouseup:在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。

    键盘与文本事件

    • keydown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件。

    • keypress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件。按下Esc键也会触发这个事件。Safari 3.1之前的版本也会在用户按下非字符键时触发keypress事件。

    • keyup:当用户释放键盘上的键时触发。

    变动事件

    DOM2级的变动(mutation)事件能在DOM中的某一部分发生变化时给出提示。

    • DOMSubtreeModified:在DOM结构中发生任何变化时触发。这个事件在其他任何事件触发后都会触发

    • DOMNodeInserted:在一个节点作为子节点被插入到另一个节点中时触发

    • DOMNodeRemoved:在节点从其父节点中被移除时触发。

    • DOMNodeInsertedIntoDocument:在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在DOMNodeInserted之后触发

    • DOMNodeRemovedFromDocument:在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved之后触发

    • DOMAttrModified:在特性被修改之后触发。

    • DOMCharacterDataModified:在文本节点的值发生变化时触发。

    五、HTML5事件

    contextmenu事件

    beforeunload事件

    之所以有发生在window对象上的beforeunload事件,是为了让开发人员有可能在页面卸载前阻止这一操作。

    DOMContentLoaded事件

    如前所述,window的load事件会在页面中的一切都加载完毕时触发,但这个过程可能会因为要加载的外部资源过多而颇费周折。而DOMCon-tentLoaded事件则在形成完整的DOM树之后就会触发,不理会图像、JavaScript文件、CSS文件或其他资源是否已经下载完毕。

    readystatechange事件

    提供与文档或元素的加载状态有关的信息

    pageshow和pagehide事件

    第一个事件就是pageshow,这个事件在页面显示时触发,无论该页面是否来自bfcache。在重新加载的页面中,pageshow会在load事件触发后触发;而对于bfcache中的页面,pageshow会在页面状态完全恢复的那一刻触发。另外要注意的是,虽然这个事件的目标是document,但必须将其事件处理程序添加到window。

    hashchange事件

    移动设备

    触摸与手势事件

    • touchstart:当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发。

    • touchmove:当手指在屏幕上滑动时连续地触发。在这个事件发生期间,调用prevent-Default()可以阻止滚动。

    • touchend:当手指从屏幕上移开时触发。

    • touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发时间,文档中没有明确说明。

    手势事件

    gesturestart:当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。

    gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。

    gestureend:当任何一个手指从屏幕上面移开时触发。

    参考文献: javascript 高级编程

  • 相关推荐

    Redis集群对比:主从复制、哨兵模式、Cluster一文看懂所有优缺点

    在分布式系统中,Redis作为高性能的内存数据库,其集群方案的选择直接影响到系统的稳定性、可用性和扩展性。本文将全面对比Redis的三种主流集群方案:主从复制、哨兵模式和Cluster模式,帮助开发者...

    redis的主从复制,读写分离,主从切换

    当数据量变得庞大的时候,读写分离还是很有必要的。同时避免一个redis服务宕机,导致应用宕机的情况,我们启用sentinel(哨兵)服务,实现主从切换的功能。redis提供了一个master,多个sl...

    # Redis 入门到精通(九)-- 主从复制(3)

    #Redis入门到精通(九)--主从复制(3)##一、redis主从复制-常见问题(1)###1、伴随着redis系统的运行,master的数据量会越来越大,一旦master重启...

    redis - 主从复制(Redis主从复制时序图)

    1引言在上一篇文章中,我们了解了Redis两种不同的持久化方式,Redis服务器通过持久化,把Redis内存中持久化到硬盘当中,当Redis宕机时,我们重启Redis服务器时,可以由RDB文件或AO...

    # Redis 入门到精通(九)-- 主从复制(2)

    #Redis入门到精通(九)--主从复制(2)##一、redis主从复制--数据同步阶段注意事项###1、数据同步阶段master说明1)如果master数据量巨大,数据同步阶段应...

    Redis主从复制(redis主从复制主节点挂了)

    介绍Redis有两种不同的持久化方式,Redis服务器通过持久化,把Redis内存中持久化到硬盘当中,当Redis宕机时,我们重启Redis服务器时,可以由RDB文件或AOF文件恢复内存中的数据。不过...

    深入解析 Redis 集群的主从复制实现方式

    在互联网大厂的后端开发领域,Redis作为一款高性能的内存数据库,被广泛应用于缓存、消息队列等场景。而Redis集群中的主从复制机制,更是保障数据安全、实现读写分离以及提升系统性能的关键所在。今...

    Redis主从架构详解(redis主从架构高可用如何实现)

    Redis主从架构搭建Redis主节点配置创建主节点目录(/opt/redis-master),复制redis.conf到该目录下,redis.conf配置项修改#后台启动daemonizeyes...

    抖音“四大包塘战神”:承包了全网的快乐

    在抖音钓鱼垂类领域,"包塘战神"军团正掀起一场黑色幽默风暴。空军华、大表坑、李赔光、透心良四位创作者,以承包鱼塘为舞台,用连续翻车的钓鱼直播构筑起流量奇观。当钓鱼佬在抖音集体转型喜剧人...

    ORACLE 11G RAC 安装-通过VM配置共享磁盘

    简介:在自己的电脑上通过VM软件搭建Oracle11GRAC,通过修改VM的参数文件来实现磁盘共享!目标:搭建RAC环境实现:使用VMwareWorkstation8.0.0+ORACLE...

    Linux操作系统安全配置(linux系统安全配置包括)

    一、服务相关命令systemctlenable服务名#开机自启动systemctldisable服务名#禁用开机自启动systemctlstop服务名#停止服务systemctls...

    关于Linux性能调优中网络I/O的一些笔记

    写在前面和小伙伴分享一些Linux网络优化的笔记,内容很浅,可以用作入门博文内容结合《Linux性能优化》读书笔记整理涉及内容包括常用的优化工具(mii-tool,ethtool,ifconfig,i...

    从 Sonatype Nexus Repository Manager 迁移到 Artifactory

    1.Nexus1.1下载下载链接:https://help.sonatype.com/repomanager3/product-information/download/download-archiv...

    Ubuntu20安装zabbix5.0企业监控系统亲测教程

    前言示例主机:zabbix10.0.100.10,将安装在UbuntuServer上教程说明:因使用官方教程无法安装成功,所以本教程与官方教程有所不同安装前提:已安装UbuntuServer2...

    Linux内核设计与实现—进程管理(linux内核程序设计)

    进程进程就是处于执行期的程序(目标码存放在某种存储介质上)。进并不仅仅局限于一段可执行程序代码(Unix称其为代码段,textsection)。通常进程还要包含其他资源,像打开的文件,挂起的信号,...