事件流程分为三个阶段:捕获阶段.目标阶段.冒泡阶段. 捕获阶段:事件从最顶层元素开始执行,一层层往下,直到精确元素. 目标阶段:事件在精确元素上执行. 冒泡阶段:事件从精确元素开始执行,一层层往上,直到顶层元素(注:高级浏览器的顶层元素是window,ie8以下的浏览器顶层元素是document)  DOM2级事件绑定方式   高级浏览器绑定方式: 元素.addEventListener(type, handler, boolean);             //绑定 type 事件类型字符串…

一.前言 说实话,真问我什么是事件委托,我肯定gg,还好查了一下,原来就是我之前练习过的DOM2级事件的应用. 二.什么是事件委托? 事件委托就是当事件触发时,把要做的事委托给父元素(或父元素的父元素)来处理.也就是:利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作.使用事件委托技术能让你避免对特定的每个节点添加事件监听器. 三.事件委托作用 1.减少事件注册,节省内存 -table可以代理所有td的click事件 -ul可以代理所有li的click事件 2.能为之后新增…

博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/24/js%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e7%a8%8b%e5%ba%8f%e8%af%a6%e8%a7%a3%ef%bc%8chtml%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e7%a8%8b%e5%ba%8f%ef%bc%8cdom0%e7%ba%a7%e4%ba%8b%e4%bb%b6%e5%a4%84…

一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比如说 React 中的单向数据流,Node 中的流,还有 DOM 事件流,都是流的一种生动体现.至于流的具体概念,用术语说流是对输入输出设备的抽象.以程序的角度说,流是具有方向的数据. 三.事件流 浏览器在为当前页面与用户做交互的过程中,比如点击鼠标左键,会出现这个左键是怎么传到页面上,还有怎么响应…

前几天有小伙伴问过我一个问题,为什么有DOM 0级事件以及DOM2级事件,但是却没有DOM1级事件呢?那我们今天就来说一说DOM的级别问题. 同时推荐伙伴们可以看看尚学堂有关JavaScript BOM的文章:<细说javascript BOM> 一.DOM0级事件 0级DOM分为两种 行内事件:在标签中写事件 元素.on事件名=函数 1.行内<input type="button" id="btn" value="按钮" on…

dom0级事件 <a href="#" id="hash" onclick="fn();fn1();"> <button type="button">返回上面进行开通</button> </a> var btn=$('#hash').get(0); btn.onclick=function(){ alert('111'); }; btn.onclick=function(){ a…

DOM2级事件中addEventListener的执行机制,多个addEventListener同时添加时的执行先后规律: W3C的DOM事件触发分为三个阶段:①.事件捕获阶段,即由最顶层元素(一般是从window元素开始,有的浏览器是从document开始,至于其中的差别我稍后会更新)开始,逐次进入dom内部,最后到达目标元素,依次执行绑定在其上的事件②.处于目标阶段,检测机制到达目标元素,按事件注册顺序执行绑定在目标元素上的事件.③.事件冒泡阶段,从目标元素出发,向外层元素冒泡,最后到达顶层…

JavaScript DOM0.DOM2级事件 1.DOM0级事件:on+事件类型 在html行内直接绑定,也就是通过行内js绑定的例如<span onclick="alert('1')">第一项</span> 在js中绑定例如://<span onclick="alert('2')">第一项</span> var Ospan=document.getElementsByTagName('span')[0];Ospan…

1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { //符合W3C的事件模型 if (obj.addEventListener) { obj.addEventListener(evtype,fn,false); return obj; } //IE或Opera浏览器 if (!obj.functions) obj.functions={}; if…

DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行(也就是this引用当前元素): var btn = document.getElementById('myBtn'); btn.onclick = function(){ alert(this.id); }; DOM2级事件处理程序: 通过addEventListener()方法和removeEv…