JS 非IE条件下的event事件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/boonyaxnn/article/details/89197078

一、事件对象：当事件触发时会有一个包含所有事件信息的对象产生event；

     获取event的方式：

1.可以采用传参的方式
    box.onclick = function (a) {
    console.log(a);
    }
2.可以直接输出event
    console.log(event);
3.在非IE浏览器下 默认值是 undefined
    console.log(event);

二、常用属性

1.type:
  描述：获取当前事件的类型
  语法：event.type;
  例子：
    box.onclick = function (event) {
    console.log(event.type);
    };
    document.body.onkeydown = function (event) {
    console.log(event)
    console.log(event.type);
    };

2.bubbles
  描述：判断当前事件是否支持冒泡
  语法：event.bubbles
  例子：
    box.onclick = function (event) {
    console.log(event.bubbles);
    };
    box.onmouseenter = function (event) {
    console.log(event.bubbles);
    }
  注意：支持 返回true 不支持返回false

3.eventPhase：
  描述：事件传导至【当前节点】时处于什么的状态。
  语法：event.eventPhase
    1：事件处于捕获状态
    2：事件处于真正的触发者
    3：事件处于冒泡状态
   例子：
    box.onclick = function (event) {
    console.log('box',event.eventPhase);//2
    };
    div1.onclick = function (event) {
    console.log('div1',event.eventPhase);//3
    };
    box.addEventListener('click', function (event) {
    console.log('box',event.eventPhase);//2
    },true);
    div1.addEventListener('click', function (event) {
    console.log('div1',event.eventPhase)
    },true);

4.target/currentTarget  *****
   描述：获取当前事件的触发者和监听者
   语法： event.target/event.currentTarget
   例子：
    box.addEventListener('click', function (event) {
        console.log('box', event.target);
        console.log('box', event.currentTarget);
    });
    div1.addEventListener('click', function (event) {
        console.log('div1', event.target);
        console.log('div1', event.currentTarget);
    });
    注意：
      1.如果是事件触发者 来调用currentTarget
        那么当前节点既是事件真正的触发者也是 监听者
      2.如果事件传导至某个节点 那么
        event.target：指向真正触发该事件的元素
        event.currentTarget：当前节点

三、常用方法

1.stopPropagation()
  描述：阻止事件传到至下一个节点
  语法：event.stopPropagation();
  例子：
    box.onclick = function (event) {
    console.log('box被点击了');
    event.stopPropagation();
    };
    document.body.onclick = function () {
    console.log('body被点击了');
    };
    document.body.addEventListener('click', function (event) {
    console.log('body被点击了');
    event.stopPropagation();
    },true);
    box.addEventListener('click', function (event) {
    console.log('box被点击了');
    },true);
  注意：不仅可以阻止冒泡而且可以阻止捕获

 2.preventDefault():
  描述：取消节点默认行为
  语法：event.preventDefault()
  例子：
   var a = document.querySelector('a');
     a.onclick = function (event) {
     //cancelable 判断是否可以取消节点默认行为；
     console.log(event.cancelable);
     event.preventDefault();
  };