注册事件有两种方式,分别是DOM0级DOM2级

DOM0级就是通过事件绑定的形式dom元素只能有(绑定)一个事件处理函数,他的特点是同一个元素绑定相同事件, 后面函数会覆盖前面的

绑定:

  dom.on+type = 事件处理函数

  dom.onclick = function(){} 函数里面是要执行的功能

btn.onclick = function() {
alert('hehe');
}
btn.onclick = function() {
alert('hihi');
}
        // 绑定事件兼容处理
function addEventListener(ele,eventName,callback) {
if (ele.addEventListener) {
ele.addEventListener(eventName,callback);
} else if (ele.attachEvent) {
ele.attachEvent('on' + eventName, callback);
} else {
// ele.onclick = function() {}
ele['on'+eventName] = callback;
}
}
addEventListener(btn,'click',function() {
alert('ok');
});

解除解绑:

  dom.onclick = null

DOM2级是通过事件监听的形式绑定, dom元素可以有(绑定)多个事件处理函数

绑定:

dom.addEventListener(事件字符串,回调函数,布尔值)

IE8以上: dom.addEventListener(type,fn,false)    this指向dom本身

IE8及以下:dom.attachEvent('on'+type,fn)            this指向window

        // 第一个参数是字符串 表示事件类型 不带on
// 第二个参数是事件处理函数
// 特点 同一个元素可以绑定相同的事件 不会冲突
btn.addEventListener('click',function() {
alert('123');
});
btn.addEventListener('click',function() {
alert('456');
}); btn.attachEvent('onclick',function() {
console.log(123);
});

解除绑定:

  dom.removeEventListener(type,fn,false)   IE8以上

  dom.detachEvent(‘on’+type,fn)       IE8及以下

       function fn() {
alert('good');
} btn.addEventListener('click',fn); document.querySelectorAll('button')[1].onclick = function() {
btn.removeEventListener('click',fn)
} btn.attachEvent('onclick',function() {
console.log(123);
});
document.querySelectorAll('button')[1].onclick = function() {
btn.detachEvent('onclick',fn)
}
        // 删除事件兼容处理
function removeEventListener(ele,eventName,callback) {
if (ele.removeEventListener) {
ele.removeEventListener(eventName,callback);
} else if (ele.detachEvent) {
ele.detachEvent('on' + eventName, callback);
} else {
ele['on'+eventName] = null;
}
}

DOM0于DOM2事件绑定的区别
DOM0事件绑定的原理
给当前元素的某一私有属性(onXXX)赋值的过程;(之前属性默认值是null,如果我们赋值了一个函数,就相当于绑定了一个方法)
当我们赋值成功(赋值一个函数),此时浏览器会把DOM元素和赋值的的函数建立关联,以及建立DOM元素的行为监听,当某一行为被用户触发,浏览器会把赋值的函数执行;
DOM0事件绑定的特点:
只有DOM元素天生拥有这个私有属性(onxxx事件私有属性),我们赋值的方法才叫事件绑定,否则属于设置自定义属性
移除事件绑定的时候,我们只需要赋值为null;
在DOM0事件绑定中,只能给当前元素的某一个事件行为绑定一个方法,绑定多个方法,最后一次的绑定的会替换前面绑定的
DOM2事件绑定的原理
DOM2事件绑定使用的 addEventListener/attachEvent方法都是在eventTarget这个内置类的原型上定义的,我们调用的时候,首先要通过原型链找到这个方法,然后执行完成事件绑定的效果
浏览器会给当前元素的某个事件行为开辟一个事件池(事件队列)【浏览器有一个统一的事件池,每个元素绑定的行为都放在这里,通过相关标志区分】,当我们通过 addEventListener/attachEvent进行事件绑定的时候,会把绑定的方法放在事件池中;
当元素的某一行为被触发,浏览器回到对应事件池中,把当前放在事件池的所有方法按序依次执行

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

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

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

  2. DOM1级问题与DOM2级事件

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

  3. dom0级事件和dom2级事件

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

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

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

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

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

  6. DOM0级事件处理、DOM2级事件处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  8. JavaScript 之默认行为 DOM2级,事件委托机制

    1. 事件默认行为及阻止方式    1.1 浏览器的默认行为       JavaScript事件本身所具有的属性,例如a标签的跳转,Submit按钮的提交,右键菜单,文本框的输入等.    1.2 ...

  9. javaScript——DOM1级,DOM2级,DOM3级

    DOM0,DOM2,DOM3事件处理方式区别:http://www.qdfuns.com/notes/11861/e21736a0b15bceca0dc7f76d77c2fb5a.html JS中do ...

随机推荐

  1. 【数据库】一篇文章搞掂:Oracle数据库

    PL/SQL的使用 1.安装使用 1.1.安装暂略 1.2.使用 添加环境变量 打开PL/SQL,不要登录,进入界面后,打开设置Preference 设置主目录和OCI库

  2. iview 表格 某一列中设置radio

    在iview 表格 某一列中设置radio,说白了还是要在render中添加,方法为: { title: '业务参数设置', // key: 'pyCode', align: 'center', re ...

  3. Vagrant 入门 - 配置

    原文地址 现在我们已经有了一个运行 Ubuntu 的虚拟机,并且可以在宿主机上编辑文件并自动同步到虚拟机.现在让我们安装一个 web 服务器,通过服务器访问这些文件. 可以通过 SSH 进入并安装一个 ...

  4. Vulhub搭建

    Vulhub是一个比较全面的漏洞集合,收集了近年来许多的重要漏洞,以开源的形式呈现,以docker的形式进行环境配置,提供了更简单的漏洞复现,只需要简单的命令即可实现漏洞复现. 官网  https:/ ...

  5. 通过Samba练习metasploit的使用

    文章学习利用metasploit通过Samba3.X获取metasploitable2的shell,从而去熟悉metasploit的使用. 环境: kali IP:192.168.137.133 me ...

  6. Eclipse常见版本和JDK常用版本对应关系

    Luna 4.4  JDK1.6Mars 4.5  JDK1.7             Neon 4.6  JDK1.8Oxygen 4.7 JDK1.8Photon 4.8  2019年3月

  7. spark连接hive找不到table

    Caused by: org.apache.spark.sql.catalyst.analysis.NoSuchTableException: Table or view 'xxxx' not fou ...

  8. P3191 [HNOI2007]紧急疏散EVACUATE(费用流)

    P3191 [HNOI2007]紧急疏散EVACUATE 费用流+卡常优化 我们只关心一个人通过门时的时间,在空地的行走时间可以分层维护 于是根据时间分层,到门的时候再计算代价,即代价$=$层数 每经 ...

  9. Fiddler查看IP和响应时间

    原文:Fiddler查看IP和响应时间 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/si ...

  10. matlab批量修改变量的名称

    使用matlab做实验的时候,保存的文件里面的变量名都是一样的 ,所以希望能够把变量名全部都重命名.我举个个例子,假设我一堆文件,文件名分别是gds1,gds2,gds2,-.. 但是实际上load进 ...