首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

列出可用JavaScript事件的参考?

在JavaScript中,事件是用户与浏览器之间交互的一种方式。以下是一些常用的JavaScript事件参考:

  1. Mouse Events
    • click:当用户点击一个元素时触发。
    • dblclick:当用户在一个元素上双击时触发。
    • mousedown:当用户按下鼠标按钮时触发。
    • mouseup:当用户释放鼠标按钮时触发。
    • mousemove:用户在元素上移动鼠标时触发。
    • mouseover:用户将鼠标移到元素上时触发。
    • mouseout:用户将鼠标从元素上移走时触发。
    • mouseenter:用户将鼠标移到元素上时触发,不冒泡。
    • mouseleave:用户将鼠标从元素上移走时触发,不冒泡。
  2. Keyboard Events
    • keydown:用户按下一个键时触发。
    • keyup:用户释放一个键时触发。
    • keypress:在用户按下并释放一个键时触发。
  3. Form Events
    • submit:当用户提交表单时触发。
    • reset:当用户重置表单时触发。
    • change:当用户更改表单元素的值时触发。
    • focus:当元素获得焦点时触发。
    • blur:当元素失去焦点时触发。
  4. Window Events
    • load:当浏览器完成页面加载时触发。
    • unload:当浏览器卸载页面时触发。
    • beforeunload:在浏览器卸载页面之前触发,允许显示提示消息。
    • resize:当浏览器窗口大小调整时触发。
    • scroll:当用户滚动页面时触发。
  5. Document Events
    • DOMContentLoaded:当浏览器完成解析HTML文档时触发。
  6. Touch Events
    • touchstart:当用户触摸屏幕时触发。
    • touchend:当用户手指离开屏幕时触发。
    • touchmove:当用户手指在屏幕上移动时触发。
    • touchcancel:当系统取消触摸操作时触发。

这些事件可以使用addEventListener()方法来监听,并通过事件对象(通常为evente)获取有关事件的详细信息。例如:

代码语言:javascript
复制
document.getElementById("myButton").addEventListener("click", function(event) {
  console.log("Button clicked: ", event.target);
});

请注意,这些事件并非仅限于云计算领域,它们是JavaScript编程中的基本概念。在云计算中,这些事件可以用于处理用户交互、动态更新内容等任务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript事件

javascript与HTML之间交互是通过事件实现事件就是文档或浏览器窗口中发生一些特定交互瞬间。...1) 事件流 描述是从页面中接受事件顺序 1. 事件冒泡 (IE事件流) 事件开始由最具体元素接收,然后逐级向上传播到不具体节点。...HTML事件处理程序 某个元素支持每种事件,都可以使用一个与相应事件处理程序同名HTML特性来指定。这个特性值应该是能够执行JavaScript代码。...="button" value="clickMe" onclick = "showMsg()"> function showMsg(){...3)HTML与JavaScript代码紧密耦合。 2. DOM0级事件处理程序 通过javascript制定事件处理程序传统方式,将一个函数赋值给一个事件处理程序属性。

1.4K30

浅谈JavaScript事件事件对象)

在触发DOM上某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有关信息。包括导致事件元素、事件类型和事件相关信息。例如鼠标操作事件中,会包含鼠标的位置信息。...而键盘触发事件会包含与按下键有关信息。所有浏览器都支持event对象,但支持方式不同。 DOM中事件对象   兼容dom浏览会将一个event对象传递到事件处理程序中。...只读 为true表示事件是浏览器生成,false表示JavaScript添加 type String 只读 被触发事件类型 view AbstarctView 只读 与事件关联抽象视图   上面的表格列出了...但是如果通过attachEvent添加事件,则事件处理程序会传递一个event对象。   IEevent对象同样包含创建它相关属性和方法,与DOM事件一样,也会因为事件类型不同而不同。...,取消事件默认行为 srcElement Element 只读 事件目标,与target相同   因为事件处理程序指定方式不同,故它作用域也不相同。

1.2K60

浅谈JavaScript事件事件委托)

