事件

事件

JavaScript的概念：js是具有一定面向对象能力的基于事件驱动的，并且是具备一定安全性客户端脚本语言（弱类型语言）；

1.事件对象

• 默认浏览器会把事件触发的对应信息当做实参（第一个参数）进行传递给事件处理函数（IE6~8不兼容的）

• 当前事件触发，浏览器会把当前事件触发对应的信息（事件类型，事件源，位置…）保存到window的event属性中

  document.body.onclick = function (ev) {
  //ev：默认浏览器会把事件触发的对应信息当做实参（第一个参数）进行传递给事件处理函数（IE6~8不兼容的）
  
  //默认事件处理函数触发，事件相关信息通过实参进行传递  不兼容做兼容处理
  // 事件对象的兼容处理 
  ev = ev || window.event;
  // console.log(ev);
  
  //ev.target
  //事件源的兼容处理
  
  // console.log(ev.target);  //IE6-8不啊金融
  // console.log(ev.srcElement);
  var target = ev.target || ev.srcElement;
  console.log(target);
  
  // 事件对象的相关属性
  //1.altKey /  ctrlKey  /  shiftKey  默认值是false  在事件触发的时候按下对应的键  值就是true
  console.log(ev.altKey, ev.ctrlKey, ev.shiftKey);
  if (ev.altKey) console.log('111');
  
  //2.位置信息
  //clientX  / clientY   获取浏览器首屏区域点击的位置信息(距离可视区域左上角的)
  console.log(ev.clientX, ev.clientY);
  
  //pageX / pageY  获取当前位置距离内容的的高度  （相当于clientX/clientY + scrollLeft / scrollTop） (存在兼容问题)  IE 6 -8 不兼容
  console.log(ev.pageX, ev.pageY);
  
  //screenX / screenY  获取当前位置距离屏幕的信息
  console.log(ev.screenX, ev.screenY);
  
  //3.事件类型  
  console.log(ev.type);
  }
  

2.事件绑定与取消

事件绑定

• DOM0

  • DOM0级事件绑定
    • 元素对象.on+事件名称
  • DOM0级事件取消
    • 元素对象.on+事件名称 = null;

• DOM2

  • DOM2 级事件绑定

  • 元素对象.addEventListener(evenType,callBack,boolean);

    • evenType:事件类型 事件去掉on
    • callBack:回调函数 （函数）
    • boolean:布尔值 默认值false 在冒泡阶段发生 true:在捕获阶段发生

    var box = document.getElementById("box");
    //传递匿名函数
    // box.addEventListener("click", function () {
    //     console.log(111);
    // });
    // box.addEventListener("click", function () {
    //     console.log(222);
    // });
    // box.addEventListener("click", function () {
    //     console.log(333);
    // });
    
    function num1(one) {
        console.log(111);
        console.log(one);
    }
    
    function num2(two) {
        console.log(222);
        console.log(two);
    }
    
    function num3(three) {
        console.log(333);
        console.log(three);
    }
    
    // box.addEventListener("click", num1);
    // box.addEventListener("click", num2);
    // box.addEventListener("click", num3);
    
    
    box.addEventListener("click", function () {
        num1(100);
    });
    box.addEventListener("click", function () {
        num2(200);
    });
    box.addEventListener("click", function () {
        num3(300);
    });
    

  • DOM2事件绑定的额兼容处理

    • IE6-8: 元素对象.attachEvent(on+事件类型，事件处理函数);

    //DOM2事件绑定的兼容处理  是IE独有的
    //元素对象.attachEvent('on' + eventType,callBakc);
    function eventBind(eleObj, eventType, callBack, boolean) {
        if (eleObj.addEventListener) {
            eleObj.addEventListener(eventType, callBack, boolean);
        } else {
            eleObj.attachEvent('on' + eventType, callBack);
        }
    }
    

  • DOM2级 取消事件绑定

    • 元素对象.removeEventListener(“事件名称”,事件处理函数,布尔值);
    • （IE6-8不啊兼容）

  • DOM2级 取消事件绑定兼容处理

    • 元素对象.detachEvent(‘on’+事件名称,事件处理函数名称);

    //DOM2事件取消事件绑定兼容处理
    function unEventBind(eleObj, eventType, callBack) {
        if (eleObj.removeEventListener) {
            eleObj.removeEventListener(eventType, callBack);
        } else {
            eleObj.detachEvent('on' + eventType, callBack);
        }
    }
    

3.事件的传播机制

事件触发流程

NONE: 0   无
CAPTURING_PHASE: 1   捕获阶段   从顶层对象向内查找的过程
AT_TARGET: 2  在目标阶段
BUBBLING_PHASE: 3  冒泡阶段   向外传播的过程

4.阻止事件冒泡

ev.stopPropagation ? ev.stopPropagation():ev.cancelBubble = true;

5.阻止事件的默认行为

ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;

6.键盘事件

键盘事件 onkeydown 按下 ankeypress按着 onkeyup 抬起

document.onkeydown = function (ev) {
ev = ev || window.event;
console.log(ev); //KeyboardEvent{...}


// 事件对象的相关属性
//1.altKey /  ctrlKey  /  shiftKey  默认值是false  在事件触发的时候按下对应的键  值就是true
console.log(ev.altKey, ev.ctrlKey, ev.shiftKey);
if (ev.ctrlKey) console.log(111);

//2.键盘码 keyCode       onkeydown 或   onkeyup 对应的都是ASCII值并且不区分大小写  默认是大写的ASCII值
// console.log(ev.key,ev.keyCode);

//onkeypress:对应的键盘码也是ASCII值  区分大小写
//console.log(ev.key,ev.keyCode);

//3.key  键码    不兼容（IE6~8）没有这个属性值是undefined
console.log(ev.key);
}

7.滚轮事件

IE 或 谷歌 使用DOM0 元素对象.onmousewheel DOM2去掉on

获取绑定滚轮事件必须使用DOM2事件事件，并且对应的事件名是 DOMMouseScroll

//IE或谷歌
 元素对象.onmousewheel = 事件处理函数；
//火狐
 元素对象.addEventListener("DOMMouseScroll",事件处理函数);

滚轮事件方向的兼容处理

// 判断滚轮的方向（兼容的处理）
function whellEvent(ev) {
    //滚轮方向的
    //IE或谷歌  事件对象.wheelDelta  
    //往前滚 ： 120  往后滚：-120  并且火狐不兼容  是undefined   
    // console.log(ev.wheelDelta);

    // 火狐下  ev.detail  
    // 往前滚 ： -3  往后滚：3  
    // console.log(ev.detail);
    if (ev.wheelDelta) { //成立  IE 或 谷歌
        return ev.wheelDelta;
    } else { //火狐   
        return ev.detail * -40;
    }
}