收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js点击事件</title>
</head>
<body>
<div class="div1">
<!-- onblur为失去焦点事件-->
<span>用户名：</span><input type="text" id="name" placeholder="请输入用户名" onblur="n1()">
<span>密码：</span><input type="text" id="pwd" placeholder="请输入密码" onblur="p1()">
<!-- onclick 为绑定点击事件 注 基本上所有的html元素都有点击事件-->
<button onclick="dianji()">提交</button>
<!-- href里的javascript:;是为了阻止跳转请求-->
<a href="javascript:;" onclick="dianji()">登录</a>
</div><hr>
<!--onmouseenter为鼠标指向元素时触发 onmouseleave离开元素时触发-->
<div id="div2" class="div2" onmouseenter="add()" onmouseleave="aad()">
看我效果
</div>
<hr>
<div>
<!-- onchange为当我们选中元素的值发生改变时触发-->
<select id="s1" onchange="s11()">
<option value="1">北京</option>
<option value="2">重庆</option>
<option value="3">天津</option>
<option value="4">上海</option>
</select>
</div>
<script>
// onclick 为绑定点击事件 注 基本上所有的html元素都有点击事件方法
function dianji() {
// 获取元素id
var name = document.getElementById('name').value;
var pwd = document.getElementById('pwd').value;
// 判断用户输入是否为空
if (name ==''){
alert('请输入用户名');
return;
}
if (pwd ==''){
alert('请输入密码');
return;
}
alert('用户名和密码输入正确');
}
// onmouseenter为鼠标指向元素时触发 onmouseleave离开元素时触发
function add() {
// alert('来了');
// console.log('来了');
document.getElementById('div2').style.color='blue';
}
// onmouseenter为鼠标指向元素时触发 onmouseleave离开元素时触发
function aad() {
// console.log('走了');
document.getElementById('div2').style.color='#000000';
}
// onblur为失去焦点事件方法
function n1() {
var name = document.getElementById('name').value;
if (name ==''){
alert('请输入用户名');
}
}
// onblur为失去焦点事件方法
function p1() {
var pwd = document.getElementById('pwd').value;
if (pwd ==''){
alert('请输入密码');
}
}
// onchange为当我们选中元素的值发生改变时触发
function s11() {
var s1 = document.getElementById('s1').style.color='blue';
alert(s1);
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
