[Javascript] 事件Event

来源：互联网发布：js 或编辑：程序博客网时间：2024/05/21 09:58

HTML和JS之间的行为或者是交互的动作是事件实现的

(1) 事件流(冒泡捕获)

几乎Tencent ,Baidu， Meituan等公司校招面试必问的题目

Event bubbling

IE 只有冒泡事件：从最具体的事件到最不具体的事件

<html><body><div id="wrapper">  <p>jessica krystal</p></div></body></html>/*p->div->body->html*/

Event capturing

除了IE 其他都是有事件捕获: 从最不具体到最具体事件
和bubbling相反

(2) 获取事件兼容情况

兼容情况
IE和W3C做法不同所有要兼容两个不同的方法

var event=e|window.event;

var a=document.getElementsByTagName("a")[0];      a.onclick=function(e){      /*这里是兼容的体现*/      var event=e|window.event;            /*这里是兼容的体现*/      alert(event);    }

W3C和IE的属性和方法

得到事件目标W3C:targetIE : srcElement阻止冒泡W3C: stopPropagation()IE: cancelBubble

<script type="text/javascript">    var a=document.getElementsByTagName("a")[0];     /*兼容事件处理*/    function getTarget(e){      var evt=e||window.event;      return evt.srcElement||evt.target;      //evt.stopPropogation||evt.cancelBubble;阻止冒泡    }    /*兼容事件处理*/    a.onclick=function(e){      console.log(getTarget(e));    }</script>

这里写图片描述

(3) 处理事件 DOM2

[1] W3C 事件处理

三个参数:    (事件名, 函数, true-捕获 false-capture)    函数 eg: onclick onmouseover onmouseout onload.....       addEventListener() 增加事件       removeEventListener() 删除事件

 var a=document.getElementsByTagName("a")[0];      var fx=function(){      console.log(this);    }    a.addEventListener('click',fx,false);

[2] IE 事件处理

只有冒泡事件 没有捕获事件(事件名称, 函数)attachEvent()detachEvent()

[3] 兼容处理

<script type="text/javascript">    function addEvent(obj,type,fx){      //W3C      if (obj.addEventListener) {        obj.addEventListener(type,fx,false);//bubble       }else if(obj.addEvent){      //IE        obj.addEvent(type,fx);//bubble       }        }</script>

(4) 事件委托

利用Bubble 冒泡, 只制定一个，便完成所有的事情

<ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li></ul>

<script type="text/javascript">//只定义了Ul 再利用bubble 就可以实现事件委托   var obj=document.getElementsByTagName("ul")[0];   var type='click';/*兼容处理*/   var fx=function(evt){       var evt=evt||window.event;       console.log(evt.srcElement||evt.target);   }/*兼容处理*/   function addEvent(obj,type,fx){      if (obj.addEventListener) {        obj.addEventListener(type,fx,false);//bubble       }else if(obj.addEvent){        obj.addEvent(type,fx);//bubble       }        }    addEvent(obj,type,fx);</script>

W3C:

这里写图片描述

IE:

这里写图片描述

0 0

[Javascript] 事件Event

(1) 事件流(冒泡 捕获)

Event bubbling

Event capturing

(2) 获取事件 兼容情况

(3) 处理事件 DOM2

(4) 事件委托

(1) 事件流(冒泡捕获)

(2) 获取事件兼容情况