[Javascript] 事件Event

最新推荐文章于 2024-09-17 03:26:38 发布

LINJY6

最新推荐文章于 2024-09-17 03:26:38 发布

阅读量280

点赞数

分类专栏： Javascript 文章标签： javascript 面试事件

本文链接：https://blog.csdn.net/linjiayuqazwsx/article/details/50238457

版权

Javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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:target
IE : 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>