HTML DOM 入门 3：事件与输入

最新推荐文章于 2023-10-19 22:32:47 发布

ekxavol

最新推荐文章于 2023-10-19 22:32:47 发布

阅读量180

点赞数

分类专栏：前端入门

本文链接：https://blog.csdn.net/ekxavol/article/details/104870696

版权

前端入门专栏收录该内容

9 篇文章 0 订阅

订阅专栏

可以利用事件来实现对HTML的监控（在功能上，也就是实现各式的输入功能）

1.鼠标事件：点击、双击、按下、弹起、经过、进入、退出组件

onmousedown：按下
onmouseup：弹起
onmousemove：经过（每次终点在组件上的鼠标移动，都会触发一次事件）
onmouseover：从组件外进入组件
onmouseout：从组件中退出
onclick:在组件上点击
ondblclick:在组件上双击

//一个按钮，按下将触发f1(),弹起将触发f2()
<input type="button" onmousedown="f1()" onmouseup="f2()" >
//也可以用this来将组件对象作为参数传递到函数中
<input type="button" onclick="f3(this)">

2.键盘事件

onkeydown:键盘按下
onkeyup:键盘弹起
onkeypress：按下并弹起
键盘事件可以监控输入了哪个键

//一个button 如果在上面按下键盘按键并弹起，将会触发f(event),其中event就是传递的参数，用于识别按了哪一个键
<input type="button" onkeypress="f(event)" >

function f(e){//带参数的函数
e.keyCode;//返回按下按键的键盘keyCode(如d的keyCode为100)
e.shiftKey;//不过不能监视shift 要用shiftKey来监视shift摁键。如果摁下shift则返回1
}

3.输入框焦点事件

//属性onfoucs和onblur 代表获取焦点和失去焦点。
<input type="text" onfocus="f1()" onblur="f2()" id="input1" >

4.变化事件

//输入框在丢失焦点的时候，如果它的值（在这个例子里也就是输入的文本）发生了改变，那么会触发onchange
<input type="text" onchange="f1()"  id="input1" >

//在函数内可以配合value来实现监控值的变化的结果
f1(){
//do Something with a.value } //假设已经得到了输入框所对应的对象a
}

5.表单提交事件

<form action="/aaa.jsp" onsubmit="f1()">

 //输入框的类型为submit，代表这是一个提交框，显示的文本为"提交按钮"
 <input type="submit" value="提交按钮">

 //点击“提交”，会触发action的jsp文件，同时，也会触发login()

</form>

6.加载

//加载图片/文档成功后会触发f()
<img onload="f()" src="www.xxx.com/.png">
<body onload="f()"></body>

7.阻止事件发生

通过函数中的return false()来阻止事件发生