【前端】JavaScript入门及实战116-120
116 事件的流传<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#box1 {
width: 300px;
height: 300px;
background-color: yellowgreen;
}
#box2 {
width: 200px;
height: 200px;
background-color: yellow;
}
#box3 {
width: 150px;
height: 150px;
background-color: skyblue;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
分别为三个div绑定单击响应函数
*/
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
/*
事件的传播：关于事件的传播网景公司和微软公司有不同的理解
微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，
然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，
然后在向内传播给后代元素。
W3C综合了两个公司的方案，将事件传播分成了三个阶段
1.捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
IE8及以下的浏览器中没有捕获阶段
*/
bind(box1,"click",function(){
alert("我是box1的响应函数")
});
bind(box2,"click",function(){
alert("我是box2的响应函数")
});
bind(box3,"click",function(){
alert("我是box3的响应函数")
});
};
function bind(obj , eventStr , callback){
if(obj.addEventListener){
// 大部分浏览器兼容的方式
obj.addEventListener(eventStr , callback , true);
}else{
/*
this是谁由调用方式决定
allback.call(obj)
*/
// IE8及以下
obj.attachEvent("on"+eventStr , function(){
// 在匿名函数中调用回调函数
callback.call(obj);
});
}
}
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
</html>
117 拖拽（1）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
拖拽box1元素
拖拽的流程：1.当鼠标在被拖拽元素上按下时，开始拖拽：onmousedown
2.当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
3.当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
*/
// 获取box1
var box1 = document.getElementById("box1");
// 为box1绑定一个鼠标按下事件
// 当鼠标在被拖拽元素上按下时，开始拖拽:onmousedown
box1.onmousedown = function(event){
// 为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event || window.event;
// 当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
// 获取鼠标的坐标
var left = event.clientX;
var top = event.clientY;
//修改box1的位置
box1.style.left = left + "px";
box1.style.top = top + "px";
};
// 为document绑定一个鼠标松开事件
document.onmouseup = function(){
// 当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
// 取消document的onmousemove事件
document.onmousemove = null;
// 取消document的onmouseup事件
document.onmouseup = null;
};
};
};
</script>
</head>
<body>
<div id="box2"></div>
<div id="box1"></div>
</body>
</html>
118 拖拽（2）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
拖拽box1元素
拖拽的流程：1.当鼠标在被拖拽元素上按下时，开始拖拽：onmousedown
2.当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
3.当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
*/
// 获取box1
var box1 = document.getElementById("box1");
// 为box1绑定一个鼠标按下事件
// 当鼠标在被拖拽元素上按下时，开始拖拽:onmousedown
box1.onmousedown = function(event){
// 设置box1捕获所有鼠标按下的事件
/*
setCapture()
只有IE支持，但是在火狐中调用时不会报错，
而如果使用chrome调用，会报错
*/
/*if(box1.setCapture){
box1.setCapture();
}*/
box1.setCapture && box1.setCapture();
event = event || window.event;
// div的偏移量 鼠标.clentX - 元素.offsetLeft
// div的偏移量 鼠标.clentY - 元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
// 为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event || window.event;
// 当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
// 获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
//修改box1的位置
box1.style.left = left + "px";
box1.style.top = top + "px";
};
// 为document绑定一个鼠标松开事件
document.onmouseup = function(){
// 当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
// 取消document的onmousemove事件
document.onmousemove = null;
// 取消document的onmouseup事件
document.onmouseup = null;
// 当鼠标松开时，取消对事件的捕获
box1.releaseCapture && box1.releaseCapture();
};
/*
当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
如果不希望发生这个行为，则可以通过return false来取消默认行为
但是这招对IE8不起作用
*/
return false;
};
};
</script>
</head>
<body>
<div id="box2"></div>
<div id="box1"></div>
</body>
</html>
119 测试IE8
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
</style>
<script type="text/javascript">
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">按钮01</button>
<button id="btn02">按钮02</button>
</body>
</html>
120 拖拽（3）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
拖拽box1元素
拖拽的流程：1.当鼠标在被拖拽元素上按下时，开始拖拽：onmousedown
2.当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
3.当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
*/
// 获取box1
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var img1 = document.getElementById("img1");
// 开启box1的拖拽
drag(box1);
// 开启box2的
drag(box2);
drag(img1);
};
/*
提取一个专门用来设置拖拽的函数
参数：开启拖拽的元素
*/
function drag(obj){
// 为box1绑定一个鼠标按下事件
// 当鼠标在被拖拽元素上按下时，开始拖拽:onmousedown
obj.onmousedown = function(event){
// 设置box1捕获所有鼠标按下的事件
/*
setCapture()
只有IE支持，但是在火狐中调用时不会报错，
而如果使用chrome调用，会报错
*/
/*if(box1.setCapture){
box1.setCapture();
}*/
obj.setCapture && obj.setCapture();
event = event || window.event;
// div的偏移量 鼠标.clentX - 元素.offsetLeft
// div的偏移量 鼠标.clentY - 元素.offsetTop
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;
// 为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event || window.event;
// 当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
// 获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
//修改box1的位置
obj.style.left = left + "px";
obj.style.top = top + "px";
};
// 为document绑定一个鼠标松开事件
document.onmouseup = function(){
// 当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
// 取消document的onmousemove事件
document.onmousemove = null;
// 取消document的onmouseup事件
document.onmouseup = null;
// 当鼠标松开时，取消对事件的捕获
obj.releaseCapture && obj.releaseCapture();
};
/*
当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
如果不希望发生这个行为，则可以通过return false来取消默认行为
但是这招对IE8不起作用
*/
return false;
};
}
</script>
</head>
<body>
<div id="box2"></div>
<div id="box1"></div>
</body>
</html>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]