单击事件
<body>
<h1 id="hid">单击事件</h1>
<button onclick="fun()">开始</button>
<ul id="uid">
<li>AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
<ol>
<li>1111111</li>
<li>2222222</li>
</ol>
</body>
<script>
function fun(){
console.log('hello js');
//获取id属性值为hid的元素标签
var hid = document.getElementById("hid");
//输出元素标签之间的文本内容
console.log(hid.innerHTML);
//修改标签之间的内容
hid.innerHTML = "新的内容";
//改变 HTML 元素的样式
hid.style.color = "red";
hid.style.backgroundColor = "#ddd";
}
//获取当前网页中的所有li元素标签
//var mlist = document.getElementsByTagName("li");
var mlist = document.getElementById("uid").getElementsByTagName("li");
//遍历输出
for(var i in mlist){
if(!isNaN(i)){
console.log(mlist[i].innerHTML);
mlist[i].style.color="red";
}
}
</script>
Timing定时事件
一次性定时使用setTimeout
循环式调用SetInterval
<body>
<h1>定时器</h1>
<h2 id="hid">计数器:0</h2>
<button onclick="doStop()">停止</button>
</body>
<script>
var m=0,mytime=null;
function doRun(){
m++;
document.getElementById("hid").innerHTML = "计数器:"+m;
mytime = setTimeout(doRun,1000);
}
doRun();
function doStop(){
clearTimeout(mytime);
}
/*
//定义时3秒后执行参数中的函数
setTimeout(function(){
console.log("Hello JS!");
},3000);
//定时每隔1秒执行参数回调函数一次
var m = 0;
setInterval(function(){
m++;
console.log("Hello "+m);
},1000)
*/
</script>
<body>
<h1>定时器</h1>
<h2 id="hid">计数器:0</h2>
<button onclick="doStop()">停止</button>
</body>
<script>
m = 0;
var mytime = setInterval(function(){
m++;
document.getElementById("hid").innerHTML = "计数器:"+m;
},1000)
function doStop(){
clearInterval(mytime);
}
</script>
处理事件绑定方式
按钮1 事件源
onclick 事件
fun()事件处理程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript事件处理</title>
</head>
<body>
<h1>JavaScript事件处理</h1>
<button onclick="fun()">按钮1</button>
<button id="bid">按钮2 </button>
</body>
<script>
function fun(){
console.log("按钮1被点击");
}
//分离更彻底,可读性更差
document.getElementById("bid").onclick=function(){
console.log("按钮2被点击");
}
</script>
</html>
获取事件源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取事件源</title>
</head>
<body>
<h1>获取事件源</h1>
<h2 onclick = "fun()">标题一</h2>
<h3 id = "hid">标题二</h3>
</body>
<script>
function fun(){
console.log("aaaa");
console.log(this);
}
document.getElementById("hid").onclick=function(){
console.log("bbbbbb");
console.log(this);
this.style.color="red";
}
</script>
</html>
前者无法调用事件源,由于方法没有绑定事件源。
后者可以调用事件源,由于方法已经绑定事件源。
解决前者可调用事件源方法, 为方法添加一个this的参数。
<h2 onclick = "fun(this)">标题一</h2>
function fun(event){
console.log("aaaa");
event.style.color="green";
}
双击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul,li{margin:0px;padding:0px;}
ul{list-style:none;}
ul li{height:30px;margin-top:4px;background-color:#ddd;}
ul li:hover{background-color:#fc0;}
</style>
</head>
<body>
<h1>dblclick双击事件</h1>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
//获取li列表
var mList = document.getElementsByTagName("li");
//遍历绑定事件
for(var i=0;i<mList.length;i++){
mList[i].ondblclick =function (){
//事件执行程序
this.style.backgroundColor="purple";
}
}
</script>
</html>
鼠标右击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
<style>
ul,li{margin:0px;padding:0px;}
ul{list-style:none;width:100px;text-align:center;position:absolute;display:none;}
ul li{height:30px;line-height:30px;margin-top:4px;background-color:#ddd;}
ul li:hover{background-color:#fc0;}
</style>
</head>
<body>
<h1>-contextmenu鼠标右击事件</h1>
<ul id="uid">
<li>剪切</li>
<li>复制</li>
<li>粘贴</li>
</ul>
</body>
<script>
document.oncontextmenu = function (e){
//获取事件对象
var event = e;
//获取鼠标当前坐标
var x = event.clientX;
var y = event.clientY;
console.log(x,y);
//显示新的右键菜单
var uid = document.getElementById("uid");
uid.style.top=y+"px";
uid.style.left=x+"px";
uid.style.display="block";
return false;
}
</script>
</html>
鼠标移入移出(图片轮播效果)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片轮播</title>
<style>
div,img,ul,li{margin:0px;padding:0px;}
#did{width:384px;height:240px;}
#did img{display:none;}
#did img:first-child{display:block}
</style>
</head>
<body>
<h1>图片轮播</h1>
<div id="did" onmouseover="doStop()" onmouseout="doStart()">
<img src="https://cms-origin-cn.battle.net/cms/template_resource/CJ11MK8XG4BY1482907672106.jpg" width="800"/>
<img src="https://cms-origin-cn.battle.net/cms/template_resource/8VWL0ALIMOCT1482908961287.jpg" width="800"/>
<img src="https://cms-origin-cn.battle.net/cms/template_resource/X2KR7G1S1SOW1482894885693.jpg" width="800"/>
</div>
</body>
<script>
var x = 0;
var mytime = null;
var mList = document.getElementById("did").getElementsByTagName("img");
function show(x){
for(var i=0;i<mList.length;i++){
if(x==i){
mList[i].style.display="block";
}else{
mList[i].style.display="none";
}
}
}
function doStart(){
mytime = setInterval(function(){
show(x);
x++;
if(x>=mList.length){
x=0;
}
},2000)
}
function doStop(){
if(mytime!=null){
clearInterval(mytime);
mytime=null;
}
}
doStart();
</script>
</html>
鼠标移入事件(图片切换)
实现原理:本质上是替换图片引用源。
<body>
<h1>图片切换 鼠标移入事件</h1>
<div id="did">
<img id="mid" src="./images/11.jpg" width="384"/>
</div>
<div id="list">
<img src="./images/11.jpg"/>
<img src="./images/22.jpg"/>
<img src="./images/33.jpg"/>
<img src="./images/44.jpg"/>
</div>
</body>
<script>
//获取所有小图列表
var mlist = document.getElementById("list").getElementsByTagName("img");
//遍历这些图片
for(var i=0; i<mlist.length; i++){
mlist[i].onmouseover = function(){
document.getElementById("mid").src = this.src;
}
}
</script>
图片放大镜效果
实现原理:通过鼠标移入缩略图显示原图来实现放大镜效果。
- 准备原图和缩略图。
- 添加鼠标移入(原图显示)和鼠标移出(原图消失)事件
- 根据缩略图所在位置设置原图出现位置。
- 获取鼠标在缩略图上的横纵坐标值(页面坐标值减去缩略图初始值)。
- 根据横纵坐标值的对应比例,在原图上进行等比滚动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片放大镜效果</title>
<style>
div,img,ul,li{margin:0px;padding:0px;}
#did{width:300px;height:300px;overflow:hidden;display:none;position:absolute;}
</style>
</head>
<body>
<h1>图片放大镜效果</h1>
<br/><br/><br/>
<img id="mid" src="./images/33.jpg" width="384" height="240"/>
<div id="did">
<img src="./images/33.jpg"/>
</div>
</body>
<script>
//获取被放大图片和放大镜图片对象
var mid = document.getElementById("mid");
var did = document.getElementById("did");
//为图片添加鼠标移入和移除事件
mid.onmouseover = function(){
//对放大镜进行定位
did.style.top = this.offsetTop+"px";
did.style.left = this.offsetLeft+this.offsetWidth+10+"px";
did.style.display = "block";
}
mid.onmouseout = function(){
did.style.display = "none";
}
//添加鼠标移动事件
mid.onmousemove = function(ent){
//获取兼容的鼠标事件对象
var event = ent || window.event;
//获取鼠标在图片上的位置
var x = event.clientX - this.offsetLeft;
var y = event.clientY -this.offsetTop;
//定位放大镜位置
did.scrollTop = y*5-150;
did.scrollLeft = x*5-150;
}
</script>
</html>
鼠标点击和松开事件(图片拖动效果)
实现原理:
- 添加鼠标点击事件,修改图片颜色给予用户反馈,获取鼠标在图片上的位置。
- 添加鼠标移动事件,绑定为全局(避免速度移动过快拖动丢失),获取鼠标相对图片的位置并对图片图片位置进行变更。
- 添加鼠标松开事件,回滚图片颜色基于用户反馈,停止鼠标移动事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片拖动效果</title>
<style>
div{margin:0px;padding:0px;}
#did{width:200px;height:200px;background-color:#ddd;cursor:move;position:absolute;}
</style>
</head>
<body>
<h1>图片拖动效果</h1>
<div id="did"></div>
</body>
<script>
//获取div层对象
var did = document.getElementById("did");
//绑定鼠标按下事件
did.onmousedown = function(ent){
//获取兼容的事件对象
var event = ent || window.event;
//获取鼠标在div层上的位置
var x = event.clientX-this.offsetLeft;
var y = event.clientY-this.offsetTop;
this.style.backgroundColor = "blue";
//绑定鼠标移动事件
document.onmousemove = function(e){
var myevent = e || window.event;
//定位
did.style.top = myevent.clientY-y+"px";
did.style.left = myevent.clientX-x+"px";
}
}
//绑定鼠标松开事件
did.onmouseup = function(){
this.style.backgroundColor = "#ddd";
//取消移动事件
document.onmousemove = null;
}
</script>
</html>
获取键盘值
通过inkeydown来创建事件,通过keyCode来获取按键值。
可以用来实现页面内元素的键盘控制以及屏蔽按键。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取键盘值</title>
</head>
<body>
<h1>获取键盘值</h1>
</body>
<script>
window.document.onkeydown = function(ent){
//获取兼容的事件对象
var event = ent || window.event;
//输出键盘值
console.log(event.keyCode);
}
</script>
</html>
onload事件
当页面加载完成后再执行onload事件。
Form表单事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form表单事件</title>
</head>
<body>
<h1 id="hid">Form表单事件</h1>
<form action="js10.html" name="myform" method="post" onsubmit="return doSubmit()">
账号:<input type="text" name="uname" onblur="checkUname()"/><br/><br/>
密码:<input type="password" name="upass" onblur="checkUpass()" /><br/><br/>
邮箱:<input type="text" name="email"/><br/><br/>
<input type="submit" value="提交"/>
</form>
</body>
<script>
//表单提交事件处理程序
function doSubmit(){
return checkUname() && checkUpass();
}
//验证账号
function checkUname(){
var name = document.myform.uname.value;
if(name.length<=0){
alert("账号不可以为空");
return false;
}
return true;
}
//验证密码
function checkUpass(){
var pass = document.myform.upass.value;
if(pass.length<6){
alert("密码必须大于等于6位");
return false;
}
return true;
}
</script>
</html>
Change事件
实现原理:
- 绑定change对象。
- 判断对象的值,对其他元素进行修改。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change事件</title>
</head>
<body>
<h1 id="hid">change事件</h1>
<select name="sid" id="sid">
<option value="">-请选择-</option>
<option value="1">北京</option>
<option value="2">河北</option>
<option value="3">天津</option>
<option value="4">河南</option>
<option value="5">山西</option>
</select>
<select id="cid"></select>
</body>
<script>
var data = new Array();
data[1] = ["海淀区","朝阳区","丰台区","昌平区"];
data[2] = ["石家庄","保定","邯郸","邢台"];
data[3] = ["河东区","河西区","河北区","南开区"];
data[4] = ["郑州","洛阳","开封","驻马店"];
data[5] = ["太原","大同","吕梁","运城"];
//获取两个下拉框元素对象
var sid = document.getElementById("sid");
var cid = document.getElementById("cid");
//绑定change事件
sid.onchange = function(){
//获取下拉框中的值
var v = this.value;
cid.length = 0; //删除cid的下拉项
//判断并循环对应城市信息
if(v != ""){
for(var i=0; i<data[v].length; i++){
//创建一个下拉项并添加到cid下拉框中
cid.add(new Option(data[v][i],i));
}
}
}
</script>
</html>
滚动条事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动条事件</title>
</head>
<body>
<h1 id="hid">滚动条事件</h1>
<div id="aid" style="height:500px;width:700px;background-color:#ddd;"></div>
<div id="bid" style="height:500px;width:700px;background-color:#eee;"></div>
</body>
<script>
window.onscroll = function(){
var scrollTop = 0;
if(document.documentElement && document.documentElement.scrollTop){
scrollTop = document.documentElement.scrollTop;
}else if(document.body){
scrollTop = document.body.scrollTop;
}
document.getElementById("bid").innerHTML = scrollTop;
}
</script>
</html>