javascript事件简述和入门案例，js事件驱动机制；js 点击事件；js 焦点事件表单提交事件，键位弹起事件鼠标移入移除事件，

墨蓝 2022-06-06 03:13 188阅读 0赞

20 js事件简述和入门案例：

通过鼠标或者热键的动作，我们称为事件，例如点击，表单提交等等

21 js事件驱动机制：

页面上的特效。我们可以在js事件驱动机制下进行的

**Js事件驱动机制：四部分**

事件源 谁发生的什么事（按钮）

事件 发生的什么事（点击事件 onclick）

监听器 行为者（方法）

注册/绑定监听器监听事件源（onclick =”run()”）

事件源：专门产生事件的组件

事件：由事件源所产生的动作或者事情

监听器：专门处理事件源所产生的事件

注册/绑定监听器：让监听器时刻监听事件源是否有指定的事件的产生，

**先写方法，再写按钮，然后写onclick  ，最后让onclick和方法产生连接**

22 常见的js** 点击事件：onclick：**由鼠标或热键点击元素组件时触发

< input type=”button” value=”按钮的名字” οnclick=”run()” />

23 常见的js**焦点事件：获得焦点事件 onfocus：失去焦点事件 onblur**

焦点：即整个页面的注意力

一般一个页面最多仅有一个焦点

24 js事件 **域内容改变事件：onchange**

25 **加载完毕事件：onload**

加载完毕事件：只要组件被加载完毕就会触发这个事件

26 **表单提交事件：onsubmit**

表单的提交事件：表单的提交按钮被点击是触发事件；

**Onsubmit=”return 绑定的方法名”**（绑定的方法也需要返回true或者false）；

主要用于表单的校验

**返回值 True  允许表单提交 False  阻止表单的提交**

**Onsubmit=”return 绑定的方法名” **（需要在方法名前面添加return用来把方法返回的boolean值return给onsubmit）

27 **键位弹起事件：onkeyup**

键位弹起事件：在组件中输入某些内容时，键盘键位弹起时触发该事件

适用于所有检测键盘按键弹起的事件

**键盘敲击事件：onkeydown**

键盘在按下时触发该事件。按键不弹起，一直触发。

Onkeydown=”run(event)”  e.keyCode. 获取按下键盘对应的编码

28 常用鼠标事件：

**鼠标移入（移入不需要点击）事件onmouseover：**当鼠标移入某个组件时就会触发此事件

**鼠标移出（移出也不需要点击）事件onmouseout：**当鼠标期初某个组件时就会触发此事件

29 元素事件句柄绑定：

一个事件=“run1（）.Run2（）.” 可以绑定多个方法，也可以绑定无参的方法

30 js事件绑定方式 DOM绑定方式：

DOM绑定方式 ； 对象.事件属性  一次只能绑定一个，不能传递参数

Window.onload =run;

第二种 DOM绑定方式，匿名函数 可以 绑定多个函数，可以传递参数

window.οnlοad=function()\{

Run1();

Run2();

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，188人围观）

还没有评论，来说两句吧...

相关阅读

相关 js事件应用--基础（事件对象、鼠标事件、键盘事件）

案例1：event事件对象： <!DOCTYPE html> <html> <head> <meta charset="utf-8">

小咪咪/ 2024年02月17日 23:21/ 0 赞/ 69 阅读

相关 js点击事件(Js点击事件冲突怎么办)

JS点击onclick事件这个是闭包的问题 for (var i = 12; i <= 16; i++) \{ (function(i)\{ 第12个点击事

末蓝、/ 2023年09月26日 14:47/ 0 赞/ 170 阅读

相关 JavaScript——鼠标移入移出事件

onmouseenter / onmouseleave 和 onmouseover / onmouseout的关系 onmouseenter 类似 mouseover，它

àì夳堔傛蜴生んèń/ 2023年06月27日 04:25/ 0 赞/ 86 阅读

相关 JavaScript 事件类型（键盘事件，鼠标事件，焦点事件）

键盘事件鼠标事件焦点事件键盘事件 <table> <thead> <tr> <th>事件</th> <th>发生时机<

小鱼儿/ 2023年01月16日 03:29/ 0 赞/ 161 阅读

相关 js事件驱动

[转载地地址][Link 1] 面试的时候发现99%的童鞋不理解为什么JavaScript是单线程的却能让AJAX异步发送和回调请求，还有setTimeout也看起来像是多线

川长思鸟来/ 2022年08月03日 05:05/ 0 赞/ 223 阅读

相关 jQuery鼠标移进移除事件

<script type="text/[JavaScript][]"> $(document).ready(function() \{ $(选择器).mous

比眉伴天荒/ 2022年07月15日 00:44/ 0 赞/ 268 阅读

相关 javascript事件简述和入门案例，js事件驱动机制；js 点击事件；js 焦点事件表单提交事件，键位弹起事件鼠标移入移除事件，

20 js事件简述和入门案例：通过鼠标或者热键的动作，我们称为事件，例如点击，表单提交等等 21 js事件驱动机制：页面上的特效。我们可以在js事件驱动机制下进

墨蓝/ 2022年06月06日 03:13/ 0 赞/ 189 阅读

相关 JS——事件的追加与移除

一、事件的追加第一种方法： <script type="text/javascript" > //1、追加

阳光穿透心脏的1/2处/ 2022年06月02日 23:07/ 0 赞/ 289 阅读

相关 Vue 框架-02-事件：点击, 双击事件,鼠标移上事件

Vue 框架-02-事件：点击, 双击事件,鼠标移上事件 1.单击事件：v-on:click ![20181107153425544.gif][] 源码 app2

朴灿烈づ我的快乐病毒、/ 2022年04月18日 02:58/ 0 赞/ 367 阅读

相关 JS三大事件（鼠标事件、键盘事件、html事件）

鼠标事件 click：单击 dblclick：双击 mousedown：鼠标按下 mouseup：鼠标抬起 mouseover：鼠

今天药忘吃喽~/ 2021年06月26日 16:06/ 0 赞/ 700 阅读