HTML常见基础事件练习

最新推荐文章于 2024-07-16 16:43:05 发布

Arvicky

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量127

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/arvicky/article/details/119392701

版权

常见事件的练习

常见事件基本可分为

1.点击事件
2.焦点事件
3.加载事件
4.鼠标事件
5.键盘事件
6.选中和改变
7.表单事件

一.点击事件
常用的单击和双击事件
使用单击 onclick，双击ondclick
对于onclick后接函数的使用有一个特别的，就是当需要使用onclick后的函数返回值时，格式应当为"return func();" 常见的一项是表单使用中出现的。
二.焦点事件
function在调用句柄方法时会传入一个对象event，event中带有各种操作的属性，也就是实际是对这个对象进行操作。

/*加载事件 加载完整个页面的代码再进行执行 避免代码运行顺序带来的预料外的问题*/
window.onload =function(){}

在这个功能中写的所有函数会在所有代码读取完再进行执行
例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件练习</title>

<script>
/*加载事件 加载完整个页面的代码再进行执行 避免代码运行顺序带来的预料外的问题*/
window.onload =function(){
/*失去焦点事件*/
document.getElementById("username").onblur =function(){
alert("失去焦点1111");
}
}
</script>

此时效果是鼠标如果点框外，就会弹窗提示“失去焦点1111”
在这里插入图片描述

鼠标事件

onmouseover属性为当鼠标移动到某对象范围的上方时触发的事件
onMouseDown 鼠标上的按钮被按下了
function后可以给定一个参数，该参数中具有各个事件的属性可以通过这种方式获取到各个属性
例如鼠标按键的属性为button，通过该方式我们可以获取到鼠标不同按键所对应的值

<!--绑定鼠标事件-->
document.getElementById("username").onmouseover =function(){
alert("鼠标已选中");
}
<!--鼠标按键被按下 点击事件 作用在username上-->
/*通过参数来显示对应按键属性值*/
document.getElementById("username").οnmοusedοwn=function(event){
alert(event.button);
}

例如单击鼠标左键
在这里插入图片描述

键盘事件

返回的是按键字符对应的数字可以通过数字判断按下的是哪个按键
返回的值为数字，这样可以通过判断按键数字来判断按下的事哪个按键

/*键盘事件*/
/*通过参数来显示对应按键属性值*/
/*document.getElementById("username").οnkeydοwn=function(event){
alert(event.keyCode	);
}*/

表单+改变onchange

改变对应id的文本内容会触发事件
在表单中，如果修改了其中内容也会出发相应设置事件

<select id="city">
<option>请选择城市列表</option>
<option>北京</option>
<option>上海</option>
<option>武汉</option>
</select>
<input type="submit"  value="提交">
/*改变事件*/
/*通过参数来显示对应按键属性值*/
document.getElementById("city").οnchange=function(event){
alert("字符改变");
}

Arvicky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML常见基础事件练习

常见事件的练习常见事件基本可分为1.点击事件2.焦点事件3.加载事件4.鼠标事件5.键盘事件6.选中和改变7.表单事件一.点击事件常用的单击和双击事件使用单击 onclick，双击ondclick对于onclick后接函数的使用有一个特别的，就是当需要使用onclick后的函数返回值时，格式应当为"return func();" 常见的一项是表单使用中出现的。二.焦点事件function在调用句柄方法时会传入一个对象event，event中带有各种操作的属性，也就是实际是对这个
复制链接

扫一扫