BOM/EVENT学习笔记(4)

事件深入应用

拖拽的原理

onmousedown: 选择元素
onmousemove: 移动元素
onmouseup: 释放元素

<div id="div1"></div>
<script>
  var oDiv = document.getElementById('div1');
  oDiv.onmousedown = function(ev){
    var ev = ev || event; // 兼容
    var disX = ev.clientX - this.offsetLeft; // 鼠标距离盒子左边缘的距离
    var disY = ev.clientY - this.offsetTop; // 鼠标距离盒子上边缘的距离

    document.onmousemove = function(ev){
      // content
      var ev = ev || event;
      oDiv.style.left = ev.clientX - disX + 'px';
      oDiv.style.top = ev.clientY - disY + 'px';
    }
    document.onmouseup = function(){
      // content
      document.onmousemove = document.onmouseup = null;
    }
  }
</script>

当鼠标移动过快时，鼠标会移出div区域，div的onmousemove事件就不会被执行
解决方案：给document加onmousemove事件，不要加到div上
当移动到被另一个更高层级的元素后面时，onmouseup事件就不会被执行
解决方案：给document加onmouseup事件，不要加到div上

拖拽的问题及解决方法

1.拖拽的时候，如果有文字被选中，会产生问题
原因：当鼠标按下时，如果页面中有文字被选中，会触发浏览器默认的拖拽文字的效果
解决方法：
标准下：阻止默认行为
非标准IE：全局捕获 setCapture();
拖拽图片会有问题，原因及解决方法同上

示例：点击查看

拖拽的封装-限制范围、磁性吸附

示例：点击查看

碰撞检测

原理分析：
把拖动的对象记为div，被碰撞对象记为img
把整个区域通过img所在边划分成九宫格，当要拖拽的对象不在图像所在的方格时则不会碰上，否则会碰上
L1,R1,T1,B1 分别为div的左右上下边
L2,R2,T2,B2 分别为img的左右上下边
当R1 < L2 或 L1 > R2 或 B1 < T2 或 T1 > B2 时不会发生碰撞

示例：点击查看

拖拽改变层大小

原理分析：
拖动右边时，只有盒子右边位置发生变化，，只改变盒子宽度
以向右拖动为例，盒子宽度增加，增加的宽度为鼠标最后停在的位置的X轴坐标值减去鼠标按下时的X轴坐标值（当向左拖动时，为负值，盒子宽度减小）
拖动左边时，只有盒子左边位置发生变化，改变盒子宽度和left值
以向右拖动为例，盒子宽度减小，减小的宽度为鼠标最后停在的位置的X轴坐标值减去鼠标按下时的X轴坐标值（当向左拖动时，为负值，盒子宽度增加），left值则要加上这段距离
拖动上边时，只有盒子上边位置发生变化，改变盒子高度和top值
拖动下边时，只有盒子下边位置发生变化，只改变盒子高度
考虑同时拖动两条边的情况

示例：点击查看

滚动条的模拟和扩展运用

滚动条组成：
滚动区域
滚动条

示例：点击查看

鼠标滚轮和cookie

鼠标滚轮

鼠标滚轮事件
IE/Chrome : onmousewheel
event.wheelDelta //滚轮滚动方向判断
上：120 //向上滚动
下：-120 //向下滚动
FireFox : DOMMouseScroll 必须用addEventListener(实现绑定)
event.detail //标准浏览器下有这个属性值为0，IE下，非标准下：undefined；标准下：0
上：-3 //向上滚动
下：3 //向下滚动
return false;阻止的是 obj.on事件名称=fn 所触发的默认行为
addEventListener绑定的事件需要通过event下面的preventDefault()

element.onmousewheel = handlerFunction;
var handlerFunction = element.onmousewheel;

if(element.addEventListener){ // 非标准IE没有addEventListener方法会报错，这里需要判断一下，兼容
    element.addEventListener('DOMMouseScroll', fn, false);
}

var b = ture; //布尔值 兼容IE，Firefox
if (ev.wheelDelta) {
  b = ev.wheelDelta > 0 ? true : false;
} else {
  b = ev.detail < 0 ? ture : false;
}

if (ev.preventDefault) {
  ev.preventDefault();
}
return false;

参考：
1.GlobalEventHandlers.onmousewheel

cookie : 存储数据，当用户访问了某个网站（网页）的时候，可以通过cookie来向访问者的电脑上存储数据
1.不同的浏览器存放的cookie位置不一样，也是不能通用的
2.cookie的存储是以域名的形式进行区分的
3.cookie的数据可以设置名字的
4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样
5.没个cookie存放的内容大小也是有限制的，不同的浏览器存放的大小不一样

通过document.cookie来获取当前网站下的cookie的时候，得到字符串形式的值，他包含了当前网站下所有的cookie。他会把所有的cookie通过一个分号+空格的形式串联起来

如果想要长时间存放一个cookie，需要在设置这个cookie的时候同时给他设置一个过期时间

cookie默认是临时存储，当浏览器关闭进程时自动销毁

内容最好编码存放，encodeURI

document.cookie = '名字=值';
alert(document.cookie);

document.cookie = 'username=name';
document.cookie = 'age=10';

document.cookie = '名称=值;expires=' + (字符串格式)时间; //这里时间必须是字符串形式。不能是一个日期对象，必须是日期对象的字符串

var oDate = new Date();
oDate.setDate(oDate.getDate() + 5);
oDate.toGMTString();

document.cookie = 'username=name;expires=' + oDate;
document.cookie = 'age=10';

// 内容最好编码存放，encodeURI
// (否则有些特殊字符可能会出现问题，比如换行符`\n`,`\n`之后的部分会被截断不被存储)
document.cookie = 'username=name\n你好;expires=' + oDate;
alert(document.cookie); // username=name

alert( encodeURI('你好') ); // %E4%BD%A0%E5%A5%BD
alert( decodeURI('%E4%BD%A0%E5%A5%BD') ); // 你好

document.cookie = 'username=' + encodeURI('name\n你好') + ';expires=' + oDate;
alert(decodeURI(document.cookie));

//封装
function setCookie(key, value, t){
  var oDate = new Date();
  oDate.setDate(oDate.getDate() + t);
  document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
}
function getCookie(key){
  var arr1 = document.cookie.split('; ');
  for(var i = 0;i < arr1.length; i++){
    var arr2 = arr1[i].split('=');
    if(arr2[0] == key){
      return decodeURI(arr2[1]);
    }
  }
}
function removeCookie(key){
  setCookie(key, '', -1);
}

chrome 不能操作本地的cookie(本地测试不能用Chrome浏览器？)

应用：记录用户名
示例：点击查看