JavaScript事件
JavaScript事件
- JavaScript事件
-
- JavaScript单击事件与元素标签操作
- JavaScript中的Timing定时事件
- JavaScript实现简单计算器实例
- JavaScript简单操作元素标签实例
- Js事件处理值事件绑定方式
- JS事件处理值获取时间源对象
- JS时间处理之contextmenu右击时间
- JS事件处理之mouse鼠标移入移出时间
- JS事件处理之图片切换
- JS事件处理之放大镜效果
- JS事件处理之拖动效果
- JS事件处理之keydown键盘事件
- JS事件处理之load事件
- JS事件处理之表单事件
- JS事件处理之change事件
- JS事件处理之scroll滚动事件
JavaScript事件
JavaScript单击事件与元素标签操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="hid">JavaScript语言实例--单击事件</h1>
<button onclick="console.log('hello')">点击我</button>
<button onclick="fun()">点击我1</button>
<ul>
<li>AAAA</li>
<li>BBBB</li>
<li>CCCC</li>
<li>CCCC</li>
</ul>
<ol>
<il>111111</il>
<il>222222</il>
</ol>
</body>
<script>
function fun(){
console.log('hello js');
//获取id属性值为hid的元素标签
var hid = document.getElementById("hid");
//输出元素标签之间的文本内容
console.log(hid.innerHTML);
//修改标签之间的内容
hid.innerHTML = "JavaScript语言实例--元素操作";
//改变 HTML 元素的样式
hid.style.color = "red";
hid.style.backgroundColor = "#ddd";
}
//获取当前网页中的所有li元素标签
var mlist = document.getElementsByTagName("li");
//遍历输出
for(var i in mlist){
if(!isNaN(i)){
console.log(mlist[i].innerHTML);
}
}
</script>
</html>
JavaScript中的Timing定时事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="hid">JavaScript语言实例--定时器</h1>
<h2 id = "nav">计数器: 0</h2>
<button onclick="doStop()">停止</button>
</body>
<script>
var m=0,mytime=null;
function doRun(){
m++;
document.getElementById("nav").innerHTML = "计数器："+m;
mytime = setTimeout("doRun()",1000);
}
doRun();
function doStop(){
clearTimeout(mytime);
}
/*
m = 0;
var mytime = setInterval(function(){
m++;
document.getElementById("nav").innerHTML = "计数器"+m;
},1000);
function doStop(){
clearInterval(mytime);//清除定时
}
*/
/*
//定时3秒后执行参数中的函数
setTimeout(function(){
console.log("Hello JS!");
},3000);
//定时每个1秒执行参数回调函数一次
var m = 0;
setInterval(function(){
m++;
console.log("Hello JS! "+m);
},1000);
*/
</script>
</html>
JavaScript实现简单计算器实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript语言实例--简单计算器</h1>
<form action="" name="myform" method = "GET">
数值1：<input type="text" name="num1" size="10"><br/><br>
数值2：<input type="text" name="num2" size="10"><br/><br>
结 果：<input type="text" name="res" readonly style="border:0px;">
<br><br>
<input type="button" onclick="doFun(1)" value="加">
<input type="button" onclick="doFun(2)" value="减">
<input type="button" onclick="doFun(3)" value="乘">
<input type="button" onclick="doFun(4)" value="除">
</form>
</body>
<script>
//处理函数
function doFun(c){
var m1 = parseInt(document.myform.num1.value);
var m2 = parseInt(document.myform.num2.value);
switch(c){
case 1: var res = m1+"+"+m2+"="+(m1+m2); break;
case 2: var res = m1+"-"+m2+"="+(m1-m2); break;
case 3: var res = m1+"*"+m2+"="+(m1*m2); break;
case 4: var res = m1+"/"+m2+"="+(m1/m2); break;
}
//将结果放置到第三个输入框中
document.myform.res.value = res;
}
</script>
</html>
JavaScript简单操作元素标签实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript语言实例--js操作元素标签属性（放大和缩小）</h1>
<button onclick="dofun(1)">放大</button>
<button onclick="dofun(2)">缩小</button>
<button onclick="dofun(3)">隐藏</button>
<br/><br/>
<div style="width:200px;height:200px;background-color:#ddd;" id="did"></div>
</body>
<script>
var width=200,height=200;
var did = document.getElementById("did");
function dofun(m){
switch(m){
case 1:
width += 10;
height += 10;
did.style.width =width+"px";
did.style.height = height+"px";
break;
case 2:
width -= 10;
height -= 10;
did.style.width =width+"px";
did.style.height = height+"px";
break;
case 3:
did.style.display = "none";
break;
}
}
</script>
</html>
Js事件处理值事件绑定方式
Event 对象
-
事件源（在网页中可见的东西都可以被作为事件源）
-
事件
按钮1
按钮2 -
事件处理程序
JS事件处理值获取时间源对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 onclick = "fun(this)">标题</h2>
<h2 id="hid">标题</h2>
</body>
<script>
function fun(ob){
console.log("aaaaaaaa");
//console.log(ob); 不传入ob直接输出this的话是输出的上一行的内容。获取不到时间源。
ob.style.color = "green";
}
document.getElementById("hid").onclick = function(){
console.log("bbbbbbbb");
//此种时间绑定方式，this就表示当前事件源对象
//console.log(this);
this.style.color = "red";
}
</script>
</html>
JS时间处理之dblclick双击事件
<!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;}
ul li{
height:30px;margin-top:4px;background-color:#ddd;}
ul li:hover{
background-color:#fc0;}
</style>
</head>
<body>
<h1>JavaScript语言实例--dblclick双击事件</h1>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<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 = "#f0c";
}
}
</script>
</html>
JS时间处理之contextmenu右击时间
<!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>JavaScript语言实例--contextmenu鼠标右击事件</h1>
<ul id="uid">
<li>剪切</li>
<li>复制</li>
<li>粘贴</li>
</ul>
</body>
<script>
document.oncontextmenu = function(ent){
//获取兼容的事件对象
var event = ent || window.event;
//获取鼠标在网页中的点击位置
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>
JS事件处理之mouse鼠标移入移出时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</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>JavaScript语言实例--mouse鼠标移入和移出事件</h1>
<div id="did" onmouseover="doStop()" onmouseout="doStart()">
<img src="./images/11.jpg" width="384"/>
<img src="./images/22.jpg" width="384"/>
<img src="./images/33.jpg" width="384"/>
<img src="./images/44.jpg" width="384"/>
</div>
</body>
<script>
var m = 1;
var mytime = null;
//定义函数展示对应的图片
function show(x){
var mlist = document.getElementById("did").getElementsByTagName("img");
for(var i=0; i<mlist.length; i++){
if(x == i+1){
mlist[i].style.display = "block";
}else{
mlist[i].style.display = "none";
}
}
}
//开启定时轮播图片
function doStart(){
if(mytime == null){
mytime = setInterval(function(){
m++;
show(m);
if(m>=4){
m = 0;
}
}, 2000);
}
}
//停止轮播图片
function doStop(){
if(mytime != null){
clearInterval(mytime);
mytime = null;
}
}
doStart();
</script>
</html>
JS事件处理之图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
<style>
div,img,ul,li{
margin:0px;padding:0px;}
#did{
width:384px;height:240px;}
#list img{
width:85px;border:2px solid #fff;margin-right:2px;}
#list img:hover{
border:2px solid red;}
</style>
</head>
<body>
<h1>JavaScript语言实例--onmouseover鼠标移入事件</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>
</html>
JS事件处理之放大镜效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</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>JavaScript语言实例--图片的放大镜效果</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>
JS事件处理之拖动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
<style>
div{
margin:0px;padding:0px;}
#did{
width:200px;height:200px;background-color:#ddd;cursor:move;position:absolute;}
</style>
</head>
<body>
<h1>JavaScript语言实例--拖动效果</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>
JS事件处理之keydown键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
</head>
<body>
<h1>JavaScript语言实例--键盘事件onkeydown</h1>
</body>
<script>
window.document.onkeydown = function(ent){
//获取兼容的事件对象
var event = ent || window.event;
//输出键盘值
console.log(event.keyCode);
}
</script>
</html>
JS事件处理之load事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
<script>
//当页面加载完成后才自动执行的程序
window.onload = function(){
var hid = document.getElementById("hid");
hid.style.color="red";
}
</script>
</head>
<body>
<h1 id="hid">JavaScript语言实例--onload事件</h1>
</body>
</html>
JS事件处理之表单事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
</head>
<body>
<h1 id="hid">JavaScript语言实例--表单事件</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>
JS事件处理之change事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
</head>
<body>
<h1 id="hid">JavaScript语言实例--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>
JS事件处理之scroll滚动事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
</head>
<body>
<h1 id="hid">JavaScript语言实例--滚动条事件</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>