目录
事件对象
事件对象
-
当HTML中发生事件时，该事件属于某个事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件对象</title>
<style>
#areaDiv {
width: 300px;
height: 100px;
border: 1px solid #000;
}
#showMsg {
width: 300px;
height: 20px;
border: 1px solid #000;
margin-top:10px;
}
</style>
<script>
window.onload = function(){
// var areaDiv = document.getElementById("areaDiv");
// var showMsg = document.getElementById("showMsg");
// areaDiv.onclick = function(){
// var x = event.pageX;
// var y = event.pageY;
// showMsg.innerHTML = "x="+x+"y= "+y;
// }
/**
* 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
*/
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
/**
* onmousemove
* - 该事件将会在鼠标在元素中移动时被触发
* 事件对象
* - 当事件的响应函数被触发时， 浏览器每次都会将一个事件对象作为实参传递进响应函数，
* 在事件对象中封装了当前事件相关的一切信息，比如:鼠标的坐标 键盘哪个按键被按下 鼠标滚轮滚动的方向。。。
*/
areaDiv.onmousemove = function(event){
/*
在IE8中，响应函数被处罚时，浏览器不会传递事件对象，
在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
*/
// var x =window.event.clientX;
// var y =window.event.clientY;
/*
clientX可以获取鼠标指针的水平坐标
cilentY可以获取鼠标指针的垂直坐标
*/
//兼容不同浏览器，当没有event属性的时候，在window属性中找event属性
// if(!event){
// event = window.event;
// }
event = event || window.event;
var x =event.clientX;
var y =event.clientY;
// alert("x = "+x+" , y = "+y);
//在showMsg中显示鼠标的坐标
showMsg.innerHTML = "x = "+x+" , y = "+y;
}
}
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>练习：div随鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习：div 随鼠标移动</title>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: #ccc;
/*
开启box1的绝对定位
*/
position: absolute;
}
</style>
<script>
window.onload = function(){
/*
使div可以跟随鼠标移动
*/
var box1 = document.getElementById("box1");
document.onmousemove = function(event){
//解决兼容问题
event =event||window.event;
//获取滚动条滚动的距离
/*
chrome认为浏览器的滚动条是body的，可以通过body . scrol1Top来获取
火狐等浏览器认为浏览器的滚动条是htm1的，
*/
var st = document.body.scrollTop||document.documentElement.scrollTop;
var sl = document.body.scrollLeft||document.documentElement.scrollLeft;
// var st = document.documentElement.scrollTop;
// console.log(st);
//获取到鼠标的坐标
/*
clientX和clientY
用于获取鼠标在当前的可见窗口的坐标
而div的偏移量，使相对于整个页面的
pageX和pageY可以获取鼠标相对于当前页面的坐标
但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
*/
var left = event.pageX;
var top = event.pageY;
//修改div的坐标
box1.style.left = left+sl+"px";
box1.style.top = top+st+"px";
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body style ="height :1000px;">
</html>事件的冒泡（Bubble）
- 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
- 在开发中大部分情况，冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
- 取消冒泡可以将事件对象的 cancelBubble设置为true,既可取消冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件的冒泡</title>
<style>
#box1 {
width: 200px;
height: 200px;
background-color:green;
}
#s1 {
background-color: yellow;
}
</style>
<script>
window.onload = function(){
/*
事件的冒泡（Bubble）
- 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
- 在开发中大部分情况，冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
*/
//为s1绑定一个单击响应函数
// var s1 =document.getElementById("s1");
// s1.onclick =function(){
// alert("我是hhhhhhh");
// }
s1.onclick =function(event){
event = event||window.event;
alert("我是hhhhhhh");
//取消冒泡
//可以将事件对象的cancelBubble设置为true,既可取消冒泡
event.cancelBubble = true;
}
//为box1绑定一个单击响应函数
var box1 =document.getElementById("box1");
box1.onclick =function(){
alert("我emmmmmm");
}
//为body绑定一个单击响应函数
//body的范围在于它被撑大的范围
document.body.onclick = function(){
alert("wowowowowowowow");
}
}
</script>
</head>
<body>
<div id="box1">
我是box1
<span id="s1">我是span</span>
</div>
</body>
</html>
事件的委派
- 我们希望，只绑定一次事件，既可应用到多个元素上，即使元素时后添加的。
- 我们可以尝试将其绑定给元素的共同的祖先元素
事件的委派
- 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
- 从而通过祖先元素的响应函数来处理事件。
- 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
- target
- event中的target表示的是触发事件的对象
- if(event.target.className){}
- 可以用这个方法判断触发事件的对象是不是我们期望的对象，然后可以和if语句一起使用，使期望的对象触发事件并执行，反之则不执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件的委派</title>
<script>
window.onload = function(){
//点击按钮后添加超链接
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//创建一个超链接
//创建一个li
var li = document.createElement("li");
li.innerHTML = "<a href = 'javaScript'>超链接"+(allA.length+1)+"</a>";
var u1 = document.getElementById("u1");
u1.appendChild(li);
}
/*
为每一个超链接都绑定一个单击响应函数
这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦
而且这种操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
*/
//获取所有的a
var allA = document.getElementsByTagName("a");
// for(var i= 0;i<allA.length;i++){
// allA[i].onclick = function(){
// alert("我是a的单击响应函数！");
// }
// }
/*
我们希望，只绑定一次事件，既可应用到多个元素上，即使元素时后添加的
我们可以尝试将其绑定给元素的共同的祖先元素
事情的委派
- 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
从而通过祖先元素的响应函数来处理事件。
- 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
*/
//为ul绑定一个单击响应函数
u1.onclick = function(event){
// alert("我是u1的单击响应函数！！");
//如果触发事件的对象是我们期望的元素，则执行，否则不执行
event = event||window.event;
/*
target
- event中的target表示的是触发事件的对象
*/
// alert(event.target);
//如果触发事件的对象是我们期望的元素，则执行否则不执行
if(event.target.className){
alert("我是u1的单击响应函数！！");
}
}
}
</script>
</head>
<body>
<button id = "btn01"> 添加超链接</button>
<ul id="u1">
<li><a href="javaScript:;" class="link">超链接1</a></li>
<li><a href="javaScript:;" class="link">超链接2</a></li>
<li><a href="javaScript:;" class="link">超链接3</a></li>
<li><a href="javaScript:;" class="link">超链接4</a></li>
</ul>
</body>
</html>
事件的绑定
- 使用 对象.事件 = 函数 的形式绑定响应函数
- 它只能同时为一个元素的一个事件绑定一个响应函数
- 不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
- addEventListener()
- 通过这个方法也可以为元素绑定单击响应函数
- 参数：
- 事件的字符串，不要on
- 回调函数，当事件触发时该函数会被调用
- 是否在捕获阶段触发事件，需要一个布尔值。一般都传false
- 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
- 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
- 这个方法不支持IE8及以下的浏览器
- attachEvent()
- 在IE8中可以使用attachEvent()来绑定事件
- 参数：
- 事件的字符串，要on
- 回调函数
- 这个方法也可以同时为一个事件绑定多个处理函数
-
不同的是它是后绑定先执行，执行顺序和addEventListener()相反
-
-
addEventListener()中的this，是绑定事件的对象
-
attachEvent()中的this，是window
-
需要统一两个方法this
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件的绑定</title>
<script>
window.onload = function(){
//获取按钮对象
var btn01 = document.getElementById("btn01");
/**
* 使用 对象.事件 = 函数 的形式绑定响应函数
* 它只能同时为一个元素的一个事件绑定一个响应函数
* 不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
*/
//为btn01绑定一个单及响应函数
// btn01.onclick = function(){
// alert(1);
// }
//为btn01绑定第二个单及响应函数
// btn01.onclick = function(){
// alert(2);
// }
/*
addEventListener()
- 通过这个方法也可以为元素绑定单击响应函数
- 参数：
1. 事件的字符串，不要on
2. 回调函数，当事件触发时该函数会被调用
3. 是否在捕获阶段触发事件，需要一个布尔值。一般都传false
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
这个方法不支持IE8及以下的浏览器
*/
// btn01.addEventListener("click",function(){
// alert(1);
// },false);
// btn01.addEventListener("click",function(){
// alert(2);
// },false);
// btn01.addEventListener("click",function(){
// alert(3);
// },false);
/*
attachEvent()
- 在IE8中可以使用attachEvent()来绑定事件
- 参数：
1. 事件的字符串，要on
2. 回调函数
- 这个方法也可以同时为一个事件绑定多个处理函数
不同的是它是后绑定先执行，执行顺序和addEventListener()相反
*/
// btn01.attachEvent("onclick",function(){
// alert(1);
// })
bind(btn01,"click",function(){
alert(1);
})
}
//定义一个函数，，用来为指定元素绑定响应函数
/*
addEventListener()中的this，是绑定事件的对象
attachEvent()中的this，是window
需要统一两个方法this
*/
/*
参数：
obj 要绑定事件的对象
eventStr 事件的字符串（不要on）
callback 回调函数
*/
function bind(obj,eventStr,callback){
//判断obj中是否有addEventListener，来决定用那种方式
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);
}else{
/*
this是谁由调用方式决定
callback.call(obj)
call()方法：修改函数的this
*/
//IE8及以下
// obj.attachEvent("on"+eventStr,callback)
obj.attachEvent("on"+eventStr,function(){
//在匿名函数中调用回调函数
callback.call(obj);
// callback();
})
}
}
</script>
</head>
<body>
<button id="btn01">点击</button>
</body>
</html>
事件的传播
将事件的传播分成了三个阶段
- 捕获阶段：
- 在捕获阶段时，从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
- 目标阶段：
- 事件捕获到目标元素，捕获结束后，开始在目标元素上触发事件
- 冒泡事件：
- 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
- 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
- 一般情况下我们都不会希望在捕获阶段触发事件，所以这个参数一般都是false
- IE8及以下的浏览器没有捕获阶段
- this是谁由调用方式决定
- callback.call(obj)
- call()方法：修改函数的this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件的传播</title>
<style>
#box1 {
width: 300px;
height: 300px;
background-color: yellowgreen;
}
#box2 {
width: 200px;
height: 200px;
background-color: yellow;
}
#box3 {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script>
window.onload = function(){
/*
分别为我们的三个div绑定单击响应函数
*/
box1 = document.getElementById("box1");
box2 = document.getElementById("box2");
box3 = document.getElementById("box3");
/*
事件的传播：
将事件的传播分成了三个阶段
1. 捕获阶段：
- 在捕获阶段时，从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2. 目标阶段
- 事件捕获到目标元素，捕获结束后，开始在目标元素上触发事件
3. 冒泡事件
- 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
- 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
一般情况下我们都不会希望在捕获阶段触发事件，所以这个参数一般都是false
- IE8及以下的浏览器没有捕获阶段
*/
bind(box1,"click",function(){
alert(1);
} );
bind(box2,"click",function(){
alert(2);
} );
bind(box3,"click",function(){
alert(3);
} );
}
function bind(obj,eventStr,callback){
//判断obj中是否有addEventListener，来决定用那种方式
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);
}else{
/*
this是谁由调用方式决定
callback.call(obj)
call()方法：修改函数的this
*/
//IE8及以下
// obj.attachEvent("on"+eventStr,callback)
obj.attachEvent("on"+eventStr,function(){
//在匿名函数中调用回调函数
callback.call(obj);
// callback();
})
}
}
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
</html>
练习：拖拽
拖拽box1元素
- 拖拽的流程：
- 当鼠标被按下时，开始拖拽 onmousedown
- 当鼠标移动时，被拖拽元素跟随鼠标移动 onmousemove
- 当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
测试IE8:
-
当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下的相关事件都捕获到自己的身上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IE8测试</title>
<script>
window.onload = function(){
//分别为两个按钮都绑定单击响应函数
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
btn01.onclick = function(){
alert(1);
}
btn02.onclick = function(){
alert(2);
}
//设置btn01对鼠标按下事件进行捕获
//当调用一个元素的setCapture()方法以后，这个元素将会吧下一次所有的鼠标按下的相关事件都捕获到自己的身上
btn01.setCapture();
}
</script>
</head>
<body>
<button id="btn01">按钮1</button>
<button id="btn02">按钮2</button>
</body>
</html>
拖拽一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖拽</title>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: #bfc;
position: absolute;
}
#box2 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 200px;
}
</style>
<script>
window.onload = function(){
/*
拖拽box1元素
- 拖拽的流程：
1. 当鼠标被按下的时候，开始拖拽 onmousedown
2. 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
3. 当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
*/
//获取box1元素
var box1 = document.getElementById("box1");
//为box1绑定一个鼠标被按下事件
// 1. 当鼠标被按下的时候，开始拖拽 onmousedown
box1.onmousedown = function(event){
event = event||window.event;
//div的偏移量： 鼠标.onclentX - 元素.offsetLeft
//div的偏移量： 鼠标.onclentY - 元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
//为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event||window.event;
// 2. 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
//获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
//修改box1的位置
box1.style.left = left+"px";
box1.style.top = top+"px";
}
//为元素绑定一个鼠标松开事件,如果页面复杂时，鼠标的作用对象会模糊，当移动到其他的盒子上可能会停不下来
// box1.onmouseup = function(){};
//为document绑定一个鼠标松开事件
document.onmouseup = function(){
// 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件，使用完取消，防止有其他影响
//这时这个事件就变成了一个一次性的事件
document.onmouseup = null;
}
}
}
</script>
</head>
<body>
lllllll
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>拖拽二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖拽</title>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: #bfc;
position: absolute;
}
#box2 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 200px;
}
</style>
<script>
window.onload = function(){
//获取box1元素
var box1 = document.getElementById("box1");
//为box1绑定一个鼠标被按下事件
// 1. 当鼠标被按下的时候，开始拖拽 onmousedown
box1.onmousedown = function(event){
//设置box1捕获所有鼠标按下的事件
/*
setCapture()
- 只有IE支持，但是在火狐中调用不会报错，
而如果在chrome中调用，会报错
*/
//捕获兼容
// if(box1.setPointerCapture){
// box1.setPointerCapture;
// }else{
// box1.setCapture();
// }
//如果这个方法，就是用后面的属性，如果没有就不用
box1.setCapture && box1.setCapture();
event = event||window.event;
//div的偏移量： 鼠标.onclentX - 元素.offsetLeft
//div的偏移量： 鼠标.onclentY - 元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
//为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event||window.event;
// 2. 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
//获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
//修改box1的位置
box1.style.left = left+"px";
box1.style.top = top+"px";
}
//为元素绑定一个鼠标松开事件,如果页面复杂时，鼠标的作用对象会模糊，当移动到其他的盒子上可能会停不下来
// box1.onmouseup = function(){};
//为document绑定一个鼠标松开事件
document.onmouseup = function(){
// 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件，使用完取消，防止有其他影响
//这时这个事件就变成了一个一次性的事件
document.onmouseup = null;
//当鼠标松开，取消对事件的捕获
//兼容
// if(box1.releasePointerCapture){
// box1.releasePointerCapture();
// }else{
// box1.releaseCapture();
// }
box1.releaseCapture && box1.releaseCapture();
}
return false;
}
}
</script>
</head>
<body>
lllllll
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>拖拽完整版：
- 当我们的拖拽一个网页中的内容时，浏览器会默认从搜索引擎中搜索内容
- 此时会导致我们拖拽功能的异常，这是浏览器提供的一个默认行为
- 如果不希望发生这个行为，则可以通过return false来取消默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖拽</title>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: #bfc;
position: absolute;
}
#box2 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 200px;
}
</style>
<script>
window.onload = function(){
//获取box1元素
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
//为box1绑定一个鼠标被按下事件
//开启box1的拖拽
drag(box1);
//开启box2的拖拽
drag(box2);
//获取img元素对象
var img1 = document.getElementById("img1");
//开启img的拖拽
drag(img1);
}
/*
提取一个专门用来拖拽的函数
参数：
开启拖拽的元素
*/
function drag(obj){
// 1. 当鼠标被按下的时候，开始拖拽 onmousedown
obj.onmousedown = function(event){
//设置box1捕获所有鼠标按下的事件
/*
setCapture()
- 只有IE支持，但是在火狐中调用不会报错，
而如果在chrome中调用，会报错
*/
//捕获兼容
// if(box1.setPointerCapture){
// box1.setPointerCapture;
// }else{
// box1.setCapture();
// }
//如果这个方法，就是用后面的属性，如果没有就不用
obj.setCapture && obj.setCapture();
event = event||window.event;
//div的偏移量： 鼠标.onclentX - 元素.offsetLeft
//div的偏移量： 鼠标.onclentY - 元素.offsetTop
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;
//为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event||window.event;
// 2. 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
//获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
//修改box1的位置
obj.style.left = left+"px";
obj.style.top = top+"px";
}
//为元素绑定一个鼠标松开事件,如果页面复杂时，鼠标的作用对象会模糊，当移动到其他的盒子上可能会停不下来
// box1.onmouseup = function(){};
//为document绑定一个鼠标松开事件
document.onmouseup = function(){
// 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件，使用完取消，防止有其他影响
//这时这个事件就变成了一个一次性的事件
document.onmouseup = null;
//当鼠标松开，取消对事件的捕获
//兼容
// if(box1.releasePointerCapture){
// box1.releasePointerCapture();
// }else{
// box1.releaseCapture();
// }
obj.releaseCapture && obj.releaseCapture();
}
return false;
}
}
</script>
</head>
<body>
lllllll
<div id="box1"></div>
<div id="box2"></div>
<img src="./img/1.jpg" id="img1" style="position: absolute;">
</body>
</html>
鼠标的滚轮事件
- onmousewheel 鼠标滚轮滚动事件，会在滚轮滚动的时候触发
- 但是火狐不支持该属性
- 在火狐中需要使用DOMMouseScrol1来绑定滚动事件
- 注意该事件需要通过addEventListener()函数来绑定
- 当滚轮滚动时，如果浏览器由滚动条，滚动条就会随之滚动
- 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
- return false;
- 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false;，需要使用event来取消默认行为
- event.preventDefault();
- 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标的滚轮事件</title>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script>
window.onload = function(){
//获取id为box1的div
var box1 = document.getElementById("box1");
/*
onmousewheel 鼠标滚轮滚动事件，会在滚轮滚动的时候触发
但是火狐不支持该属性
在火狐中需要使用DOMMouseScrol1来绑定滚动事件
注意该事件需要通过addEventListener()函数来绑定
*/
// bind(box1,"DOMMouseScroll",function(){
// alert("火狐：滚轮滚了");
// })
box1.onmousewheel = function(event){
event = event || window.event;
/*
event.wheelDelta 可以获取鼠标滚轮滚动的方向
返回正负值，我们不看值，只看正负
*/
// alert(event.wheelDelta);
//wheelDelta这个属性火狐中不支持
// alert(event.detail);
//为火狐绑定滚轮事件，但是现在火狐也可以用onmousewheel了
// bind(box1,"DOMMouseScroll",box1.onmousewheel);
//判断滚轮滚动的方向
if(event.wheelDelta > 0 || event.detail < 0){
// 当鼠标滚轮向下移动时，box1变长
box1.style.height = box1.clientHeight-10+"px";
}else{
box1.style.height = box1.clientHeight+10+"px";
}
/*
当滚轮滚动时，如果浏览器由滚动条，滚动条就会随之滚动
这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
*/
/*
使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
需要使用event来取消默认行为
*/
event.preventDefault();
return false;
}
function bind(obj,eventStr,callback){
//判断obj中是否有addEventListener，来决定用那种方式
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);
}else{
/*
this是谁由调用方式决定
callback.call(obj)
call()方法：修改函数的this
*/
//IE8及以下
// obj.attachEvent("on"+eventStr,callback)
obj.attachEvent("on"+eventStr,function(){
//在匿名函数中调用回调函数
callback.call(obj);
// callback();
})
}
}
}
</script>
</head>
<body style="height: 2000px;">
<div id="box1"></div>
</body>
</html>
键盘事件
- onkeydown
- 按键被按下
- 对于onkeydown来说如果一直按着某个按键不松手，则事件会- -直触发
- 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快
- 这种设计是为了防止误操作的发生。
- onkeyup
- 按键被松开
- 键盘事件一 般都会绑定给一 些可以获取到焦点的对象或者是document对象
- 我们可以通过keyCode来获取按键的编码
- 通过它，我们能判断出哪个按键被按下
- 除了keyCode,事件对象中还提供了几个属性
- altKey
- ctr1Key
- shiftKey
- 这个三个用来判断alt ，ctrl 和shift是否被按下
- 如果按下则返回true,否则返回false
- 在文本框中输入内容，属于onkeydown的默认行为
- 如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
- return false;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘事件</title>
<script>
window.onload = function(){
//按键被按下
// document.onkeydown = function(event){
// event = event||window.event;
// /*
// 我们可以通过keyCode来获取按键的编码
// 通过它，我们能判断出哪个按键被按下
// 除了keyCode,事件对象中还提供了几个属性
// altKey
// ctr1Key
// shiftKey
// 这个三个用来判断alt ctrl 和shift是否被按下
// 如果按下则返回true,否则返回false
// */
// if(event.keyCode===89 && event.ctrlKey){
// console.log("ctrl和y键都被按下");
// }
// }
//按键被松开
// document.onkeyup = function(){
// console.log("wwwwwwww");
// }
//获取input
var input = document.getElementsByTagName("input")[0];
input.onkeydown = function(event){
// console.log("按键被按下了");
event = event||window.event;
//数字：48-57
//使文本框不能输入数字
if(event.keyCode>=48 && event.keyCode<=57){
/*
在文本框中输入内容，属于onkeydown的默认行为
如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
*/
return false;
}
}
}
</script>
</head>
<body>
<!-- <div id="box1" style="width: 100px; height: 100px; background-color: red;"></div> -->
<input type="text">
</body>
</html>
练习：盒子的上下左右移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习</title>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: #bfc;
position: absolute;
}
</style>
<script>
//使div可以根据方向键向不同的方向移动
window.onload = function(){
//为document绑定一个按键按下的事件
document.onkeydown = function(event){
event = event || window.event;
//定义一个变量，来表示移动的速度
var speed = 10;
//当用户按了ctrl以后，速度加快
if(event.ctrlKey){
speed = 50;
}
//获取id为box1的元素
var box1 = document.getElementById("box1");
// console.log(event.keyCode);
//左：37， 上：38， 右：39， 下：40
switch(event.keyCode){
case 37:
// alert("向左"); left值减小
box1.style.left = box1.offsetLeft-speed+"px";
break;
case 38:
// alert("向上"); top值减小
box1.style.top = box1.offsetTop-speed+"px";
break;
case 39:
// alert("向右"); left值增大
box1.style.left = box1.offsetLeft+speed+"px";
break;
case 40:
// alert("向下"); top值增大
box1.style.top = box1.offsetTop+speed+"px";
break;
}
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