需要事先为DOM对象指定事件处理程序,导致访问DOM次数增多,会延迟整个页面的交互就绪时间。 事件委托   对事件处理程序过多解决方案是使用事件委托。...事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型所有事件。...ul1指定了事件处理程序,在我们单击li时候通过事件冒泡也会触发该事件,并且能够通过target来获取当前单击元素对象。...移除事件处理程序   前文已经讲过事件添加以及事件移除。对于页面的事件处理程序太多,会影响页面的性能,除了使用事件委托之外,还可以将一些事件移除。...内存中留有的一些过时用不到事件处理程序也是造成Web页面和内存性能主要问题。

1K70

浅谈JavaScript事件事件类型)

Web浏览器能够发生事件有很多种类型,不同事件类型有不同事件信息。...DOM3级事件类型主要包括:UI事件,用户与页面上元素交互时触发;焦点事件,元素获得或失去焦点触发;鼠标事件,用户通过鼠标在页面上执行操作时触发;滚轮事件,使用鼠标滚轮时触发;文本事件,当在文档中输入文本时触发...,则在object上面触发;error事件,当发生JavaScript脚本错误时触发,当无法加载图像时,在img元素上触发,当无法加载嵌入内容时在object上触发,当框架无法加载时触发;select事件...当用户在页面上由一个元素移动到另一个元素事件触发顺序为:focusout事件,在失去焦点元素上触发;focusin事件,在获得焦点元素上触发;blur事件,在失去焦点元素上触发;focus事件,...  复合事件是DOM3级中新增加一类事件,用于处理IME输入序列。

1.8K50

浅谈JavaScript事件事件流)

事件流描述是从页面中接收事件顺序。IE事件流失事件冒泡,而Netspace事件流失事件捕获。...事件冒泡   IE事件流叫事件冒泡,即事件开始时,由具体元素(文档中嵌套层次最深节点)接收,然后向上传播到不具体节点。...事件捕获    事件捕获思想是不太具体节点先接收到事件,最具体节点最后接收到事件事件捕获用意在于事件到达最终节点前,就可以捕获。...首先发生事件捕获,为事件截获提供了机会。然后是实际目标接收到事件。最后一个是事件冒泡阶段,可以在这这个阶段对事件作出响应。 ?   ...下一个阶段处于目标阶段,于是事件在div上面发生,并在事件处理中被看成事件冒泡阶段一部分。最后事件冒泡发生,并将事件回传到document。ie8以及更早浏览器不支持Dom事件流。

84380

浅谈JavaScript事件事件模拟)

事件经常由操作或者通过浏览器功能触发,通过JavaScript也可以触发元素事件。通过JavaScript触发事件,也称为事件模拟。...模拟事件最后一步是触发事件,触发事件使用dispatchEvent方法,所有支持DOM事件节点都支持该方法。...,如true;view,事件关联视图,一般是document.defaultView;detail,与事件有关详细信息,通常设置为0;screenX,事件相对于屏幕x坐标;screenY,事件相对于屏幕...可以通过JavaScript代码模拟鼠标事件、键盘事件、HTML事件和变动事件。同时也可以模拟自定义事件。...第5行输出事件类型为myevent,正是我们自定义事件。   上面的创建模拟事件方法在ie8以及ie8以下浏览器中,并不支持。可以使用以下代码来模拟事件

2K70

浅谈JavaScript事件事件处理程序)

HTML事件处理程序 元素支持事件,都可以使用与相应事件处理程序同名HTML特性来指定。这个特性值能支持一定JavaScript代码。...例如,在单击按钮时候执行一些JavaScript代码。 ...不同JavaScript引擎遵循标识符解析规则略有差异,很可能在访问非限定对象时出错。   通过HTML指定事件处理程序最后一个缺点是HTML与JavaScript代码紧密耦合。...如果要更换事件处理程序就需要改动两个地方:JavaScript和HTML。 DOM级事件处理程序   通过JavaScript指定事件处理程序传统方式是将一个函数赋值给事件处理程序属性。...通过JavaScript指定事件处理程序有两个优势:简单和浏览器兼容性好。要使用JavaScript指定事件处理程序,首先必须获取一个元素对象引用。

1.4K50

JavaScript事件对象与事件委托

