js基础升级4

1.事件委托
就是将目标节点的事件绑定到祖先节点上，这样在事件传播的过程中，逐层冒泡总能被祖先节点捕获。
而且也解决了如果动态添加节点时，无法给新的节点添加事件的弊端。

var mylist = document.getElementsByClassName("ulclass")[0]
mylist.addEventListener("click", function (evt) {
  var e = e || window.event;
//虽然外层是ul，但是点击后响应的事件target仍然是li，这样就给li绑定事件
  if (e.target && e.target.nodeName.toUpperCase() == "LI") {/*判断目标事件是否为li*/
    alert(e.target.innerHTML);
  }
}, false)

2.鼠标事件
onmouseover // 注册鼠标经过时事件处理函数
onmouseout // 注册鼠标移开时事件处理函数
onmousedown // 注册鼠标按下时事件处理函数
onmouseup // 注册鼠标松开时事件处理函数
onmousemove // 注册鼠标移动时事件处理函数
onclick // 注册鼠标单击时事件处理函数
ondblclick // 注册鼠标双击时事件处理函数

拖动元素

  // 初始化拖放对象
  var box = document.getElementById("box");
  // 获取页面中被拖放元素的引用指针
  box.style.position = "absolute";            // 绝对定位
  box.style.width = "160px";                    // 定义宽度
  box.style.height = "120px";                // 定义高度
  box.style.backgroundColor = "red";            // 定义背景色
  // 初始化变量，标准化事件对象
  var mx, my, ox, oy;                         // 定义备用变量
  function e(event){                             // 定义事件对象标准化函数
if( ! event){                             // 兼容IE浏览器
  event = window.event;
  event.target = event.srcElement;
  event.layerX = event.offsetX;
  event.layerY = event.offsetY;
}
// 进行兼容性的配置
event.mx = event.pageX || event.clientX + document.body.scrollLeft;
// 计算鼠标指针的x轴距离
event.my = event.pageY || event.clientY + document.body.scrollTop;
// 计算鼠标指针的y轴距离
return event;                             // 返回标准化的事件对象
 }
// 定义鼠标事件处理函数
  document.onmousedown = function(event){     // 按下鼠标时，初始化处理
event = e(event);                         // 获取标准事件对象
o = event.target;                         // 获取当前拖放的元素
ox = parseInt(o.offsetLeft);             // 拖放元素的x轴坐标  这是刚点击后元素到最左端的距离
oy = parseInt(o.offsetTop);                 // 拖放元素的y轴坐标  这是刚点击后元素到最右端的距离
mx = event.mx;                             // 按下鼠标指针的x轴坐标   这是刚点击后鼠标到最左端的距离
my = event.my;                             // 按下鼠标指针的y轴坐标   这是刚点击后鼠标到最右端的距离
document.onmousemove = move;             // 注册鼠标移动事件处理函数
document.onmouseup = stop;                 // 注册松开鼠标事件处理函数
  }
function move(event){                         // 鼠标移动处理函数
event = e(event);
o.style.left = ox + event.mx - mx  + "px";    // 定义拖动元素的x轴距离
o.style.top = oy + event.my - my + "px";    // 定义拖动元素的y轴距离
 }
 function stop(event){                             // 松开鼠标处理函数
event = e(event);
ox = parseInt(o.offsetLeft);                 // 记录拖放元素的x轴坐标
oy = parseInt(o.offsetTop);                     // 记录拖放元素的y轴坐标
mx = event.mx ;                                 // 记录鼠标指针的x轴坐标
my = event.my ;                                 // 记录鼠标指针的y轴坐标
o = document.onmousemove = document.onmouseup = null;
// 释放所有操作对象
  }

3.监听按键响应

var box = document.getElementById("box");    // 获取页面元素的引用指针
box.style.position = "absolute";            // 色块绝对定位
box.style.width = "20px";                    // 色块宽度
box.style.height = "20px";                    // 色块高度
box.style.backgroundColor = "red";            // 色块背景
document.onkeydown = keyDown;
// 在Document对象中注册keyDown事件处理函数
function keyDown(event){                     // 方向键控制元素移动函数
var event = event || window.event;         // 标准化事件对象
switch(event.keyCode){                 // 获取当前按下键盘键的编码
    case 37 :                         // 按下左箭头键，向左移动5个像素
        box.style.left = box.offsetLeft - 5  + "px";
        break;
    case 39 :                         // 按下右箭头键，向右移动5个像素
        box.style.left = box.offsetLeft + 5 + "px";
        break;
    case 38 :                         // 按下上箭头键，向上移动5个像素
        box.style.top = box.offsetTop  - 5 + "px";
        break;
    case 40 :                         // 按下下箭头键，向下移动5个像素
        box.style.top = box.offsetTop  + 5 + "px";
        break;
}
return false
}