\ 经验分享
事件委托（代理），DOM0级事件绑定，DOM2级事件绑定
事件传播3个阶段：
（1）第一个阶段当我们点击里面元素的时候，浏览器会从最外面的window元素依次往里查找html结构，查找到目标源；
（2）目标阶段
（3）当前元素的点击行为触发，按照捕获的阶段从里往外执行元素绑定的方法，这种dom0级绑定的方法，只有在冒泡传播的时候才会被触发，目标阶段和捕获阶段不会触发任何方法，这些绑定的方法和捕获，目标阶段没有任何关系；
curele.addEventListener(type,callback,false)
curele.attchEvent(on+type,callback)只有冒泡行为所以我们不使用捕获行为事件传播；
事件代理：
事件委托：利用事件冒泡传播的机制，因为我们点击元素都有向上传播的机制，标准浏览器会传播window，父元素都绑定是事件，只是我们没有触发事件，没有绑定对应的方法；所以我们没必要给所有的子元素都绑定方法，我们只需要给当前的父元素绑定一个方法，利用事件传播的机制阶段，先捕获找到目标源，触发事件，无论我们点击那个子元素都会触发我们的绑定的父元素，都会触发我们绑定在父元素上的方法，我们点击绑定元素里面的子元素，都传播到外面的父元素，从而触发父元素绑定的方法；
（1）利用事件冒泡传播机制，我们给最外层容器绑定一个方法，里面的后台元素不在绑定方法，我们操作的后台元素也会传播到最外层的元素上，我们通过事件源来做不同的操作；
（2）delegate：事件委托给指定我们给定的元素；
parent.delegate('ele','click',function(){}) 我们不用使用e.target来找当前元素，ele就是我们的this，当前元素；
（3）在之前我们学习当中，我们给一个元素绑定一个方法，ele.onclick = fn
DOM0级事件绑定:
（0）原理：给当前元素的某一个私有属性赋值的操作，付的是一个函数，当后期我们触发相关的行为后，浏览器会把之前的赋值函数执行；ele.onclick = fn
（1）只有在当前元素私有的属性中出现的事件属性，我们才可以绑定。没有出现的绑定不了，如DOMContentLoaded事件在元素的私有属性不存在，所以不能用DOM0为其绑定方法；
（2）DOM0事件绑定给当前元素私有的属性绑定一个方法，后面绑定的方法会把前面的方法都替换掉，只保留最后一个函数的引用地址；
（3）性能比dom2好一些，因为只查找私有的属性进行赋值，
DOM2级事件绑定
（1）标准浏览器，addEventListener
/ removeEventListenner
ele.addEventListenner('type',callback,方法阶段执行（false冒泡，true捕获阶段）)
1.dom2级事件绑定绑定的方法重复，浏览器会把后面相同的方法把前面的覆盖，值保留一个函数；
2.执行的顺序是按照绑定的顺序执行；
3.方法中的this是当前元素；
（2） 非标准浏览器： attachEvent / detachE
ele.attchEvent(on+type,callback),callback里面没有e事件对象，我们使用window.event
1.浏览器不会自动去重；绑定重复的函数都会执行，执行的都是最后一个函数把前面的函数重复的函数覆盖，向事件池添加的时候低版本浏览器没有检测添加的方法；
2.方法中的顺序是混乱的；
3. this是window，
dom2和dom0级事件绑定区别
（1）原理：dom2和dom0不一样，用它做事件绑定，是给当前元素的某个事件行为开辟了一个事件池；（浏览器会自动开辟一个容器，把dom2绑定的方法一次存在事件池中），当行为触发，会把我们池子里面绑定的方法依次执行；
（2）方法中的this是当前元素
（3）dom2中可以给我们的元素绑定多个方法；
dom0是给当前私有的属性赋一个值，只能绑定一个值；
dom2是给当前元素的某个行为事件开辟了一个事件池，绑定很多方法；
DOM2移除事件绑定
dom2绑定是吧方法放在指定的事件池中，移除方法也是从事件池移除，移除需要知道 移除的那个方法，执行函数名，所以我们不能使用匿名函数来绑定事件名；
dom0级事件不需要区别绑定函数名，因为dom0级绑定事件只能绑定一个函数，给当前元素私有的属性赋值一个函数，如果想移除我们可以当前元素赋值为null；
$(document).reay() 和window.onload区别
$(document).reay()使用的是是dom2级事件绑定，所以绑定多次，jq中的事件都是dom2事件绑定来完成的，reay方法执行是DOMContenLoaded事件
$(document).reay()是dom元素加载完成后执行$(document).reay()方法，
window.onload：事件本身就是所有的资源加载成功才能执行，我们使用的dom0级事件绑定，所以只能绑定一次；
若觉得本文不错，就分享一下吧！
作者的热门手记
请登录后，发表评论
评论加载中...
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-11DOM事件级别
一、HTML事件处理程序，在html中的写法： input type="button" onclick=""或者input
type="button" onclick="hello()"。缺点是html和js代码紧密的耦合在一起，不利于修改维护，修改的时候可能需要更改多处。不能给元素添加多个事件处理程序，如果有多个，只会运行第一个。
如果不想要事件处理程序了，必须从html代码中删除事件处理代码。
—————————————————————————————————————————————————
二、DOM0级事件处理程序
在js中的写法：element.onclick=function(){}，或者element.onclick=btnclick。是一种比较传统的方式：把一个函数(或者匿名函数)赋值给一个事件的处理程序属性。优点：简单，跨浏览器的优势（兼容所有浏览器）。
缺点：不能给元素添加多个事件处理程序，只能添加一个，如果添加多个事件处理程序，后面的会覆盖前面的。
如果不想要事件处理程序了，我们可以在下面写成element.onclick=DOM0级删掉已有事件的方法都可以这么写，这样的删除事件的方式只能删除DOM0添加的事件。
注意：是把一个函数赋值给一个事件的处理程序属性，一定不能把函数执行赋值给事件处理程序属性，即不能加()。
—————————————————————————————————————————————————
三、DOM1级主要隐射文档没有事件
DOM1级有DOM Core和DOM
HTML组成，前者针对XML文档后者针对HTML文档，DOM1级主要是隐射文档结构。制定的时候没有制定事件上的东西，
—————————————————————————————————————————————————
四、DOM2级事件处理程序，定义了两个方法，在js中的写法：&
添加事件：element.addEventListener('click',function(){},false)//false指的是冒泡，早期浏览器都支持冒泡，为了兼容基本上最后一个参数都是false
删除事件：element.removeEventListener('click',function(){},false)，这样的删除方式只能删除DOM2级添加的事件。删除的时候传递的参数必须跟添加时传递的参数一样才能正确删除事件。
优点，可以给元素添加多个事件处理程序，这些事件处理程序按照他们的顺序执行。
注意：所有的on都必须去掉，所有的onclick都是需要写成click。
如果把方法封装一下，并且把代理也加上，代码如下：
注意：DOM2级事件处理程序，函数里面也可以直接用this，this代表的是点击的按钮，比如里面可以写this。value等。
有代理的话用第一种，没有代理用第二种（代理指的就是冒泡里面用的上一级代理）
代理的两个优点：
1）代码比较简洁，绑定一次事件就可以了，不用绑定很多次
2）给浏览器的压力比较小，在页面上执行一堆js和在页面上执行一两句js，对浏览器的压力是不一样的，效率会高一些。
IE事件处理程序，IE不支持addEventListener()和removeEventListener()，但是他有两个类似于addEventListener()和removeEventListener()的方法是attachEvent()和detachEvent()，在js中的写法：
添加事件：element.attachEvent('onclick',function(){})
删除事件：element.&detachEvent('onclick',function(){})
注意，IE事件处理程序没有第三个参数，因为IE早期版本只支持事件冒泡，所以默认就是事件冒泡。
注意：在IE事件处理程序中所有的on不能去掉，所有的onclick还需要写成onclick。
跨浏览器的事件处理程序（用能力检测）参考http://www.imooc.com/video/2138
element.onclick===element['onclick']//true
—————————————————————————————————————————————————
DOM3级事件处理程序，在js中的写法：
&element.addEventListener('keyup',function(){},false)//DOM3级事件处理跟DOM2级事件处理方法一样，就是增加了许多事件类型，包括鼠标事件，键盘事件。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。DOM2级事件 - 简书
DOM2级事件
使用D0M2事件绑定其实是让box通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法实现的。
DOM0级事件绑定: 只能给一个元素的某一个行为绑定一次方法，第二次绑定的会把前面的覆盖掉。
box.onclick = function () {
console.log(1); // 不输出
box.onclick = function () {
console.log(2); // 输出
DOM2: 可以给某一个元素的同一个行为绑定不同的方法。
box.addEventListener('click', function () {
console.log(1); // 输出
}, false);
box.addEventListener('click', function () {
console.log(2); // 输出
}, false);
DOM2: DOM0中的行为类型，用DOM2一样可以绑定；而且DOM2中还提供了一些DOM0没有的事件类型 -& DOMContentLoaded: 当页面中的DOM结构或者HTML结构加载完成触发的行为。
document.addEventListener('DOMContentLoaded', function () {
}, false);
window.onload = function() { ... }-& 当页面中的所有资源都加载完成(图片、HTML结构、音视频...)才会执行后面的函数；并且在一个页面中只能用一次，后面再写会把前面的覆盖掉。因为它是采用DOM0事件绑定，所以只能绑定一次。
jQuery: $(document).ready(function() {...}); -& $(function() {...});只要当页面中的HTML结构加载完成就会执行对应的函数；并且在同一个页面中可以出现多次。使用的是DOM2事件绑定，并且绑定的行为是DOM2中新增加的那个DOMContentLoaded。
window.addEventListener('load', function () { }, false);
window.addEventListener('load', function () { }, false);
DOM2事件移除
移除的时候要保证三个参数: 行为、方法、哪个阶段发生，一个都不能差。在使用DOM2绑定的时候，一般给它绑定的是实名函数。
function fn1(e) {
console.log(this);
box.addEventListener('click', fn1, false);
box.removeEventListener('click', fn1, false);
只能给某个元素的同一个行为绑定多个"不同"的方法，如果方法相同了，只能留一个。当行为触发，会按照绑定的先后顺序依次把绑定的方法执行。执行的方法中的this是当前被绑定事件元素本身。
function fn1() { console.log(1); }
function fn2() { console.log(2); }
function fn3() { console.log(3); }
function fn4() { console.log(4); }
function fn5() { console.log(5); }
function fn6() { console.log(6); }
function fn7() { console.log(7); }
box.addEventListener('click', fn1, false);
box.addEventListener('click', fn2, false);
box.addEventListener('click', fn3, false);
在IE6-8浏览器下，不支持addEventListener/ removeEventListener,如果想要实现DOM2事件绑定，只能使用attachEvent/detachEvent。它只有两个参数，不能像addEventListener那样控制在哪个阶段发生，默认只能在冒泡阶段发生。行为需要添加 "on",和DOM0特别类似。
box.attachEvent('onclick', fn1);
box.attachEvent('onclick', fn2);
box.attachEvent('onclick', fn3);
和标准浏览器的事件池机制对比:
顺序问题: 执行时顺序是混乱的，标准浏览器是按照绑定顺序依次执行的。
重复问题: IE6-8中可以给同一个元素的同一个行为绑定多个相同的方法。
this问题: IE6-8中当方法执行的时候，方法中的this不是当前的元素box，而是window。
前言 事件处理程式平时用得多了，但是少有归纳，都是经验积累。 DOM0级 这种事件处理程式在第四代web浏览器出现，为所有浏览器支持。每个元素都有相应的事件处理程式属性，例如onclick，通过将事件函数引用赋值给事件处理程式属性绑定事件。 通过文档对象（document）...
表单事件、DOM0级和DOM2级事件、事件传递、拖拽效果 一、表单事件 1、表单事件焦点事件:focus input.onfocus=function(){
//让输入框的outline消失
this.tyle.outline=&none&;
DOM(Document Object Model，文档对象模型)是针对HTML文档和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移出和修改页面的某一部分，DOM脱胎于Netscape及微软公司创始的DHTML（动态HTML）。但现在它已经成为...
声明：本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下（原文格式看的我眼睛疼） javascript中的事件 javascript程序使用的是事件驱动的设计模式，为一个元素添加事件监听函数，当这个元素的相应事件被触发...
“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作： addEventListener() 和 removeEventListener()。所有DOM节点中都包含这两种方法，并且他们都接受3个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值。最后...
万营现场 | “何以素千叠—艺术家案例研究系列（第二回）”盛大开幕菲菲 海报设计 | 菜花先生 9月16日，“何以素千叠——艺术家案例研究系列（第二回）”展览在万营艺术空间隆重拉开帷幕。本次展览由万营艺术空间艺术总监郑妍女士担任策展人，此次展览邀请了邬建安与李洪波两位重要艺...
今天中午学生就放寒假了！正月十七开学。 家长一定要帮助学生制定好假期学习计划。我给大家提几点建议: 首先思想上这一个月的假期很重要，若能充分利用好，将会起很大的作用，为明年春天的学习打下坚实的基础。反之，浪费了这一月，则会落下许多。这两种态度，将会拉出两倍的距离。因为明年春...
曾经青葱的年纪 摹绘美好的幻想 想在最美的时光 有最想要的爱人 育最可爱的稚儿 在绚澜的生命里 做喜欢做的事情 研磨精致的生活 瑰丽斑驳的光影之处 细数经年流溢的痕迹 梦想跌落残忍的碎片里 却被鞭挞出噬血的轮廓 从来不曾想要跌宕回环 却连平静安宁都是奢侈 无数的日日夜夜里 ...
光华路很好找，穿过科技路的繁忙和行色匆匆的高新路，远远瞥见一条步履轻松的街巷，它就到了。 这条不长不短的老街，涵盖了生活在老西安从出生到长大的生活节奏。西电幼儿园、西电附小、西电附中、西安市五十三中还有我们那树木葱葱郁郁的西电。 在每天都不一样的西安，光华路就如同被相机按下...
医院是距离死亡最近的地方。
生命里所有的相遇陪伴，终有截止的一天。所以就算生活里有些不愉快，也真的不必计较。
第一天来高干老年病房上班时，有位家属问我：“你怎么不去对面的产科，在那里每天可以接触到新生命，面对可爱的婴儿，内心也会变得柔软起来……”听着听着，...带你深入理解DOM0级事件处理程序！！！ - 简书
带你深入理解DOM0级事件处理程序！！！
DOM0级事件处理程序通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方法是在第四代Web浏览器中出现的，而且至今仍然为所有现代浏览器所支持。原因一是简单，二是具有跨浏览器的优势。要使用JavaScript指定事件处理程序，首先必须取得一个要操作的对象的引用。每个元素（包括window和document）都有自己的事件处理程序属性，这些属性通常全部小写，例如
onclick 。将这种属性的值设置为一个函数，就可以指定事件处理程序，如下所示：var btn = document.getElementById("myBtn");btn.onclick = function(){alert("Clicked");};在此，我们通过文档对象取得了一个按钮的引用，然后为它指定了onclick事件处理程序。但要注意，在这些代码运行以前不会指定事件处理程序，因此如果这些代码在页面中位于按钮后面，就有可能在一段时间内怎么单击都没有反应。使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在元素的作用域中运行；换句话说，程序中的this
引用当前元素。来看一个例子。var btn = document.getElementById("myBtn");btn.onclick = function(){alert(this.id);
//"myBtn"};单击按钮显示的是元素的ID，这个ID是通过this.id取得的。不仅仅是ID，实际上可以在事件处理程序中通过this访问元素的任何属性和方法。以这种方式添加的事件处理程序会在事件流的冒泡事件处理程序阶段被处理。也可以删除通过DOM0级方法指定的事件处理程序，只要像下面这样将事件处理程序属性的值设置为null即可：btn.onclick =
//删除事件处理程序将事件处理程序设置为null之后，再单击按钮将不会有任何动作发生。提示：如果你使用HTML指定事件处理程序，那么onclick属性的值就是一个包含着在同名HTML特性中指定的代码的函数。而将相应的属性设置为null，也可以删除以这种方式指定的事件处理程序。本文由web前端精髓为您提供
更多精彩内容，敬请关注微信公众号: Web前端精髓
声明：本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下（原文格式看的我眼睛疼） javascript中的事件 javascript程序使用的是事件驱动的设计模式，为一个元素添加事件监听函数，当这个元素的相应事件被触发...
一、问答 1. dom对象的innerText和innerHTML有什么区别？ innerHTML： 也就是从对象的起始位置到终止位置的全部内容,包括Html标签。 innerHTML： 从起始位置到终止位置的内容, 但它去除Html标签 。 2. elem.childre...
DOM DOM节点 DOM的概念 DOM是文档对象模型（Document Object Model）的简称，它的基本思想是把结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口...
简单理解事件是用户或浏览器自身执行的某种动作。诸如click、load而事件处理程序则是响应某个事件的函数。诸如onclick、onload也就是当用户与页面上某个元素进行某种交互（click）时，会执行事件处理程序内（onclick）的函数。如果没有为这个元素设立事件处理...
1.事件代理 事件代理:为子元素添加监听器转变为为父容器添加监听器,然后通过event.target判断具体操作的元素 事件的传递是和文档结构有关的 1.DOM0级和DOM2级在事件监听使用方式上有什么区别？ DOM0级事件处理程序使用DOM0级方法指定的事件处理程序被认为...
最近在做iOS界面转场的动画，写完转场入口后基本元素还是回归到我们常用的基本动画代码，有关动画的帖子网络上一搜一大把，而且介绍的都比较不错，本文还是不厌其烦的对基本常用到的动画做一个详细统一介绍和总结，主要记录下自己学习动画的点。 在App开发中几乎都使用过动画，绚丽的动画...
今年我四十岁了，我的丈夫离世已经有一周年。 其实我和他没有结过婚，在一些人的眼里，我们并没有关系。 遇见他那年，我16岁，他52岁。 或许他说的对，喜欢上他就是一个错误，可是直至今日，我从未有过后悔。 16岁那年，我孤身来到一个全新的环境，周遭能让我舒心的人事真可谓是寥寥无...
这世界红红火火的，会想死吗，没想的，我要留着这条命来看。没得吃的慢慢来——《三十二》韦绍兰老人 今天听得电影《二十二》上映，又在今天看了其之前的纪录片《三十二》，听到那句“你们来看阿婆，阿婆就很开心啊”，泪奔。 现在，曾经茫茫的她们，只剩了孤零零的八个。 尘埃无足轻重，所以...
1.创建一个空对象作为this2.this.proto指向构造函数的prototype3.运行构造函数4.返回this(如果函数没有return) new相当于语法糖，帮我们完成了这些创建实例所要操作的步骤。js学习总结之dom2级事件基础知识详解
转载 & & 作者：diasa
这篇文章主要为大家详细介绍了js学习总结之dom2级事件基础知识，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
我们使用的DOM2事件绑定，其实是让box通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法实现的。
DOM0级事件绑定:只能给一个元素的某一个行为绑定一次方法，第二次绑定的会把前面的覆盖掉。
DOM2：可以给某一个元素的同一个行为绑定多个不同的方法
box.addEventListener('click',function(e){
console.log(1)
box.addEventListener('click',function(e){
console.log(2)
},false) // 输出1 2
DOM2：DOM0中的行为类型，我们用DOM2一样可以绑定，而且DOM2中还提供了一些DOM0没有的行为类型-&DOMContentLoaded:当页面中的DOM结构（HTML结构加载完成）触发的行为
box.addEventListener('DOMContentLoaded',function(e){
window.onload = function(){}
//当页面中的所有资源都加载完成（图片、HTML结构、音视频...）才会执行后面的函数；并且在一个页面中只能用一次，后面在写会把前面的覆盖掉；-&因为他是采用DOM0事件绑定，所以只能绑定一次
　$(document).ready(function(){})//-&$(function(){})
只要页面中的HTML结构加载完成就会执行对应的函数；并且在同一个页面中可以出现多次。因此这个是采用DOM2事件的绑定，绑定的行为是DOMContentLoaded
DOM2级添加和移除事件细节
function fn1(e){
console.log(this);
//添加事件
box.addEventListener('click',fn1,false);
//移除事件
box.removeEventListener('click',fn1,false);
注意:移除的时候需要保证三个参数:行为、方法、哪个阶段发生的&& 三个参数必须一致 -&DOM2在绑定的时候，我们一般都给他绑定的是实名函数
只能给某个元素的同一个行为绑定多个“不同”的方法（如果方法相同了，只能留一个）
当行为触发，会按照绑定的先后顺序依次把绑定的方法执行；执行的this是当前被绑定事件的元素本身
function fn1(){
console.log(1);
//添加事件
box.addEventListener('click',fn1,false);
box.addEventListener('click',fn1,false);//只输出一个1
上面涉及一个概念:事件池(用来存储当前元素行为绑定的方法的，浏览器自带的机制) 如下图所示
&但是在IE6-8浏览器中,不支持addEventListener,如果想实现DOM2事件绑定只能用attachEvent/detachEvent
它只有两个参数，不能像addEventListener那样控制在哪个阶段发生，默认只能在冒泡阶段发生，同时行为需要添加on（和DOM0特别的类似）
box.attachEvent('onclick',fn1)
注意：和标准浏览器的事件池机制对比:
1、顺序问题:执行的时候顺序是混乱的，标准浏览器是按照绑定顺序依次执行的
2、重复问题:ie6-8可以给同一个元素的同一个行为绑定多个相同的方法
3、this问题:ie6-8中当方法执行的时候，方法中的this不是当前的元素box而是window
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具