事件对象 包含事件相关信息,如鼠标、时间、触发DOM对象等  js默认将事件对象封装好,并自动以参数形式,传递给事件处理函数第1个参数,如下: document.getElementsByTagName...("div")[0].onclick = function(e){   e = window.event || e; //兼容IE低版本(事件对象绑定在windowevent上)   console.log...(e);//这里e就是事件对象 } 事件属性和方法 type:获取事件类型(click、mouseover等等) target:获取发生所在元素(在低版本IE下用srcElement属性) stopPropagation...() 阻止事件冒泡(IE用cancelBubble属性为false阻止冒泡) preventDefault() 阻止事件默认行为(IE用returnValue属性为false阻止默认行为) 事件委托 利用...target属性,获取时间发生所在对象,避免全体子元素加事件,对比如下:  var tbs=document.getElementsByTagName("td"); for(var i=0;i

88750

javascript事件原理

一、事件 事件是文档或者浏览器窗口中发生,特定交互瞬间。 事件是用户或浏览器自身执行某种动作,如click,load和mouseover都是事件名字。...事件javaScript和DOM之间交互桥梁。 你若触发,我便执行——事件发生,调用它处理函数执行相应JavaScript代码给出响应。...1、两种事件流模型 事件传播顺序对应浏览器两种事件流模型:捕获型事件流和冒泡型事件流。 冒泡型事件流:事件传播是从最特定事件目标到最不特定事件目标。即从DOM树叶子到根。...【推荐】 捕获型事件流:事件传播是从最不特定事件目标到最特定事件目标。即从DOM树根到叶子。 事件捕获思想就是不太具体节点应该更早接收到事件,而最具体节点最后接收到事件。 <!...关于target更多内容请参考javaScript事件(四)event公共成员(属性和方法) 下面举例来说明。

1K10

javascript对点击事件和拖动事件区分

1.项目中,为了更好服务用户,经常会设计一个便捷通道,这个通道一般都是“悬浮”。...最重要就是要区分点击事件和拖动事件。 我们都知道,点击事件是被点击对象可看做是静止不动,而拖动事件对象很明显是移动。...那么思路就应该是先判断事件对象是否有移动现象, 但是由于不管是在点击事件和拖动事件,其都有一个鼠标按下一个过程和一个松开过程,只不过拖动事件多了一个拖动动作。...那么完整思路应是这样: 第一:先写出鼠标按下函数; 第二:编写对象是否被拖动函数; 第三:判断对象是否相对原先位置产生了位移; 第四:编写鼠标松开之后代码; 完整代码如下: var timmerHandle...:731771211 ,里面都是学习前端,如果你想制作酷炫网页,想学习知识。

5K30

浅析 JavaScript事件委托

有没有更好方法? 幸运是,如果我们使用“事件委托”模式的话,侦听多个元素上事件只需要一个事件侦听器。 事件委托使用事件传播机制细节。想要要了解事件委托工作原理,应该先了解什么是事件传播。...点击事件传播分三个阶段: 捕获阶段 —— 从window,document 和根元素开始,事件向下扩散至目标元素祖先 目标阶段 —— 事件在用户单击元素上触发 冒泡阶段——最后,事件冒泡通过目标元素祖先...JavaScript事件传播 addEventListener 方法第三个参数 captureOrOptions: element.addEventListener(eventType, handler...那么事件传播是怎样帮助捕获多个按钮事件呢? 该算法很简单:把事件侦听器附加到按钮父级,并在单击按钮时捕获冒泡事件。这就是事件委托工作方式。...原文:https://dmitripavlutin.com/javascript-event-delegation/ ---- Reference [1] 在 Codesandbox 上查看它是怎样工作

2.6K30

要小心 JavaScript 事件代理

,即没有代理任何子元素事件。...事件代理意思是,你要为一个元素绑定事件,但你不是直接把事件绑定到这个元素自己身上,而是绑定到这个元素父元素上。...当子元素某个事件(比如点击事件)触发时,它父元素相同事件也会触发(我们常说事件冒泡),此时我们说父元素代理了子元素事件。...依据这个思想和事件冒泡特点,我们就有了比较好解决办法:只需要禁止 button 内部元素事件响应(包括事件冒泡)而只允许 button 元素本身事件发生就行。有两种方式可以实现这个目的。...综上,针对特定元素进行事件处理时,如果该元素有事件代理情况,就要小心处理它所代理子元素。

57720

JavaScriptEvent(事件)详解

Event 对象 Event 对象代表事件状态,比如事件在其中发生元素、键盘按键状态、鼠标的位置、鼠标按钮状态。 事件通常与函数结合使用,函数不会在事件发生前被执行!...事件句柄 (Event Handlers) HTML 4.0 新特性之一是能够使 HTML 事件触发浏览器中行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript。...下面是一些常用属性,可将之插入 HTML 标签以定义事件行为。 1、单击事件 ? 2、双击事件 ?...5、焦点事件 onfocus:获得焦点事件 onblur:失去焦点事件 onchange:失去焦点时内容改变事件 ? 6、页面加载事件 onload:页面加载完成时实现页面。 ?...如下图:同时触发两种事件 ? 相关事件所对应函数代码: ? 附:事件名称表 ?

90710

深入理解JavaScript事件传播机制:事件冒泡和事件捕获

前言在JavaScript中,事件冒泡和事件捕获是两种不同事件传播方式。当一个事件被触发时,它会从最内层元素开始,然后逐级向外传播,直到最外层元素。...在这个过程中,事件会经过每一个元素,直到它到达最内层元素。在本文中,我们将详细了解事件冒泡和事件捕获,并探讨它们在JavaScript实现以及如何使用它们。...事件冒泡从最内层元素开始向外传播,而事件捕获从最外层元素开始向内传播。这意味着当你单击一个按钮时,事件冒泡会先触发按钮事件,然后是它父元素事件,以此类推,直到它到达文档最外层。...如何使用事件冒泡和事件捕获在JavaScript中,你可以使用addEventListener()方法来注册事件处理程序,并指定事件传播方式。...这是因为事件从文档最外层开始向内传播,然后经过外部div、内部div和按钮,直到它到达按钮。结论在JavaScript中,事件冒泡和事件捕获是两种不同事件传播方式。

83221

揭开 JavaScript 事件循环神秘面纱

为实现这一点,Javascript 引擎有一个称为事件循环重要组件。我们将了解什么是事件循环以及它如何在不阻塞主线程情况下处理异步任务。 什么是事件循环?...事件循环是 Javascript一种机制,可以执行非阻塞异步操作。它允许 Javascript 在不阻塞主线程情况下处理诸如从服务器获取数据、发出 HTTP 请求和处理用户事件等任务。...根据MDN Doc,它是一个运行时模型,它执行代码,收集和处理事件,并执行排队子任务。了解事件循环工作原理对于编写高效和高性能代码至关重要。...为了更好地理解事件循环,让我们列出用于执行异步代码组件 - 调用堆栈:JavaScript 使用调用堆栈来跟踪当前正在执行函数(执行上下文)。...事件循环对于编写高效且响应迅速 JavaScript 代码至关重要。

26740

前端JavaScript动态事件添加

前言 在前端开发中,交互性是至关重要。动态事件添加是一种在JavaScript中实现交互重要技术。本文将介绍动态事件添加概念和优势,并详细介绍两种常用动态事件添加方法。...事件基本概念 事件是指在网页中发生特定交互行为,比如点击按钮、滚动页面或输入文本等。通过事件,我们可以在特定交互行为发生时触发相关JavaScript代码,以实现相应操作和逻辑。...3.事件处理函数中编写具体操作逻辑。 通过事件委托实现动态事件绑定 事件委托是一种利用事件冒泡原理动态事件绑定技术。通过将事件绑定到父元素上,可以在父元素上捕获子元素触发事件。...实现事件委托步骤如下: 1.找到共同父元素,通常是包含所有子元素容器。 2.使用事件冒泡方式将事件绑定到父元素上。...3.在父元素事件处理函数中,通过判断事件目标元素,确定要执行操作。 总结 动态事件添加是前端开发中实现交互性重要手段。通过动态事件添加,我们可以实现灵活、可扩展交互效果,减少重复代码编写。

20120
领券