【面试】手写原生js实现事件代理,并兼容浏览器

25 篇文章 0 订阅

emmm....我竟然大半晚上的来更新,惊喜不惊喜,意外不意外,好了,废话不多说,写了好久,看看怎么实现手写原生JS实现事件代理。

<ul id="ulList">
  <li><a href="">Click Me</a></li>
  <li><a href="">Click Me</a></li>
  <li><a href="">Click Me</a></li>
</ul>
function delegateEvent(interfaceEle,selector,type,fn){
  if(interfaceEle.addEventListener){
    interfaceEle.addEventListener(type,eventCallback);
  }else{
    interfaceEle.attachEvent("on" + type,eventCallback);
  }
  function eventCallback(e){
    var e = e || window.e;
    var target = e.target || e.srcElement;
    if(matchSelector(target,selector)){
      if(fn){
        fn.call(target,e);
      }
    }
  }
}

function matchSelector(ele,selector){
  //传递ID
  if(selector.charAt(0) === '#'){
    return ele.id === selector.slice(1);
  }
 //传递class
  if(selector.charAt(0) === "."){
    return (ele.className + " ").indexOf(selector.slice(1) +" ")!=-1;
  }
 //传递tagName
  return ele.tagName.toLowerCase() === selector.toLowerCase();
}

var ul = document.getElementById("ulList");
delegateEvent(ul,"a","click",function(){
  alert("click trigger!");
})

以上代码就是实现题目的问题啦,亲自测试有效。

补充一点题外话:

JS的事件是很重要的一个专题模块,主要有IE和W3C两套事件触发机制,不过在DOM2级中已经统一了。当我们点击一个元素时,不仅点击了当前元素,也点击了它的父元素,祖父元素,以及整个页面。不同的浏览器对事件流的定义不一样。

IE认为,事件是先在具体元素上,然后逐级向上冒泡到document,称为冒泡事件

Netscape认为,事件先到document,然后向下层层传递。称为捕获事件

在DOM2级统一后,事件分为,捕获阶段->目标阶段->冒泡阶段。

之后几天将重读JS高程的事件模块,会继续补充。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值