6.8 js中的事件管理
//js中的事件: 用户对前台页面做出的一些操作 来触发一些函数
//例如用户的单击 双击 鼠标移入 移出 键盘的输入 等等等等
//常见的事件如下:
//1.单击事件: onclick 用处最多.
//2.双击事件: ondblclick
//3.鼠标移入事件: onmouseover
//4.鼠标移出事件: onmouseout
//5.键盘输入事件:onkeyup
//6.失去焦点事件:onblur
//7.获取焦点事件:onfocus
//8.表单提交事件:onsubmit
//9.下拉菜单事件:onchange
//事件的语法如下:
//xxx表示获取的元素节点 abc表示什么事件
// xxx.onabc = function(){ }
6.9 单机事件
<button>开始点名</button>
<script>
//需求如下:点击按钮 来回展示开始点名或停止点名
//思路:获取到button标签,然后给它赋予一个点击事件.
//接着判断button标签内部的value值.根据值来进行判断.进而修改/
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
//获取button的文本值.
var text = btn.innerText ;
if(text=="开始点名"){
btn.innerText = "停止点名"
}else{
btn.innerText = "开始点名";
}
}
</script>
6.10 双击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 230px;
height: 230px;
text-align: center;
border : 1px solid black;
display: none;
}
</style>
</head>
<body>
<button>双击打开登录页面</button>
<div>
<h3>登录弹窗！！</h3>
账号<input type="text" placeholder="请输入你的账号" /> <br>
密码<input type="password" placeholder="请输入你的密码" /> <br><br><br>
<button>登录</button> <button>返回</button>
</div>
<script>
//思考:浏览器中的弹窗为啥那么好看
//但是我们学习的三个弹窗 一个比一个丑
//其实浏览器的弹窗 并不是真正的弹窗.
//思路: 就是一个提前绘制好的一个div页面.然后将其隐藏. 当用户触发的时候就蹦出来.实现一个弹窗的效果.
//需求:双击打开登录页面
document.getElementsByTagName("button")[0].ondblclick = function(){
document.getElementsByTagName("div")[0].style.display = "block";
}
document.getElementsByTagName("button")[2].onclick = function(){
document.getElementsByTagName("div")[0].style.display = "none";
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
