js事件练习 拖拽应用
定制专属于你的小球吧
部分颜色 渐变效果
知识点总结详细，封装函数主要解决浏览器的兼容性问题（希望看到这篇博客的你收获多多）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件练习 拖拽应用</title>
<!--****************事件练习 拖拽应用***********
应用 mousedown mousemove mouseup
随机移动的方块
mouseover
**********************************************-->
<style>
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
left: 0;
top: 0;
width: 160px;
height: 160px;
border-radius: 50%;
background-color: #096;
font-size: 19px;
color: #fff;
text-shadow: 5px 5px 8px #000;
box-shadow: 3px 2px 8px #000;
line-height: 160px;
text-align: center;
opacity: 0.6;
}
</style>
</head>
<body>
<div>alalasheep的小球</div>
<script>
var div = document.getElementsByTagName('div')[0];
/****************事件对象*******************
event || window.event 用于IE
事件源对象:
event.target 火狐独有的
event.srcElement Ie独有的
这俩chrome都有
**********************************************/
div.onclick = function(e){
//获取事件对象 事件源对象兼容性写法
var event = e || window.event;
var target = event.target || event.srcElement;
//定义rgb(i,j,k) 由rgb(0,0,0)——rgb(255,255,255)
var i = 0,
j = 0,
k = 0;
/****************js定时器*******************
setInterval();
setTimeout();
clearInterval();
clearTimeout();
全局对象window上的方法，内部函数this指向window
注意 ：setInterval(“func()”,1000);
**********************************************/
//时间戳 每隔30ms 颜色值累加
var timer = setInterval(function(){
if(i <= 255){
target.style.backgroundColor = "rgb("+i+",0,0)";
i++;
}else if(j <= 255){
target.style.backgroundColor = "rgb(255,"+j+",0)";
j++;
}else if(k <= 255){
target.style.backgroundColor = "rgb(255,255,"+k+")";
k++;
}else{
target.style.backgroundColor ='#096';
clearInterval(timer);
}
},30);
}
//执行 drg拖拽事件
drag(div);
//自定义 drg鼠标拖拽事件
function drag(elem){
var disX,
disY;
//调用addEvent()触发事件 当鼠标mousedown时 执行function(e)
addEvent(elem,'mousedown',function(e){
var event = e || window.event;
//移动的水平(垂直)距离是鼠标对于浏览器页面的水平(垂直)距离 - 元素的left/top值
disX = event.clientX - parseInt(getStyle(elem,'left'));
disY = event.clientY - parseInt(getStyle(elem,'top'));
//调用函数 触发事件
addEvent(document,'mousemove',mouseMove);
addEvent(document,'mouseup',mouseUp);
//调用函数 取消冒泡
stopBubble(event);
//调用函数 取消默认事件的触发
cancelHandler(event);
});
/****************查询样式方式*******************
1.window.getComputedStyle(ele,null);
查询计算样式 计算样式只读
返回的计算样式的值都是绝对值，没有相对单位
IE8 及 IE8以下不兼容
2.ele.currentStyle
查询样式 计算样式只读
返回的计算样式的值不是经过转换的绝对值
IE独有的属性
**********************************************/
//封装兼容性方法getStyle(obj,prop);
function getStyle(elem,prop){
//查询计算样式 IE8 及 IE8以下不兼容
if(window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop];
}else{
//查询样式 IE独有的属性
return elem.currentStyle[prop];
}
}
/****************查询样式方式*******************
读写元素css属性
dom.style.prop
可读写行间样式，没有兼容性问题，碰到float这样的关键字属性，前面应加css
eg:float — > cssFloat
复合属性必须拆解，组合单词变成小驼峰式写法
写入的值必须是字符串格式
**********************************************/
/****************阻止默认事件*******************
默认事件 — 表单提交，a标签跳转，右键菜单等
1.return false; 以对象属性的方式注册的事件才生效
2.event.preventDefault(); W3C标注，IE9以下不兼容
3.event.returnValue = false; 兼容IE
封装阻止默认事件的函数 cancelHandler(event);
**********************************************/
//封装阻止默认事件的函数 cancelHandler(event);
function cancelHandler(e){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
/****************事件的绑定方式*******************
1.ele.onxxx = function (event) {}
兼容性很好，但是一个元素只能绑定一个处理程序
基本等同于写在HTML行间上
程序this指向是dom元素本身
2.obj.addEventListener(type, fn, false);
IE9以下不兼容，可以为一个事件绑定多个处理程序
程序this指向是dom元素本身
3.obj.attachEvent(‘on’ + type, fn);
IE独有，一个事件同样可以绑定多个处理程序
程序this指向window
**********************************************/
//封装兼容性的 addEvent(elem, type, handle);方法
function addEvent(elem, type, handle){
if(elem.addEventListener){
elem.addEventListener(type,handle,false);
}else if(elem.attachEvent){
elem.attachEvent('on'+type,function(){
//.call解决this指向window
handle.call(elem);
});
}else{
//相当于elem.ontype=function()
elem['on'+type] = handle;
}
}
/****************事件处理模型 — 事件冒泡、捕获*******************
事件冒泡：
结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）
事件捕获：
结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
IE没有捕获事件
触发顺序，先捕获，后冒泡 点击事件的执行同等
focus，blur，change，submit，reset，select 等事件不冒泡
************************************************/
/****************取消冒泡*******************
取消冒泡：
W3C标准 event.stopPropagation();但不支持ie9以下版本
IE独有 event.cancelBubble = true;
事件委托：
利用事件冒泡，和事件源对象进行处理
优点：
1. 性能 不需要循环所有的元素一个个绑定事件
2. 灵活 当有新的子元素时不需要重新绑定事件
**********************************************/
//封装取消冒泡的函数 stopBubble(event)
function stopBubble(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
/****************事件分类*******************
鼠标事件
click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout
用button来区分鼠标的按键，0/1/2
DOM3标准规定:click事件只能监听左键,只能通过mousedown 和 mouseup来判断鼠标键
**********************************************/
//鼠标落下并移动
function mouseMove(e){
var event = e || window.event;
elem.style.left = event.clientX - disX + "px";
elem.style.top = event.clientY - disY + "px";
}
//鼠标离开 删除事件处理
function mouseUp(e){
var event = e || window.event;
removeEvent(document,'mousemove',mouseMove);
removeEvent(document,'mouseup',mouseUp);
}
}
/****************解除事件处理程序*******************
1.elem.onclick = false/null;
2.elem.removeEventListener(type, fn, false);
3.elem.detachEvent(‘on’ + type, fn);
注:若绑定匿名函数，则无法解除
**********************************************/
//封装兼容性的removeEvent()方法
function removeEvent(elem, type, handle){
if(elem.removeEventListener){
elem.removeEventListener(type,handle,false);
}else if(elem.detachEvent){
elem.detachEvent('on'+ type, handle);
}else{
elem.onclick = false;
}
}
</script>
</body>
</html>
笔者周末用心学习总结 如果喜欢记得点赞+收藏+评论哦
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
