JavaScript--事件（下）

一、注册事件处理程序

注册事件处理程序有两种基本方式：

（1）一种是给事件目标对象或文档元素设置属性。

按照约定，事件处理程序属性的名字由“on”后面跟着事件名组成：onclick、onchange等。这些属性名是区分大小写的，所有都是小写，即使是事件类型是由多个词组成的（比如“readystatechange”）。

<div onclick="alert(1);"></div>

注意：尽量少用内联事件

还可以这样：

var div = document.querySelector('div')
div.onclick=function(){ 
    alert(1); 
}

如果要删除"on"类型的事件，只需将其设为null：

div.onclick = null;

再点击就不会有任何反应。

注意：事件处理程序属性的缺点是其设计都是围绕着假设每个事件目标对于每种事件类型将最多只有一个处理程序。

（2）另一种是通过addEventListener()

window对象、Document对象和所有的文档元素（Element）都定义了一个名为 addEventListener() 方法，使用这个方法可以为事件目标注册事件处理程序。

target.addEventListener(type, listener[, useCapture]);

addEventListener方法接受三个参数。

type：事件名称（事件类型），字符串，大小写不敏感。
listener：监听函数。事件发生时，会调用该监听函数。
useCapture：布尔值，表示监听函数是否在捕获阶段（capture）触发，默认为false（监听函数只在冒泡阶段被触发）。老式浏览器规定该参数必写，较新版本的浏览器允许该参数可选。为了保持兼容，建议总是写上该参数。

注意：使用addEventListener()方法时，事件类型不应包括前缀“on”，比如：“onclick”改成“click”等。

addEventListener('click',listener,false);

注意：调用addEventListener()并不会影响onclick属性的值。

<button id="mybutton">点击</button> 
var v = document.getElementById('mybutton'); 
v.onclick = function() {alert('1');} 
v.addEventListener('click',function(){alert('2');},false);

上面的代码中，单击按钮会产生两个alert()对话框。

能通过多次调用addEventListener()方法为同一个对象注册同一事件类型的多个处理程序函数。

相对 addEventListener() 的是 removeEventListener() 方法。

removeEventListener方法的参数，与addEventListener方法完全一致。它的第一个参数“事件类型”，也是大小写不敏感。

注意：removeEventListener()方法的事件处理程序函数必须是函数名。

兼容写法：

//移除函数
function removeEvent(obj, type, fn, useCapture){
      if (obj.removeEventListener) {
    obj.removeEventListener(type, fn, useCapture);
      }
      else {
    obj.detachEvent("on"+type, fn);
      }
    //三元的写法  obj.removeEventListener?obj.removeEventListener(type,fn,useCapture):obj.detachEvent("on"+type, fn);
}
//添加函数
function addEvent(obj, type, fn, useCapture){
      if (obj.addEventListener) {  
    obj.addEventListener(type, fn, useCapture);
      }
      else {
    obj.attachEvent("on"+type, fn);
      }
        //三元的写法  obj.addEventListener?obj.addEventListener(type,fn,useCapture):obj.attachEvent("on"+type, fn);
}

二、事件代理（事件委托）

基于事件会在冒泡阶段向上传播到父节点，我们可以将子节点的监听事件定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。

<div id="div"> 
    <div id="item">123</div> 
</div> 
document.getElementById('div').addEventListener('click', function(e) { 
    var target = e.target; 
    if(target.getAttribute('id').toLowerCase() == 'item') { 
        alert(1); 
    } 
})

如果使用事件代理，以后插入的新节点仍然可以监听的到。

如果使用JQuery，我们要为新增节点添加事件，除了在新增事件后添加事件外，还可以用下面的代码：

$(document).on('click','div',function(){})

三、offset家族

offsetParent 偏移的父元素（一层一层的向上找找到定位的元素就是对应的父元素有定位的上层元素就他的父元素找不到的就是body）
offsetLeft 基于偏移的父元素的左偏移量
offsetTop 基于偏移的父元素的上偏移量
offsetHeight 获取偏移元素的高度（包含border以及padding）
offsetWidth 获取偏移元素的宽度（包含border以及padding）

拖拽（区间拖拽）

//拖拽的方法实现 第一个是移动的盒子 第二个在哪移动
function touch(moveBox,box){
    //给moveBox添加按下事件 记录一下当前鼠标在moveBox里面点击的位置
    moveBox.onmousedown = function(e){
        e = e || window.event
        //获取对应的第一次按下的位置
        var firstX = e.offsetX
        var firstY = e.offsetY
        // console.log(document.body.offsetParent); //偏移的父元素
        //给box添加move事件 记录每次的位置 在box的位置 设置moveBox在box的定位
        box.onmousemove = function(e){
            e = e || event
            //这个108是对应的box离body的距离 这个距离就是box偏移的距离
            //offsetLeft 得到基于父元素左偏移量 offsetTop 得到基于父元素的上偏移量
            //offsetParent 基于的父元素 基于定位的 他会一层层往上找 找到定位的父元素就基于他 如果没有找到就基于body
            //有奶便是娘 谁有定位他就基于谁
            var currentX = e.pageX - getOffset(this).left
            var currentY = e.pageY - getOffset(this).top
            var targetX = currentX - firstX
            var targetY = currentY - firstY
            //判断边界 offsetWidth 得到盒子的宽度 offsetHeight得到盒子的高度
            if(targetX<0){
                targetX = 0
            }
            if(targetY<0){
                targetY = 0
            }
            if(targetX>this.offsetWidth-moveBox.offsetWidth){
                targetX = this.offsetWidth-moveBox.offsetWidth
            }
            if(targetY>this.offsetHeight-moveBox.offsetHeight){
                targetY = this.offsetHeight-moveBox.offsetHeight
            }
            // 设置moveBox在box的定位
            moveBox.style.left = targetX + 'px'
            moveBox.style.top = targetY + 'px'
        }
        //给box添加弹起事件 清除box的move事件
        document.onmouseup = function(){
            box.onmousemove = null
        }
    }
}

获取对应的盒子离最外层body的left值及top值

//获取对应的元素离body的距离 传入一个元素
function getOffset(element){
    var left = 0
    var top = 0
    while(element){
        left += element.offsetLeft
        top += element.offsetTop
        element = element.offsetParent
    }
    return {left,top}
}