046-Web前端-JS-非IE的event事件

#6.25

大纲：

HTML event事件应用：

1.非IE中的event事件

2.IE中的event事件

3.兼容性问题

4.event一些其他常用属性

5.event案例

---

1.非IE中的event事件

1.1  event对象及获取event对象方法

1.2  event中常用的属性和方法

---

1.1  event对象及获取event对象方法

描述：当dom tree中某个事件被触发的时候，会同时自动产生一个用来描述事件所有的相关信息（比如出发事件的元素、或者是事件的类型）的对象，这个对象就是event（事件对象）。

获取方式：

(1)在脚本中直接通过event来获取

例子：

         div.οnclick=function(){

         console.log(event);

         console.log(typeof event);

         }

         console.log(event);

(2)还可以通过函数传参数的形式来使用，一般而言我们使用【形参e或eve】来代替

例子：

     div.οnclick=function(aa){

     console.log(aa);

     console.log(event);

     }

---

1.2  event中常用的属性和方法

1.2.1 非IE下event对象的常用属性

(1)type属性

描述：type属性用来获得【当前触发事件】的类型，此属性只读。

语法：event.type

(2)bubbles属性

描述：bubbles属性用来获得【当前触发事件的类型】是否冒泡，

如果当前事件类型支持冒泡则返回true，否则返回false。

语法：event.bubbles

举例：

div.onclick=function(eve){

   console.log('div受到监听');

    console.log(event.bubbles);

    //阻止事件传播

    eve.stopPropagation();

}

document.body.onclick=function(){

    console.log('body受到监听');

}

(3)eventPhase属性

描述：事件传导至【当前节点】时处于什么的状态。

说明：本属性是只读属性，有三个可能的值

1：事件处于捕获状态

2：事件处于真正的触发者

3：事件处于冒泡状态

例子：

//冒泡状态

div.onclick=function(eve){

console.log('div:'+eve.eventPhase);

}

document.body.onclick=function(eve){

console.log('body:'+eve.eventPhase);

}

document.onclick=function(eve){

console.log('document:'+eve.eventPhase);

}

//捕获状态

div.addEventListener('click',function(eve){

console.log('div:'+eve.eventPhase);

},true)

document.body.addEventListener('click',function(eve){

console.log('body:'+eve.eventPhase);

},true)

document.addEventListener('click',function(eve){

console.log('document:'+eve.eventPhase);

},true)

(4)target属性

描述：获取事件的真正触发者

语法：eve.target

注意：事件内部可以认为eve.target等同于this作用

例子：

var lis=document.querySelectorAll('li');

for(var i=0;i<lis.length;i++){

lis[i].onmousedown=function(eve){

//  this.className='orange';

eve.target.className='orange';

};

lis[i].onmouseup=function(eve){

// this.className='';

eve.target.className='';

}

}

(5)currentTarget 属性

描述：返回事件的监听者（当前触发者）

语法：eve.currentTarget

注意：事件在哪个节点触发，currentTarget属性就是谁

---

1.2.2 非IE下event对象方法

[1]  stopPropagation（）方法

描述：用来阻止事件从当前节点传播到下一个节点。

语法：eve.stopPropagation()

注意：ps:stopPropagation方法虽然能够阻断事件的传播，但是并不会影响同一节点上的其他事件句柄

例子：

      div1.onclick=function(eve){

      console.log('div1被点击了');

      }

      div2.onclick=function(eve){

      console.log('div2被点击了');

      eve.stopPropagation();

      }

      div2.ondblclick=function(eve){

      console.log('div2被双击了');

      }

 [2] preventDefault()方法

 描述：用来取消当前节点的默认行为(譬如超级链接的点击跳转行为)。该方法没有返回值。

 语法：eve.preventDefault()

 例子：

      var anchor=  document.querySelector('a');

      anchor.onclick=function(eve){

      eve.preventDefault();

      }

 [3] cancelable属性

描述：用来判断当前节点能否使用preventDefault方法来取消默认行为。

语法：eve.cancelable

例子：

          var anchor=  document.querySelector('a');

          anchor.onclick=function(eve){

          if(eve.cancelable){

          eve.preventDefault();

          }else{

          console.log('当前节点没有默认行为可以取消');

          }

          }