js Dom为页面中的元素绑定键盘或鼠标事件
html鼠标事件
onload 页面加载
onclick 鼠标单击
onmouseover 鼠标移入
onmouseout 鼠标移出
onfocus 获取焦点
onblur 失去焦点
onchange 域的内容改变
在事件触发中，this表示对当前dom对象的引用
1、html事件，在html元素上直接绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.btn{
width:140px;
height:30px;
background:#abcdef;
line-height:30px;
text-align: center;
font-size:14px;
border-radius:5px;
cursor:pointer;
}
div{
width:140px;
height:140px;
background:#abcdef;
line-height:140px;
text-align: center;
font-size:14px;
margin:50px 0;
}
</style>
</head>
<body>
<button id="btn" class="btn" onclick="alert('我被点击啦！');">我是按钮</button>
<div onmouseover="myFun(this,'orange')" onmouseout="myFun(this,'pink')">我是div</div>
<script>
function myFun(obj,bgcolor){
obj.style.backgroundColor=bgcolor;
} </script>
</body>
</html>
DOM 0级
通过dom获取元素，并绑定事件
如果事件绑定跟的是函数名，千万不要加括号，否则不需要点击，页面一刷新即会触发函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.btn{
width:140px;
height:140px;
background:#abcdef;
line-height:140px;
text-align: center;
font-size:14px;
margin:50px 0;
}
.btn-active{
width:140px;
height:140px;
line-height:140px;
text-align: center;
font-size:14px;
margin:50px 0;
background:pink;
}
</style>
</head>
<body>
<div id="btn" class="btn">解锁</div>
<script>
var btn=document.getElementById("btn");
btn.onclick=myFun;//此处函数后面一定不能加括号，否则不需要点击会直接调用
function myFun(){
if(this.className=="btn"){
this.className="btn-active";
this.innerHTML="锁定";
}else{
this.className="btn";
this.innerHTML="解锁";
}
} </script>
</body>
</html>
当把获取dom元素的脚本，放置在元素的前面，会报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.btn{
width:140px;
height:140px;
background:#abcdef;
line-height:140px;
text-align: center;
font-size:14px;
margin:50px 0;
}
.btn-active{
width:140px;
height:140px;
line-height:140px;
text-align: center;
font-size:14px;
margin:50px 0;
background:pink;
}
</style>
<script>
var btn=document.getElementById("btn");
btn.onclick=myFun;//此处函数后面一定不能加括号，否则不需要点击会直接调用
function myFun(){
if(this.className=="btn"){
this.className="btn-active";
this.innerHTML="锁定";
}else{
this.className="btn";
this.innerHTML="解锁";
}
} </script>
</head>
<body>
<div id="btn" class="btn">解锁</div> </body>
</html>
把脚本写在window.onload事件中，确保元素已经生成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.btn{
width:140px;
height:140px;
background:#abcdef;
line-height:140px;
text-align: center;
font-size:14px;
margin:50px 0;
}
.btn-active{
width:140px;
height:140px;
line-height:140px;
text-align: center;
font-size:14px;
margin:50px 0;
background:pink;
}
</style>
<script>
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=myFun;//此处函数后面一定不能加括号，否则不需要点击会直接调用
function myFun(){
if(this.className=="btn"){
this.className="btn-active";
this.innerHTML="锁定";
}else{
this.className="btn";
this.innerHTML="解锁";
}
}
}
</script>
</head>
<body>
<div id="btn" class="btn">解锁</div> </body>
</html>
onfocus事件和onblur事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#tip{display: none;}
</style>
<script>
window.onload=function(){
var password=document.getElementById("password");
var tip=document.getElementById("tip");
password.onfocus=function(){
tip.style.display="inline-block";
}
password.onblur=function(){
var val=this.value;
// 密码是6位数字
if(val.length==6 && !isNaN(val)){
tip.innerHTML="ok";
}else{
tip.innerHTML="error";
}
}
}
</script>
</head>
<body>
<input type="password" id="password" name="password">
<span id="tip">请输入密码</span>
</body>
</html>
获取body元素 document.body
当select中的option被选择时，select的value值就会等于被选中的option的value值
因此可以用this.value得到被选择的option的value值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
</style>
<script>
window.onload=function(){
var menu=document.getElementById("menu");
menu.onchange=function(){
var color=this.value;
if(color==""){
document.body.style.backgroundColor="#fff";
}else{
document.body.style.backgroundColor=color;
}
}
}
</script>
</head>
<body>
<p>请选择你喜欢的颜色呀</p>
<select name="menu" id="menu">
<option value="">请选择</option>
<option value="orange">元气橙</option>
<option value="pink">仙女粉</option>
<option value="#abcdef">森系蓝</option>
</select>
</body>
</html>
鼠标事件
onmousedown 鼠标按下
onmousemove 鼠标在元素内移动
onmouseup 鼠标松开
onresize 浏览器窗口大小调整
onscroll 拖动滚动条
onsubmit 表单提交 加在form表单上，而不是加在提交按钮上
onmousedown+onmouseup=onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
div{
width:200px;
height:200px;
background:#abcdef;
overflow: auto;
}
#myform{
margin-top:50px;
}
</style>
<script>
window.onload=function(){
var div=document.getElementById("div");
div.onmousedown=function(){
this.innerHTML="onmousedown";
}
div.onmousemove=function(){
this.innerHTML="onmousemove";
}
div.onmouseup=function(){
this.innerHTML="onmouseup";
}
window.onresize=function(){
console.log("resized");
}
div.onscroll=function(){
this.style.color="orange";
} var myform=document.getElementById("myform");
myform.onsubmit=function(){
alert("表单提交啦~");
}
}
</script>
</head>
<body>
<div id="div">
文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>
</div>
<form id="myform">
<input type="submit">
</form>
</body>
</html>
键盘事件
onkeydown 键盘被按下
onkeypress 键盘被按下（只有字母+数字+符号）
onkeyup 键盘被释放
keyCode 键码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
</style>
<script>
window.onload=function(){
var count=document.getElementById("count");
var text=document.getElementById("text"); text.onkeyup=function(e){
console.log(e.keyCode);
var len=text.value.length;
count.innerHTML=30-len;
}
}
</script>
</head>
<body>
<p>还可以输入<span id="count">30</span>/30</p>
<textarea name="text" id="text" cols="60" rows="3"></textarea>
</body>
</html>
js Dom为页面中的元素绑定键盘或鼠标事件的更多相关文章
- 使用HTML5的JS选择器操作页面中的元素
文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...
- 从零开始学 Web 之 DOM（六）为元素绑定与解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- Selenium2+python自动化12-操作元素（键盘和鼠标事件）
前言 在前面的几篇中重点介绍了一些元素的到位方法,到位到元素后,接下来就是需要操作元素了.本篇总结了web页面常用的一些操作元素方法,可以统称为行为事件 有些web界面的选项菜单需要鼠标悬停在某个元素 ...
- 自动化测试-8.selenium操作元素之键盘和鼠标事件
前言 在前面的几篇中重点介绍了一些元素的定位方法,定位到元素后,接下来就是需要操作元素了.本篇总结了web页面常用的一些操作元素方法,可以统称为行为事件 有些web界面的选项菜单需要鼠标悬停在某个元素 ...
- Selenium2学习（八）-- 操作元素（键盘和鼠标事件）
前言 在前面的几篇中重点介绍了一些元素的到位方法,到位到元素后,接下来就是需要操作元素了.本篇总结了web页面常用的一些操作元素方法,可以统称为行为事件 有些web界面的选项菜单需要鼠标悬停在某个元素 ...
- Selenium2+python自动化12-操作元素（键盘和鼠标事件）【转载】
前言 在前面的几篇中重点介绍了一些元素的到位方法,到位到元素后,接下来就是需要操作元素了.本篇总结了web页面常用的一些操作元素方法,可以统称为行为事件 有些web界面的选项菜单需要鼠标悬停在某个元素 ...
- JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）
1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
- Js脚本选取iframe中的元素
遇到个小问题,需要用到原生Js处理页面中的元素,以往一个document.getElementById就完活的选取元素,这次却不好使了.. 仔细看代码发现要选取元素外面多了一个iframe标签 < ...
- 控制使用jquery load()方法载入新页面中的元素
最近在项目中用到jquery的load()方法来加载页面,首先简单说一下load()方法. load(url,data,callback);该方法接收三个参数,第一个是载入的页面地址,第二个是要传到服 ...
随机推荐
- Spring 核心功能演示
Spring 核心功能演示 Spring Framework 简称 Spring,是 Java 开发中最常用的框架,地位仅次于 Java API,就连近几年比较流行的微服务框架 SpringBoot, ...
- sass css样式：@for循环、样式变量与#{} 变量插值
/* sass 可以用写JS的思想来写CSS代码 * #{} 用来插值,大括号中填写需要插入的变量 * @for 变量 from ...
- Codeforces_821
A.直接判断每一个数. #include<bits/stdc++.h> using namespace std; ][]; int main() { ios::sync_with_stdi ...
- 一个"/"引发的惨案
今天行云流水写了一个接口,正想着写完就睡觉了,结果访问的时候一直报错404,找不到路径,我反复检查了好久,确定路径名字没写错,百思不得其解,瞬间有想砸电脑的冲动,于是准备洗洗睡了,明天再搞 洗玩脚回到 ...
- 【C++】随机数引擎
rand() 基本:使用随机数时,经常见到的是C标准库提供的函数rand(),这个函数会生成一个0到RAND_MAX之间的一个整形数: 分布:为了得到一个给定范围内的随机数,通常会对生成的随机数取余: ...
- 手机控制电脑第二弹之HIPC
点击蓝字关注我们 是否很多时候电脑不在身边,又急需要使用,比如正好要用一个文件,又没有放在我们的网盘中,想用手机查看电脑状态,但是很多太复杂的方式不会使用,需要简单的方式,今天方成分享给你 前言 故事 ...
- NR / 5G - The Round Robin algorithm
- 踩坑ThinkPHP5之模型对象返回的数据集如何转为数组
各位小伙伴们大家好,冷月今天在做项目的过程中呢,遇到了一个坑就是用tp5的模型操作数据库时,返回的是数据集而不是直接的数组.于是冷月就想办法如何将数据集转为数组.写下这篇博文,防止大家遇到这个坑时可以 ...
- 面试题｜手写JSON解析器
这周的 Cassidoo 的每周简讯有这么一个面试题:: 写一个函数,这个函数接收一个正确的 JSON 字符串并将其转化为一个对象(或字典,映射等,这取决于你选择的语言).示例输入: fakePars ...
- phpmyadmin配置文件详解
PHPMyadmin配置文件config.inc.php或config.default.php内容及作用解析大致如下: /** * phpMyAdmin Configuration File * * ...