事件绑定(onclick,onfocus,onblur)
事件绑定(onclick,onfocus,onblur)
学习路线:JavaScript基础语法(输出语句)->JavaScript基础语法(变量)->JavaScript基础语法(数据类型)->JavaScript基础语法(运算符)->JavaScript基础语法(流程控制语句)->JavaScript基础语法(类型转换)->JavaScript基础语法(函数)->Array_JavaScript->String_JavaScript->自定义对象_JavaScript->JavaScript_BOM->Window对象->confirm()、setInterval()、setTimeout()->History、Location->闪烁的灯泡->JavaScript_DOM->事件绑定(onclick,onfocus,onblur)->
事件绑定(onmouseout,onmouseover)
->事件绑定(onsubmit)表单提交
->提交表单与验证表单案例
常用绑定方式
- 方式一:通过 HTML标签中的事件属性进行绑定
在HTML标签中加入,onclick
属性,并在后面加上需要的方法。
<input type="button" οnclick='on()’>
下面是点击事件绑定的 on()
函数
function on(){console.log("我被点了");
}
完整代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input type="button" onclick="on()"><br><script>function on(){console.log("我被点了")}</script>
</body>
</html>
运行结果
- 方式二:通过 DOM 元素属性绑定
对于标签中没有绑定onclick
的情况
<input type="button" id="btn">
通过getElementById获取id="btn
然后,再在获取结果的后面,添加onclick属性,通过onclick
绑定函数。
document.getElementById("btn").onclick = function (){console.log("我被点了");
}
代码演示:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>><input type="button" value="再点我" id="btn"><script>// 获取 id="btn" 元素对象,通过调用 onclick 属性 绑定点击事件document.getElementById("btn").onclick = function (){console.log("我被点了");}</script>
</body>
</html>
运行结果
常见事件
除了onclick
,还有其他常用的事件。
事件属性名 | 说明 |
---|---|
onclick | 鼠标单击事件 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onload | 某个页面或图像被完成加载 |
onsubmit | 当表单提交时触发该事件 |
onmouseover | 鼠标被移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
小案例讲解
onfocus and onblur
onfocus
获得焦点事件。当点击了输入框后,输入框就获得了焦点。然后输入框的背景颜色变成粉色。
onblur
失去焦点事件。当失去输入框的焦点的时候,输入框的背景颜色消失,然后里面文字变成大写。
演示代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style></style>
<body>姓名:<input type="text" id = "name"></br>当输入字段获得焦点时,会触发一个更改背景颜色的函数<script>// 通过onfocus使得获取焦点的时候输入框的背景演示发生改变var x = document.getElementById("name");x.addEventListener("focus", Focus, true)x.addEventListener("blur", Blur, true)function Focus(){x.style.backgroundColor = "pink"}function Blur(){console.log(x.value)x.style.backgroundColor = ""x.value = x.value.toUpperCase()}</script>
</body>
</html>
运行结果
事件绑定(onclick,onfocus,onblur)相关推荐
- onclick,onfocus,onblur,onload事件
onFocus事件就是当光标落在文本框中时发生的事件. onBlur事件是光标失去焦点时发生的事件.是说明曾经获得过焦点: onload事件,onunload事件--加载页面/图像完成发生的事件,用户 ...
- 事件绑定(onsubmit)表单提交
事件绑定(onsubmit)表单提交 学习路线:JavaScript基础语法(输出语句)->JavaScript基础语法(变量)->JavaScript基础语法(数据类型)->Jav ...
- 事件绑定(onmouseout,onmouseover)
事件绑定(onmouseout,onmouseover) 学习路线:JavaScript基础语法(输出语句)->JavaScript基础语法(变量)->JavaScript基础语法(数据类 ...
- javascript重要事件总结(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout)
javascript重要事件总结(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout) onfocus/onblur:聚焦离焦事 ...
- JavaScript OnClick事件以及事件绑定方法
事件之鼠标点击OnClick事件 事件 说明 onclick 鼠标点击事件 onmouseover 鼠标经过事件 onmouseout 鼠标移开事件 onchange 文本框内容改变事件 onsele ...
- Java Script(三)——onload事件、onclick事件、onsubmit事件、onchange事件、onblur事件
js中的事件 事件是电脑输入设备与页面进行交互的响应. 常用的事件: onload 加载完成事件: 页面加载完成之后,常用于做页面 js 代码初始化操作 onclick 单击事件: 常用于按钮的点击响 ...
- js click 与 onclick 事件绑定,触发与解绑
click 与 onclick 1.onclick 事件会在对象被点击时发生. <input id="btn1" type="button" οnclic ...
- 动态添加html元素绑定事件,关于javascript:jQuery如何将onclick事件绑定到动态添加的HTML元素...
本问题已经有最佳答案,请猛点这里访问. 我想将onclick事件绑定到用jquery动态插入的元素 但它从不运行绑定函数.如果您能指出这个示例为什么不起作用,以及如何使它正常运行,我将非常高兴: /p ...
- js代码中for循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting ‘className‘)
jsfor循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting 'className') 我想要 ...
最新文章
- 域服务器重装系统,win10系统配置域控制器的详细步骤
- 常用的分布式事务解决方案介绍
- 3_3 ObserverMode 观察者模式
- c语言程序源代码_程序的编译、链接和执行
- Launch Instruments
- redis启动没反应_Promethues如何针对Redis进行监控
- 图形图像会议期刊文章查询
- 读书笔记-OpenCL编程指南 HelloWorld
- 【男人必看十大经典】[经典合集][DVD-Rmvb/7.70GB] 【原音中文字幕】已测
- 【渝粤题库】陕西师范大学201951 明清小说史 作业
- IT男改变生活之12306选择上,中,下铺
- 百度地图点击出现圆圈
- Hive 动态分区恢复静态分区表数据
- 监听fullpage.js滚动的屏数
- 月租最便宜的手机卡_月租最高不超过10元!最适合当副卡的手机卡套餐全在这了...
- 最新天龙八部环境-GS环境教程-【长期稳定版本】+ 视频教程
- Window git 命令设置alias快捷
- 英雄传说空之轨迹人物介绍
- 视频播放开发笔记-获取MPV的视频内存方式截图
- 轻松熊喵喵 -- 名词解释(自用)