zoukankan      html  css  js  c++  java
  • dom事件类

    DOM类的相关信息

    1. 基本概念:DOM事件级别
    2. dom事件模型
    3. dom事件流
    4. 描述dom事件捕获的具体流程
    5. Event对象的常见应用
    6. 自定义事件经

    一、DOM事件级别(DOM标准定义的级别)

    DOM0   element.onclick = function(){}

    DOM2   element.addEventListener('click',function(){},false)       ie中:btn.attachEvent('onclick',handler); function handler(e){ alert(this); // window }

    DOM2   element.addEventListener('keyup',function(){},false)     用法和上面的一样,只不过dom3中多加了一些鼠标和键盘事件。

    二、DOM事件模型

    事件模型分为:捕获和冒泡

    三、事件流

    DOM2级事件规定的事件流的三个阶段:捕获,目标,冒泡(IE8以及更早版本不支持DOM事件流); 

    四、事件捕获的具体流程

    捕获流程:windonw  ------>  document ------------->html  ---------->body  ---------->....   -------------->目标元素

    冒泡流程:目标元素  ---------->  body  ---------->  html  ----------> document   ----------> windonw  

    五、Event对象的常见应用

    event.preventDefault();//阻止默认行为
    
    event.stopPropagation();//阻止冒泡流
    
    event.stopImmediatePropagation();//一个控件上定义多个事件,在前面的事件中调用这个事件,会阻止后台的事件执行
    
    event.currentTarget();  //监听事件的元素
    
    event.target();//获取当前被点击的元素,ie中用的是srcElement

    能过这个以中延伸一个场景:事件委托

    事件委托:用事件委托技术能让你避免对特定的每个节点添加事件监听器;相反,事件监听器是被添加到它们的父元素上,利用冒泡的原理,把事件加到父级上,触发执行效果。

    </span><ul id="parent-list">
      </span><li id="post-1">Item 1</span></li>
      </span><li id="post-2">Item 2</span></li>
     </span><li id="post-3">Item 3</span></li>
      </span><li id="post-4">Item 4</span></li>
      </span><li id="post-5">Item 5</span></li>
      </span><li id="post-6">Item 6</span></li>
    </span></ul>
    function getEventTarget(e) {
      e = e || window.event;
      return e.target || e.srcElement;
    }
    
    // 获取父节点,并为它添加一个click事件
    document.getElementById_x("parent-list").addEventListener("click",function(e) {
      // 检查事件源e.targe是否为Li
        var target = getEventTarget(e);
       if(target && target .nodeName.toUpperCase == "LI") {
    
        // 真正的处理过程在这里
        console.log("List item ",e.target.id.replace("post-")," was clicked!");
      }
    });

    优点

    通过上面的介绍,大家应该能够体会到使用事件委托对于web应用程序带来的几个优点:
    1.可以大量节省内存占用,减少事件注册。
    2.可以方便地动态添加和修改元素,不需要因为元素的改动而修改事件绑定。
    3.JavaScript和DOM节点之间的关联变少了,这样也就减少了因循环引用而带来的内存泄漏发生的概率。

    缺点

    不是所有的事件都能冒泡的。blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得(在IE之外的其它浏览器中)。
    在管理鼠标事件的时候有些需要注意的地方。如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了,因为mousemove事件触发非常频繁。而mouseout则因为其怪异的表现而变得很难用事件代理来管理。

     六、自定义事件

    var EventTarget = function(argument) {
       this._listener = {};
    }
    
    EventTarget.prototype = {
        constructor: this,
        addEvent: function(type,fn){
            if(typeof type === "string" && typeof fn==="function"){
                this._listener[type] = [fn];
            }else{
                this._listener.push(fn);
            }
        },
        fireEvent:function(type){
            var events = {
                type:type,
                target: this
            }
            if(type && this._listener[type]){
                for (var length = this._listener[type].length,start= 0;start<length;start++) {
                    this._listener[type][start].call(this,events);
                }
            }
        },
        removeEvent:function(type){
            var listeners = this._listener[type];
            if(listeners instanceof Array){
               delete this._listener[type]
            }
            return this;
        }
    }

    对它的使用是

    //------------- 以下为测试代码 --------

    var myEvents = new EventTarget();
    myEvents.addEvent(
        "once", function(a,b,c) {
            console.log(a)  
             console.log(b)  
              console.log(c)  
            this.removeEvent("once");
        
    });
    
    document.onclick = function(e) {
        e = e || window.event;
        var target = e.target || e.srcElement;
        if (!target || !/input|pre/i.test(target.tagName)) {
            myEvents.fireEvent("once");
        }
    };

     还有一种办法,但是兼容性不是特别好

    var event_ = new Event('myEvent');
    element.addEventListener('myEvent',function(){
         console.log("....") 
    })
    
    element.dispatchEvent(event_);

    参考 :http://www.zhangxinxu.com/study/201203/js-custom-events-prototypal.html

  • 相关阅读:
    ERROR 1406 : Data too long for column 解决办法
    Sublime配置Python编译环境
    python下载包的时候,如何选择是win32,还是amd64的,其中的cp又是什么意思?
    曝光一个网站,我周末就耗在上面了。(学习)
    Matlab 画图时中文显示乱码的问题?(设置为“桌面代码”修改时区后还是乱码使用这个方法)
    什么是前端和后端开发,看完你就知道了
    彻底卸载mysql 个人亲测!
    python语言的优缺点
    阿里云、华为云和腾讯云等多家物联网平台的异同
    nfs Read only system 问题解决 + NFS 安装
  • 原文地址:https://www.cnblogs.com/myzy/p/7472979.html
Copyright © 2011-2022 走看看