一文解读JavaScript中的事件知识

简介: 一文解读JavaScript中的事件知识

前言


相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。


1.事件


1).鼠标事件

onclick     #鼠标单击  ondblclick  #双击鼠标onmousedown #鼠标按钮被按下。onmousemove #鼠标被移动。onmouseover #鼠标移到某元素之上。onmouseout  #鼠标从某元素移开。onmouseup   #鼠标按键被松开。

image.png

2).键盘事件

onkeydown #按键被按下onkeypress #按键被按下并松开onkeyup #按键被松开

image.png

3)框架事件

onabort 图像的加载被中断 onerror 在加载文档或图像时发生错误onload  页面或图像完成加载  onresize 窗口或框架被重新调整大小onscroll 滚动事件onunload 退出页面

image.png

可以看到一会儿就滚动了这么多下。

4).表单对象

onblur 元素失去焦点 onchange 文本域的内容被改变onfocus 元素获得焦点onreset 重置按钮onselect 文本选中onsubmit 确认提交

image.png


总结


这篇文章主要结束了JavaScript的事件知识。下一篇文章,我们继续介绍JavaScript,敬请期待!

相关文章
|
4月前
|
JavaScript 前端开发
|
1月前
|
JavaScript
事件触发、事件捕获与事件冒泡(js的问题)
事件触发、事件捕获与事件冒泡(js的问题)
13 0
|
12天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
22 2
|
2天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
4天前
|
JavaScript 前端开发 开发者
【JavaScript技术专栏】JavaScript事件处理机制详解
【4月更文挑战第30天】本文探讨JavaScript中的事件处理机制,涉及事件类型(如click、mouseover)、事件流(冒泡型、捕获型及目标阶段)、事件处理函数(内联与addEventListener方法)以及事件委托(用于优化内存和处理动态元素)。此外,还介绍了事件取消,通过`preventDefault()`和`stopPropagation()`控制事件行为。理解这些概念对构建交互式Web应用至关重要。
|
5天前
|
JavaScript 前端开发
11.JavaScript 事件的概念以及绑定方法
11.JavaScript 事件的概念以及绑定方法
|
17天前
|
JavaScript 前端开发 UED
JavaScript的事件介绍
JavaScript的事件介绍
|
17天前
|
JavaScript 前端开发
|
1月前
|
JavaScript 前端开发 流计算
JS:oninput和onchange事件的区别
JS:oninput和onchange事件的区别
21 1
|
2月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件,而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。例如: ```javascript element.addEventListener('click', console.log, false); // 冒泡 element.addEventListener('click', console.log, true); // 捕获 ```
18 0