学习路线: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标签中加入,onclick
属性,并在后面加上需要的方法。
下面是点击事件绑定的 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>
运行结果
对于标签中没有绑定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>Titletitle>
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
获得焦点事件。
当点击了输入框后,输入框就获得了焦点。然后输入框的背景颜色变成粉色。
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>
运行结果
如果大家觉得有用的话,可以关注我下面的微信公众号,极客李华,我会在里面更新更多行业资讯,企业面试内容,编程资源,如何写出可以让大厂面试官眼前一亮的简历等内容,让大家更好学习编程,我的抖音,B站也叫极客李华。大家喜欢也可以关注一下