zoukankan      html  css  js  c++  java
  • js跨浏览器事件对象、事件处理程序

    项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样;
    这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:
    var EventUtil={
    //节点、事件名、事件处理函数
    addHanler:function(element,type,handler){
    if(element.addEventListener){
    element.addEventListener(type,handler,false);//这里一个参数为false意为在事件冒泡阶段调用事件处理程序,true为事件捕获阶段调用
    }
    else if(element.attachEvent)
    {
    element.attachEvent("on"+type,handler);//IE8及以下只支持事件冒泡
    }
    else{
    element["on"+type]=handler;//DOM0级对每个事件只支持一个事件处理程序
    }
    }
    RemoveHanler:function(element,type,handler){
    if(element.RemoveEventListener){
    element.RemoveEventListener(type,handler,false);
    }
    else if(element.detachEvent)
    {
    element.detachEvent("on"+type,handler);
    }
    else{
    element["on"+type]=null;//移除
    }
    }
    //返回对event对象的引用
    getEvent:function(event){
    return event?event:window.event;
    }
    //返回事件目标
    getTarget:function(event){
    return event.target||envet.srcElement;
    }
    //取消事件默认行为
    preventDefault:function(event){
    if(event.preventDefault){
    event.preventDefault();
    }
    else{
    event.returnVlaue=false;
    }
    }
    //阻止事件流
    stopPropagation:function(event){
    if(event.stopPropagation){
    event.stopPropagation();
    }
    else{
    event.cancleBubble=true;
    }
    }
    }

  • 相关阅读:
    这仅仅是一份工作
    和老总之间的对话
    假设满足怎样的条件,就不去编程
    那都是别人的架构
    程序员狂想曲
    学点经济学知识(三)
    一起来看 HTML 5.2 中新的原生元素 <dialog>
    动态配置页面 之 组件系统
    初识JavaScript EventLoop
    webpack+vue-cli+ElementUI+vue-resource 前端开发
  • 原文地址:https://www.cnblogs.com/zoujking/p/4175901.html
Copyright © 2011-2022 走看看