JS 事件

事件绑定

1：element.onclick = function(){}  只能绑定一个方法，

2：IE下 element.attachEvent('事件','函数')

    标准下 element.addEventListener('事件','函数','false')第三个参数代表是否捕获 默认false 冒泡。  冒泡是以出去的事件触发，捕获是被进入的事件触发

取消绑定

1：element.onclick = null 如果是普通的绑定，以赋值的形式取消

2：IE下 element.dettachEvent('事件','函数')

     标准下 element.removeEventListener('事件','函数','是否冒泡，bool值')

键盘事件

onkeydown: 键盘按下触发

onkeyup: 键盘抬起触发

event.keyCode: 键盘建值的ASCII吗

ctrlKey， shiftKey, altKey bool值 | 当一个事件发生的时候，如果ctrl， shift， alt处于按下的状态返回true，否则返回fasle

事件的默认行为

oncontextmenu: 右键菜单事件， 当右键菜单（环境菜单 ）显示出来的时候触发

创建元素： document.createElement('tagName')

插入元素： element.insertBefore('要插入的元素','原位置的元素')

添加元素： element.appendChild('要添加的元素')

拖拽

      需要三个事件

      onmousedown: 鼠标按下选择元素

      onmousemove: 拖拽元素

      onmouseup:     释放元素

鼠标滚轮事件

IE/Chrom onmousewheel  获取滚动方向 event.wheelDelta  = 120 向上滚动  event.wheelDelta = -120 向下滚动

firefox DOMMouseScroll 必须使用 addEventListener 来实现事件绑定 例如： Element.addEventListener('DOMMouseScroll ', Function(), false) 

　　　　　　　　　　　　获取滚动方向 Event.detail = -3 向上滚动 Event.detail = 3 向下滚动

return false 可以组织 obj.on事件名称=fn 所触发的默认行为。

addEventListener绑定的事件必须通过event下面的preventDefault()

    // 1:拖拽的时候，如果浏览器中有文字被选中，会产生问题
    //   原因：当鼠标按下的时候，如果浏览器中有文字被选中，会触发浏览器默认的文字拖拽效果
    //   解决：标准浏览器下 阻止默认行为。非标准下通过设置全局捕获解决
    //   element.setCapture() 当我们给一个元素设置全局捕获后，该元素就会监听后续的所有事件,即当有事件发生时，就会别设置了全局捕获的元素所触发。 在IE中存在并且有效果， 在Firefox中存在但是没有效果，在Chrome中不存在
    //   element.releaseCapture() 释放捕获
    // 2:图片拖拽的时候，会产生和有选中的文字一样的问题，解决方案同上
      window.onload = function() {
        var oDiv = document.getElementById('div1');
        dragEffect(oDiv);
        function dragEffect(obj) {
          obj.onmousedown = function(ev) {
            ev = ev || event;
            var disX = ev.clientX - obj.offsetLeft;
            var disY = ev.clientY - obj.offsetTop;

            if (obj.setCapture) {
              obj.setCapture();
            }

            document.onmousemove = function(ev) {
              ev = ev || event;
              // 限制拖拽区域，同理可以实现吸附效果
              var L = ev.clientX - disX;
              var T = ev.clientY - disY;
              if (L < 0) {
                L = 0
              }else if (L > document.documentElement.clientWidth - obj.offsetWidth) {
                L = document.documentElement.clientX - obj.offsetWidth
              }
              if (T < 0) {
                T = 0
              }else if (T > document.documentElement.clientHeight - obj.offsetHeight) {
                T = document.documentElement.clientY - obj - offsetHeight
              }
              obj.style.left = L + 'px';
              obj.style.top = T + 'px';
            }
            document.onmouseup = function() {
              document.onmousemove = null;
              if (obj.releaseCapture) {
                obj.releaseCapture();
              }
            }
            // 阻止默认的文字拖动效果
            return false;
          }
        }
      }



window.onload = function() {
        var oDiv = document.getElementsByTagName('div')[0];
        mouseScroll(oDiv);
        function mouseScroll(obj) {
          obj.onmousewheel = needAction;
          if (obj.addEventListener) {
            obj.addEventListener('DOMMouseScroll', needAction, false);
            alert(2);
          }else {
            alert(1);
          }

          function needAction(ev) {
            ev = ev || event;
            var isUp = true;
            if (ev.wheelDelta) {
              isUp = ev.wheelDelta > 0;
            }else {
              isUp = ev.detail < 0;
            }

            if (isUp) {
              obj.style.height = obj.offsetHeight - 10 + 'px';
            }else {
              obj.style.height = obj.offsetHeight + 10 + 'px';
            }

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

        }

        document.oncontextmenu = function() {
          return false;
        };

        document.addEventListener('oncontextmenu', function(ev){
          ev.preventDefault();
        },false);
      }