zoukankan      html  css  js  c++  java
  • DOM0、DOM2级事件

    JavaScript DOM0、DOM2级事件

    1、DOM0级事件:on+事件类型

    在html行内直接绑定,也就是通过行内js绑定的
    例如
    <span onclick="alert('1')">第一项</span>

    在js中绑定例如:

    //<span onclick="alert('2')">第一项</span>
    var Ospan=document.getElementsByTagName('span')[0];
    Ospan.onclick=function(){
    alert('1');
    }
    这样就是DOM0级事件,最明显的缺陷的地方就是,一个元素绑定相同的事件会被后者覆盖掉
    如果接触事件那么就是
    Ospan.onclick=null;

    2、DOM2级事件:

    addEventListener(events,handler,boolean),

    removeEventListener(events,handler)

    2.1、参数events是以空格间隔的事件类型,handler是事件处理程序,boolean表示是冒泡还
    是捕获,true表示捕获,flase表冒泡,默认冒泡。
    冒泡是从点击的元素开始,一直向上扩散事件,类似水中的气泡,从水中一直向上走,,最后到了document;
    捕获是从点击的元素一直向里查找,找到该元素的包含最深的元素
    DOM2级绑定事件不会覆盖自身,和DOM0级也能共存;
    var Ospan=document.getElementsByTagName('span')[0];
    Ospan.onclick=function(){
    alert('1');
    }
    Ospan.addEventListener('click',function(){
    alert('5')
    },false);
    Ospan.addEventListener('click',function(){
    alert('6')
    },false)
    以上会依次输出:1,5,6

    DOM2事件可以给未被创建的元素绑定事件,但是DOMO级事件却不行,是能给已经创建的DOM元素绑定事件

    3、解绑事件:

    3.1、DOM0级事件是将onclick属性指向一个函数,所以只需要修改onclick属性指向null即可
    
    3.2、DOM2级事件是为对象添加了监听某种事件的监听器,解绑的时候由removeEventListener
    需要指定事件的类型,和事件处理程序的名字,因此这个方法无法解绑匿名事件处理函数的事
    件。因为具体指定了事件和事件处理函数,所以同个事件类型的不同事件处理程序不相互影响。
    这样不能解除事件,
    Ospan.removeEventListener
    ('click',function(){
    alert('6')
    })

    这样才能解除事件,
    Ospan.addEventListener('click',cc,false);
    Ospan.removeEventListener
    ('click',cc);
    function cc(){
    alert('6')
    };
     
    
    
  • 相关阅读:
    list 、set 、map 粗浅性能对比分析
    利用 Windows Azure 实现“云优先”
    利用代码改变世界 #AzureDev
    openssl 加密
    openssl 加密
    tls和ssl
    tls和ssl
    从输入框获取输入,插入到文本框
    从输入框获取输入,插入到文本框
    windows expect-5.21r1b1-setup.exe 下载链接
  • 原文地址:https://www.cnblogs.com/-youth/p/6518743.html
Copyright © 2011-2022 走看看