JavaScript DOM0、DOM2级事件

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

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

2、DOM2级事件:

addEventListener(events,handler,boolean),

removeEventListener(events,handler)

  1. 2.1、参数events是以空格间隔的事件类型,handler是事件处理程序,boolean表示是冒泡还
  2. 是捕获,true表示捕获,flase表冒泡,默认冒泡。
    冒泡是从点击的元素开始,一直向上扩散事件,类似水中的气泡,从水中一直向上走,,最后到了document
    捕获是从点击的元素一直向里查找,找到该元素的包含最深的元素
  3. DOM2级绑定事件不会覆盖自身,和DOM0级也能共存;
  1. 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
  2. DOM2事件可以给未被创建的元素绑定事件,但是DOMO级事件却不行,是能给已经创建的DOM元素绑定事件

3、解绑事件:

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

DOM0、DOM2级事件的更多相关文章

  1. dom0级事件和dom2级事件

    dom0级事件 <a href="#" id="hash" onclick="fn();fn1();"> <button ...

  2. 测试DOM0级事件和DOM2级事件的堆叠

    1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { ...

  3. 【20190226】JavaScript-知识点记录:dom0级事件,dom2级事件

    DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行 ...

  4. 关于DOM事件流、DOM0级事件与DOM2级事件

    一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...

  5. DOM1级问题与DOM2级事件

    前几天有小伙伴问过我一个问题,为什么有DOM 0级事件以及DOM2级事件,但是却没有DOM1级事件呢?那我们今天就来说一说DOM的级别问题. 同时推荐伙伴们可以看看尚学堂有关JavaScript BO ...

  6. 关于DOM2级事件的事件捕获和事件冒泡

    DOM2级事件中addEventListener的执行机制,多个addEventListener同时添加时的执行先后规律: W3C的DOM事件触发分为三个阶段:①.事件捕获阶段,即由最顶层元素(一般是 ...

  7. 事件流程以及dom2级事件绑定

    事件流程分为三个阶段:捕获阶段.目标阶段.冒泡阶段. 捕获阶段:事件从最顶层元素开始执行,一层层往下,直到精确元素. 目标阶段:事件在精确元素上执行. 冒泡阶段:事件从精确元素开始执行,一层层往上,直 ...

  8. 2015-03-12——简析DOM2级事件

    DOM2级事件 事件的几种类型:对象事件,鼠标事件,键盘事件,表单事件,W3CDOM事件,以及针对浏览器的事件. 对象事件:window对象,也是javascript对象.load  适用于windo ...

  9. JS事件委托(事件代理,dom2级事件)

    一.前言 说实话,真问我什么是事件委托,我肯定gg,还好查了一下,原来就是我之前练习过的DOM2级事件的应用. 二.什么是事件委托? 事件委托就是当事件触发时,把要做的事委托给父元素(或父元素的父元素 ...

随机推荐

  1. Congruent Matrices

    http://mathworld.wolfram.com/CongruentMatrices.html Two square matrices  and  are called congruent i ...

  2. 5 Maven生命周期和插件

        命令行的输入往往就对应了声明周期,Maven的生命周期是抽象的,其实际行为都是由插件来完成.生命周期和插件两者协同工作,密不可分. 一.何为声明周期     Maven的生命周期就是为了对多有 ...

  3. 20170316 ABAP注意点

    1.debug 时在MODIFY db from table 后数据便提交了: 一般情况下,更新数据库需要commit,但debug会自动commit,程序结束也会自动commit. 2.使用at n ...

  4. php遍历统计文件目录和文件

    function total($dirname, &$dirnum, &$filenum){ $dir=opendir($dirname); readdir($dir)."& ...

  5. Windows程序设计(0)——编程之前

    Windows程序设计之前 1 做什么 2 解决什么问题 3 有哪些资源 在开始真正的编程之前,需要了解要做的事情是什么,要解决的解决的问题是什么,有哪些资源可以使用. 1 Windows程序设计之前 ...

  6. bzoj5259: [Cerc2017]区间

    还是很强的一个题 ORZ肉丝哥哥 对于两个相交区间,假如他们两个都是可行的,那么他们的交也可行,不然没可能两边都把它缺的补上 那么对于答案区间,向右找到第一个可行区间右端点覆盖询问区间,就是最优的 考 ...

  7. Codeforces Round #363 (Div. 2) C. Vacations —— DP

    题目链接:http://codeforces.com/contest/699/problem/C 题解: 1.可知每天有三个状态:1.contest ,2.gym,3.rest. 2.所以设dp[i] ...

  8. VS2010关于调用ffmpeg借口出错

    win7 下开发视频服务器,用到ffmpeg,debug版本运行正常,切换到release时,出现"0x00905a4d 处未处理的异常: 0xC0000005: 读取位置 0x00905a ...

  9. error MSB6006: “CL.exe”已退出,代码为 -1073741502。

    错误1error MSB6006: “CL.exe”已退出,代码为 -1073741502.C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\Plat ...

  10. 对xml文件的sax解析(增删改查)之二

    先上代码: package com.saxparsetest; //the filename of this file is :saxparse.java import javax.xml.parse ...