js DOM0级事件和DOM2级事件
注册事件有两种方式,分别是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级事件的更多相关文章
- 测试DOM0级事件和DOM2级事件的堆叠
1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { ...
- DOM1级问题与DOM2级事件
前几天有小伙伴问过我一个问题,为什么有DOM 0级事件以及DOM2级事件,但是却没有DOM1级事件呢?那我们今天就来说一说DOM的级别问题. 同时推荐伙伴们可以看看尚学堂有关JavaScript BO ...
- dom0级事件和dom2级事件
dom0级事件 <a href="#" id="hash" onclick="fn();fn1();"> <button ...
- 关于DOM事件流、DOM0级事件与DOM2级事件
一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...
- 【20190226】JavaScript-知识点记录:dom0级事件,dom2级事件
DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行 ...
- DOM0级事件处理、DOM2级事件处理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 关于DOM2级事件的事件捕获和事件冒泡
DOM2级事件中addEventListener的执行机制,多个addEventListener同时添加时的执行先后规律: W3C的DOM事件触发分为三个阶段:①.事件捕获阶段,即由最顶层元素(一般是 ...
- JavaScript 之默认行为 DOM2级,事件委托机制
1. 事件默认行为及阻止方式 1.1 浏览器的默认行为 JavaScript事件本身所具有的属性,例如a标签的跳转,Submit按钮的提交,右键菜单,文本框的输入等. 1.2 ...
- javaScript——DOM1级,DOM2级,DOM3级
DOM0,DOM2,DOM3事件处理方式区别:http://www.qdfuns.com/notes/11861/e21736a0b15bceca0dc7f76d77c2fb5a.html JS中do ...
随机推荐
- 【数据库】一篇文章搞掂:Oracle数据库
PL/SQL的使用 1.安装使用 1.1.安装暂略 1.2.使用 添加环境变量 打开PL/SQL,不要登录,进入界面后,打开设置Preference 设置主目录和OCI库
- iview 表格 某一列中设置radio
在iview 表格 某一列中设置radio,说白了还是要在render中添加,方法为: { title: '业务参数设置', // key: 'pyCode', align: 'center', re ...
- Vagrant 入门 - 配置
原文地址 现在我们已经有了一个运行 Ubuntu 的虚拟机,并且可以在宿主机上编辑文件并自动同步到虚拟机.现在让我们安装一个 web 服务器,通过服务器访问这些文件. 可以通过 SSH 进入并安装一个 ...
- Vulhub搭建
Vulhub是一个比较全面的漏洞集合,收集了近年来许多的重要漏洞,以开源的形式呈现,以docker的形式进行环境配置,提供了更简单的漏洞复现,只需要简单的命令即可实现漏洞复现. 官网 https:/ ...
- 通过Samba练习metasploit的使用
文章学习利用metasploit通过Samba3.X获取metasploitable2的shell,从而去熟悉metasploit的使用. 环境: kali IP:192.168.137.133 me ...
- Eclipse常见版本和JDK常用版本对应关系
Luna 4.4 JDK1.6Mars 4.5 JDK1.7 Neon 4.6 JDK1.8Oxygen 4.7 JDK1.8Photon 4.8 2019年3月
- spark连接hive找不到table
Caused by: org.apache.spark.sql.catalyst.analysis.NoSuchTableException: Table or view 'xxxx' not fou ...
- P3191 [HNOI2007]紧急疏散EVACUATE(费用流)
P3191 [HNOI2007]紧急疏散EVACUATE 费用流+卡常优化 我们只关心一个人通过门时的时间,在空地的行走时间可以分层维护 于是根据时间分层,到门的时候再计算代价,即代价$=$层数 每经 ...
- Fiddler查看IP和响应时间
原文:Fiddler查看IP和响应时间 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/si ...
- matlab批量修改变量的名称
使用matlab做实验的时候,保存的文件里面的变量名都是一样的 ,所以希望能够把变量名全部都重命名.我举个个例子,假设我一堆文件,文件名分别是gds1,gds2,gds2,-.. 但是实际上load进 ...