注册事件有两种方式,分别是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. scrapy xpath xpath('---').xpath('string(.)') 提取子元素全部文本

    product.xpath("div//div[@class='a-row a-spacing-mini'][1]/div[2]").xpath('string(.)')

  2. 凉经-乐糖游戏-PHP开发实习生

    收到面试通知当天因为学校出事要求我明天必须回去,所以就买当晚的火车票,然后跟公司说学校有事明天没法去面试了,公司人事比较好给我安排到当天下午面试.公司规模不是很大,但位置好下了地铁到,可能因为招的是实 ...

  3. MySQL 导入导出 CSV 文件

    导入 导出 清空表中的所有数据 注意事项 常见问题 ERROR 1290 (HY000): The MySQL server is running with the --secure-file-pri ...

  4. nacos 报错is not in serverlist

    描述 nacos 没有在节点列表里面 查看日志 cd /opt/nacos/ tailf /logs/naming-raft.log <!--报错--> 2019-08-16 17:48: ...

  5. (转载)如何在 Github 上发现优秀的开源项目?

    转载自:传送门 之前发过一系列有关 GitHub 的文章,有同学问了,GitHub 我大概了解了,Git 也差不多会使用了,但是还是搞不清 GitHub 如何帮助我的工作,怎么提升我的工作效率? 问到 ...

  6. Java thread(1)

    这一部分主要讨论 java多线程的基本相关概念以及两种java线程的实现方式: 线程与进程: 这个操作系统书上介绍得很详细,这里就列出一些比较主要的: 线程: 线程本身有很少的资源,因为所拥有的资源较 ...

  7. JDK8之ArrayList源码

    ArrayList三个构造器 /** * Default initial capacity. */ private static final int DEFAULT_CAPACITY = 10; // ...

  8. C# 字符串的拆分

    string str = "ABCD"; char[] strCharArr = str.ToCharArray(); //结果 //strCharArr[0]='A', //st ...

  9. NavBarControl控件 2015-07-23 16:56 2人阅读 评论(0) 收藏

    NavBarControl控件 1.      新建一个windows窗体应用程序项目 2.      在工具箱中的Navigation& Layout选项卡下找到NavBarControl, ...

  10. VS Code的使用

    之前一直使用的是WebStorm来学习web前端开发,最近开始使用VSCode,很多方面和WebStorm不一样,需要一段时间适应,以下是我初次使用VSCode进行web前端开发学习所遇到的一些问题以 ...