-
JavaScript之JS事件机制
一、JS事件机制
1、解释
当我们的行为动作满足了一定的条件后，会触发某类事务的执行。
2、作用
主要是结合js的函数来使用
3、内容
3.1 单双击事件
单机：onclick 当鼠标单击的时候会触发 双击：ondblclick 当鼠标双击的时候会触发- 1
- 2
3.2 鼠标事件
onmouseover 当鼠标悬停在某个HTML元素上的时候会触发 onmousemove 当鼠标在某个HTML元素上移动的时候会触发 onmouseout 当鼠标在某个HTML元素上移出的时候会触发- 1
- 2
- 3
3.3 键盘事件
onkeyup 当键盘在某个HTML元素上弹起的时候会触发 onkeydown 当键盘在某个HTML元素上下压的时候会触发- 1
- 2
3.4 焦点事件
onfocus 当某个HTML元素获取焦点的时候会触发 onblur 当某个HTML元素失去焦点的时候会触发- 1
- 2
3.5 页面加载事件
onload 当页面加载成功后触发- 1
4、注意
（1） js中添加事件的第一种方式：
在HTML上直接使用事件属性进行添加，属性值为所监听执行的函数
（2） js中的事件只有在当前HTML元素上有效
（3） 一个HTML元素可以添加多个不同的事件
（4） 一个事件可以监听触发多个函数的执行，但是不同的函数要使用分号隔开5、实例
DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device - width, initial - scale = 1.0"> <meta http-equiv = "X-UA-Compatible" content = "ie-edge"> <title>JavaScript之事件机制学习1title> <script> //声明js函数 //单击事件 function testOnclick(){ alert("单击事件"); } //双击事件 function testOndblclick(){ alert("双击事件"); } //鼠标事件 function testOnmouseover(){ alert("鼠标悬停事件"); } function testOnmousemove(){ alert("移动了"); } function testOnmouseout(){ alert("从区域移出了"); } //键盘事件 function testOnkeyup(){ alert("键盘弹起事件"); } function testOnkeydown(){ alert("键盘下压事件"); } //焦点事件 function testOnfocus(){ document.getElementById("showdiv").innerHTML="哈哈"; //alert("获取焦点事件"); } function testOnblur(){ alert("失去焦点事件"); } //页面加载 function testOnload(){ alert("页面加载事件"); } //测试 function test(){ alert("测试一个事件的多个函数执行"); } script> <style type="text/css"> #showdiv { width: 300px; height: 300px; border:solid 1px; } style> head> <body onload = "testOnload()"> <hr> <input type="button" name="" id="" value="测试单击" onclick="testOnclick();test();"/> <input type="button" name="" id="" value="测试双击" ondblclick="testOndblclick();"/> <hr/> <br/> <hr> <div id="showdiv" onmouseover = "testOnmouseover();" onmousemove="testOnmousemove();" onmouseout="testOnmouseout();"> div> <hr/> <br/> 键盘事件学习：<br/> 键盘弹起事件：<input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/><br/> 键盘下压事件：<input type="text" name="" id="" value="" onkeydown="testOnkeydown();"/><br/> 焦点事件学习：<br/> 获取焦点：<input type="text" name="" id="" value="" onfocus="testOnfocus();"/><br/> 失去焦点：<input type="text" name="" id="" value="" onblur="testOnblur();"/><br/> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
二、衍生思考
1、给合适的HTML标签添加合适的事件
onchange-----select下拉框 onload-------body标签 单双击-------用户会进行点击动作的HTML元素 鼠标事件-----用户会进行鼠标移动操作的 键盘事件-----用户会进行键盘操作的HTML元素- 1
- 2
- 3
- 4
- 5
2、给HTML元素添加多个事件时，注意事件之间的冲突
当事件的触发条件包含相同部分的时候，会产生事件之间的冲突。
3、事件的阻断
当事件所监听的函数将返回值返回给事件时：
false:则会阻断当前事件所在的HTML标签的功能
true:则继续执行当前事件所在的HTML标签的功能4、超链接调用js函数
<a href="javascript:函数名()">调用js函数</a>- 1
5、实例
DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device - width, initial - scale = 1.0"> <meta http-equiv = "X-UA-Compatible" content = "ie-edge"> <title>JavaScript之事件机制学习2title> <script> //值改变事件 function testOnchange(){ alert("值改变了"); } //单机事件 function testOnclick(){ alert("单击事件"); } //双击事件 function testOndblclick(){ alert("双击事件"); } //事件的阻断 function testA(){ alert("事件的阻断"); return false; } //超链接调用js函数 function testHref(){ alert("超链接调用"); } script> head> <body> <h3>js的事件机制二h3> <hr/> 值改变事件：<input type="text" name="" id="" value="" onchange="testOnchange();"/> <select name="" id="" onchange="testOnchange();"> <option value="">北京option> <option value="">上海option> <option value="">广州option> select> <hr/> 事件的冲突：<br/> <input type="button" name="" id="" value="事件的冲突" onclick="testOnclick()" ondblclick="testOndblclick()"/> <hr/> 事件的阻断:<br/> <a href="http://www.baidu.com" target="_blank" onclick="return testA()">百度一下a> <hr/> 超链接调用js函数： <a href="javascript:testHref()">调用js函数a> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
-
相关阅读:
迈动互联获“ISO20000信息技术服务管理体系认证证书”
工厂智能工具介绍——5W1H
多聚体/壳聚糖修饰白蛋白纳米球/mPEG-HSA聚乙二醇人血清白蛋白纳米球的制备与研究
13.1 使用DirectX9绘图引擎
【JavaScript—数据类型】
(十一)人工智能应用--深度学习原理与实战--实现泰坦尼克号生存者预测案例Titanic Survival
云计算 - 云安全探索
Spring-IoC（XML配置文件形式）
Kafka3.0.0版本——消费者（消费者组原理）
真无线耳机哪个好?真无线耳机性价比排行榜
- 原文地址：https://blog.csdn.net/qq_46106857/article/details/126251995
