10.12 笔记-JavaScript 05 事件对象
2017-10-13 22:29
267 查看
JavaScript05
1. 什么是事件
用鼠标或者键盘操作文本文档的时候 产生一个事件 ，事件就是用户操作
事件驱动: 当产生事件的时候，就会调用程序去处理事件,达到效果 这个过程叫做事件驱动
2. 事件组成
事件源 事件 事件处理
<!-- 事件源 button 元素 事件 onclick 事件处理 func()-->
<!-- <button id="btn" onclick="func()">点击</button> -->
3. 事件设置
i. 标签引入
ii. 标签绑定
code:
4. 事件对象
鼠标坐标
e.clientX 鼠标坐标x轴
e.clientY 鼠标坐标y轴
code:
<body>
<div id="box" onclick="test(event,this)"></div>
</body>
<script>
//标签引入方式绑定事件
//需要在绑定的时候传递一个实参event 函数这里用形参来接受
//标签绑定形式获取事件对象 (最常用的形式 重点内容)
var box = document.getElementById('box');
//标准浏览器会自动传递一个参数 这个参数就是事件 对象
box.onclick = function(e){
//IE中 可以直接在事件函数中使用event这个对象
var e = e || event; //解决事件对象兼容性问题
document.title = "X:" + e.clientX +"Y:" + e.clientY;
//box.innerHTML = '元素对象赋值';
this.innerHTML = 'this代表本类对象,赋值效果一样';
}
</script>
5. 事件列表
文档事件
window 顶级对象
window.onload = function(){} 文档加载成功
window.onunload = function(){} 关闭窗口的时候 触发
window.onbeforeunload = function(){} 在离开时给予提示信息
code:
<body>
<button id="btn">测试</button>
</body>
<script>
//关闭窗口的事件 触发事件 只有IE支持
window.onunload =function(){
alert('关闭了');
}
//在离开时给予提示信息 用来确保安全
window.onbeforeunload= function(){
return '确定要离开吗？';
}
</script>
<script>
//文档加载成功的时候 会触发onload事件
window.onload = function(){
var btn =document.getElementById('btn');
alert(btn);
}
</script>
图片事件
imgObject.onload = function(){} 图片加载成功之后触发
imgObject.onerror = function(){} 图片加载失败之后触发
code:
鼠标事件方法
onclick 点击事件,鼠标点击一次
ondblclick 双击事件,鼠标双击
onmousedown 鼠标按下事件
onmouseup 鼠标弹起事件
onmousemove 鼠标移动事件
onmouseover 鼠标移入
onmouseout 鼠标移除
onmouseenter 鼠标移入
onmouseleave 鼠标移除
onmouseover 和 onmouseout 与 onmouseenter和onmouseleave
前者对于包含关系的元素会出现一入一出的效果(也就是说子元素和父元素之间滑过会被响应)
后者对于包含关系的元素不会出现一入一出的效果
(子元素和父元素之间滑过值只响应一次)
code:
6. 实现拖拽div
code:
7. 鼠标移入移除响应导航菜单
code:
8. 图片放大镜,类似于淘宝图片预览放大
offsetLeft 和 offsetTop 获取当前元素距离父元素的left和top值
scrollTop 和 scrollLeft 滚动条所在位置 可读可写的属性
code:
9. 图片轮播 加左右按钮 数字按钮
document.getElementsByName() 通过name属性找到对象 返回数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0px; padding:0px;}
#left{position:fixed;left:60px;top:120px;width:30px;height:30px;}
#right{position:fixed;left:370px;top:120px;width:30px;height:30px;}
</style>
</head>
<body>
<div id="left" onclick="func('-')">
<img src="./images/left.png" alt="" width="100%">
</div>
<img src="./images/11.jpg" name="list1" style="display:block" alt="">
<img src="./images/22.jpg" name="list1" style="display:none" alt="">
<img src="./images/33.jpg" name="list1" style="display:none"alt="">
<img src="./images/44.jpg" name="list1" style="display:none" alt="">
<img src="./images/55.jpg" name="list1" style="display:none"alt="">
<div id="right" onclick="func('+')">
<img src="./images/right.png" alt="" width="100%">
</div>
</body>
<script>
m=0;
//获取img元素对象集合
list = document.getElementsByName('list1');
//图片轮播左右按钮
function func(b){
//把定时器清除
clearInterval(mytime);
//alert(m);
switch(b){
case '-':
m =m-2;
if(m<-1){
m=3;
}
break;
case "+":
//alert(m);
break;
}
running();
//调用定时器
mytime = setInterval(running,1000);
}
//让图片显示
function show(m){
//遍历
for(var i=0;i<list.length;i++){
if(i==m){
list[i].style.display="block";
}else{
list[i].style.display="none";
}
}
}
//让图片滚动
function running(){
m++
if(m==5){
m=0;
}
show(m);
}
//定时器
mytime = setInterval(running,1000);
</script>
</html>
1. 什么是事件
用鼠标或者键盘操作文本文档的时候 产生一个事件 ，事件就是用户操作
事件驱动: 当产生事件的时候，就会调用程序去处理事件,达到效果 这个过程叫做事件驱动
2. 事件组成
事件源 事件 事件处理
<!-- 事件源 button 元素 事件 onclick 事件处理 func()-->
<!-- <button id="btn" onclick="func()">点击</button> -->
3. 事件设置
i. 标签引入
ii. 标签绑定
code:
<body>
<button id="btn"> 点击</button>
</body>
<script>
function func(){
// code .. //1.标签引入
}
var btn = document.getElementById('btn');
btn.onclick=function(){
// code .. 2.标签绑定
}
</script>4. 事件对象
鼠标坐标
e.clientX 鼠标坐标x轴
e.clientY 鼠标坐标y轴
code:
<body>
<div id="box" onclick="test(event,this)"></div>
</body>
<script>
//标签引入方式绑定事件
//需要在绑定的时候传递一个实参event 函数这里用形参来接受
//标签绑定形式获取事件对象 (最常用的形式 重点内容)
var box = document.getElementById('box');
//标准浏览器会自动传递一个参数 这个参数就是事件 对象
box.onclick = function(e){
//IE中 可以直接在事件函数中使用event这个对象
var e = e || event; //解决事件对象兼容性问题
document.title = "X:" + e.clientX +"Y:" + e.clientY;
//box.innerHTML = '元素对象赋值';
this.innerHTML = 'this代表本类对象,赋值效果一样';
}
</script>
5. 事件列表
文档事件
window 顶级对象
window.onload = function(){} 文档加载成功
window.onunload = function(){} 关闭窗口的时候 触发
window.onbeforeunload = function(){} 在离开时给予提示信息
code:
<body>
<button id="btn">测试</button>
</body>
<script>
//关闭窗口的事件 触发事件 只有IE支持
window.onunload =function(){
alert('关闭了');
}
//在离开时给予提示信息 用来确保安全
window.onbeforeunload= function(){
return '确定要离开吗？';
}
</script>
<script>
//文档加载成功的时候 会触发onload事件
window.onload = function(){
var btn =document.getElementById('btn');
alert(btn);
}
</script>
图片事件
imgObject.onload = function(){} 图片加载成功之后触发
imgObject.onerror = function(){} 图片加载失败之后触发
code:
<body>
<img src="./2.jpg" alt="" id="img">
</body>
<script>
var img = document.getElementById('img');
//图片加载成功之后触发
img.onload = function(){
alert('图片加载成功');
}
//图片加载失败之后触发
img.onerror = function(){
alert('图片加载失败');
//我们可以进行新图片路径赋值
//注意:如果进行新图片路径也加载失败会被重复调用方法
this.src="./0.jpg";
}
</script>鼠标事件方法
onclick 点击事件,鼠标点击一次
ondblclick 双击事件,鼠标双击
onmousedown 鼠标按下事件
onmouseup 鼠标弹起事件
onmousemove 鼠标移动事件
onmouseover 鼠标移入
onmouseout 鼠标移除
onmouseenter 鼠标移入
onmouseleave 鼠标移除
onmouseover 和 onmouseout 与 onmouseenter和onmouseleave
前者对于包含关系的元素会出现一入一出的效果(也就是说子元素和父元素之间滑过会被响应)
后者对于包含关系的元素不会出现一入一出的效果
(子元素和父元素之间滑过值只响应一次)
code:
<body>
<button id="butt">单击</button>
</body>
<script>
var butt = document.getElementById('butt');
butt.onmousedown = function(){
console.log('按下了鼠标');
}
butt.onmouseup = function(){
console.log('鼠标弹起了');
}
butt.onclick = function(){
console.log('鼠标单击事件');
}
butt.ondblclick = function(){
console.log('鼠标双击事件')
}
document.onmousemove = function(e){
// 调整浏览器兼容性问题
var e = e || event;
// 鼠标移动位置事件
document.title = "X:"+e.clientX+" Y:"+e.clientY;
}
</script>6. 实现拖拽div
code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>document</title>
<style>
#box{width:100px;height:100px;background:orange;position:absolute;}
</style>
</head>
<body>
<div id="box" style="top:0px;left:0px"></div>
</body>
<script>
var box = document.getElementById('box');
box.onmousedown = function(e){
// 解决兼容性
var e = e || event;
// 计算偏移位置
var y = e.clientY - parseInt(box.style.top);
var x = e.clientX - parseInt(box.style.left);
document.onmousemove = function(e){
var e = e || event;
document.title = "x:"+ e.clientX + " Y:"+ e.clientY;
//将鼠标的坐标作为box的left和top
//对相对应的位置进行相应处理
box.style.top = e.clientY - y +'px';
box.style.left = e.clientX - x + 'px';
}
}
// 鼠标抬起时将移动事件清空
box.onmouseup = function(){
document.onmousemove = null;
}
</script>
</html>7. 鼠标移入移除响应导航菜单
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
#box{
width:100px;height:100px;background:orange;
}
#big{
width:200px;height:200px;background:blue;
display:none;margin-top:10px;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="big"></div>
</body>
<script>
var box = document.getElementById('box');
var big = document.getElementById('big');
var timer;
//当鼠标移入到boxdiv的时候让bigdiv显示 style.display="block"
box.onmouseover = big.onmouseover = function(){
//console.log('鼠标移入'+timer);
//延迟触发的事件我们在这里将其取消掉
clearTimeout(timer);
big.style.display='block';
}
box.onmouseout = big.onmouseout = function(){
//console.log('鼠标移出');
// 使用定时器特性让其延迟触发消失内容
timer = setTimeout(function(){
big.style.display='none';
},300);
}
</script>
</html>8. 图片放大镜,类似于淘宝图片预览放大
offsetLeft 和 offsetTop 获取当前元素距离父元素的left和top值
scrollTop 和 scrollLeft 滚动条所在位置 可读可写的属性
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#big{width:200px;height:200px;overflow:hidden;
position:absolute;top:10px;left:430px;display:none;}
</style>
</head>
<body>
<img id="small" src="./1.jpg" alt="" width="400px">
<div id="big">
<img src="./1.jpg" alt="">
</div>
</body>
<script>
var small = document.getElementById('small');
var big = document.getElementById('big');
small.onmousemove = function(e){
var e = e || event;
//获取鼠标在图片上的相对坐标
var x = e.clientX - small.offsetLeft;
var y = e.clientY - small.offsetTop;
document.title="X:" + x + "Y:" + y;
//大图与小图的比例 -70 适当调整让图片居中
big.scrollTop = y * 4 - 70;
big.scrollLeft = x * 4 - 70;
//显示我们的大图
big.style.display = "block";
}
small.onmouseout = function(){
big.style.display = "none";
}
</script>
</html>9. 图片轮播 加左右按钮 数字按钮
document.getElementsByName() 通过name属性找到对象 返回数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0px; padding:0px;}
#left{position:fixed;left:60px;top:120px;width:30px;height:30px;}
#right{position:fixed;left:370px;top:120px;width:30px;height:30px;}
</style>
</head>
<body>
<div id="left" onclick="func('-')">
<img src="./images/left.png" alt="" width="100%">
</div>
<img src="./images/11.jpg" name="list1" style="display:block" alt="">
<img src="./images/22.jpg" name="list1" style="display:none" alt="">
<img src="./images/33.jpg" name="list1" style="display:none"alt="">
<img src="./images/44.jpg" name="list1" style="display:none" alt="">
<img src="./images/55.jpg" name="list1" style="display:none"alt="">
<div id="right" onclick="func('+')">
<img src="./images/right.png" alt="" width="100%">
</div>
</body>
<script>
m=0;
//获取img元素对象集合
list = document.getElementsByName('list1');
//图片轮播左右按钮
function func(b){
//把定时器清除
clearInterval(mytime);
//alert(m);
switch(b){
case '-':
m =m-2;
if(m<-1){
m=3;
}
break;
case "+":
//alert(m);
break;
}
running();
//调用定时器
mytime = setInterval(running,1000);
}
//让图片显示
function show(m){
//遍历
for(var i=0;i<list.length;i++){
if(i==m){
list[i].style.display="block";
}else{
list[i].style.display="none";
}
}
}
//让图片滚动
function running(){
m++
if(m==5){
m=0;
}
show(m);
}
//定时器
mytime = setInterval(running,1000);
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 2.javascript中的事件对象【学习笔记】
- JavaScript高级程序设计学习笔记--事件（二）(事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象)
- JavaScript05—自定义对象、事件、计算器
- JavaScript学习笔记之JS事件对象
- 好好学一遍JavaScript 笔记(九)――事件处理函数/监听函数/事件对象
- JavaScript学习笔记之事件对象
- JavaScript学习笔记之JS事件对象
- Javascript 笔记与总结（2-16）事件对象
- 好好学一遍JavaScript 笔记(九)——事件处理函数/监听函数/事件对象
- 10.10 笔记-JavaScript 02 绑定事件,对象类型的转换
- 韩顺平 javascript教学视频_学习笔记27_dom对象（window对象3.history.location.navigator.screen.event）_js事件驱动编程
- 好好学一遍JavaScript 笔记(九)——事件处理函数/监听函数/事件对象
- JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)
- javaScript笔记（二十一） 事件对象
- JavaScript学习12：事件对象
- JavaScript事件event对象属性
- JavaScript事件处理程序 学习笔记
- javascript的date对象操作笔记
- Javascript笔记：jQuery源码分析以及从jQuery对象创建的角度理解extend方法的原理
- JavaScript学习笔记(八) 基本类型包装器和Error对象