开发者社区> 爱六六> 正文

addEventListener和attachEvent小结续写

简介: DOM事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段 事件捕获(event capturing)的思想是从不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。 事件冒泡(event bubbling)事件开始时由最具体的元素接受,然后逐级向上传播到较为不具体的节点。
+关注继续查看

DOM事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段

事件捕获(event capturing)的思想是从不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。

事件冒泡(event bubbling)事件开始时由最具体的元素接受,然后逐级向上传播到较为不具体的节点。

弱耦合性思想是将HTML和javascript分离开来

最初DOM采用方式:

绑定事件:          elem.type=fn(){}               //   元素名.事件类型=函数名(){}        事件类型  type例如onclick

移除事件:          elem.type=null;

DOM2采用方式:

绑定事件:          addEventListener(elem,type,bool)         //   事件类型  type例如click

移除事件:          removeEventLisnter(elem,type,bool)

IE-DOM2采用方式:

绑定事件:         attachEvent(elem,type)           //事件类型  type例如onclick
移除事件:         detachEvent(elem,type)      

注:

标准DOM中事件处理程序会在其所属元素的作用域内容行        this    ===   具体元素
也可以采用   event.target  指向具体元素

IE-DOM1中事件处理程序会在其所属元素的作用域内运行        this    ===   具体元素

IE-DOM2中事件处理程序会在全局作用域中运行                   this    ===   window        

要指向具体元素    event.srcElemnt

var EventUtil = {
            addHandler: function (element, type, handler) {
                if (element.addEventListener) {
                    element.addEventLisener(type, handler, false);
                }
                else if (element.attachEvent) {
                    element.attachEvent("on" + type, handler);
                }
                else {
                    element["on" + type] = handler;
                }
            },

            removeHandler: function (element, type, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                }

                else if (element.detachEvent) {
                    element.detachEvent("on" + type, handler);
                }
                else {
                    element["on" + type] = null;
                }
            }
        }

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
史上最详细的DOM事件之鼠标事件
史上最详细的DOM事件之鼠标事件 说到JavaScript的DOM,不得不提的就是DOM事件,当然DOM中事件包含好多,我们先来讲一讲DOM的鼠标事件。 HTMl代码: <h1>01DOM的鼠标事件</h1> <div id="wrap"> <div class="box">onclick</div> <div class="box">oncontextmenu</div> <div class="box">ondblclick</div> <div class="box">onmousedown</div> <div class
52 0
史上最详细的DOM事件之键盘事件
HTML代码: <input type="text" name="" id="text"> <input type="text" name="" id="text2"> 1 2 1.onkeydown事件 var oText=document.getElementById("text"); var oText2=document.getElementById("text2"); // onkeydown 某个键盘按键被按下。 针对所有键 oText.onkeydown=function(event){ co
56 0
史上最详细的DOM事件之剪贴板事件
史上最详细的DOM事件之剪贴板事件 上篇博客讲了DOM的表单事件,这篇博客我们来讲一讲DOM的剪贴板(ClipboardEvent)事件。 HTML代码: <div id="box">hello world</div> <p>这是一个段落标签</p> <input type="text" id="text"> 1 2 3 1.oncopy(赋值)事件 var oBox = document.getElementById("box"); var oText=document.getElementById("text");
39 0
jQuery重点 | 事件的冒泡和事件对象
本文对jQuery事件冒泡和事件对象进行详细的介绍,通过代码实战,带你深入浅出的理解这些内容。
52 0
JavaScrip 常用的键盘事件
JavaScrip 常用的键盘事件
38 0
学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象
学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象
92 0
C#(二十八)之C#鼠标事件、键盘事件
鼠标事件分为两种:EventArgs、MouseEventArgs。 键盘事件:KeyEventArgs、KeyPressEventArgs、KeyPress、KeyDown、KeyUp。
208 0
js函数、js对象的这些点你真的懂吗?
js函数、js对象的这些点你真的懂吗?
115 0
requestAnimationFrame 刨根问底
开头引用一段 Google Developer Rendering Performance: 当屏幕正在发生视觉变化时,您希望在适合浏览器的时间执行您的工作,也就是正好在帧的开头。保证 JavaScript 在帧开始时运行的唯一方式是使用 requestAnimationFrame。 框架或示例可能使用 setTimeout 或 setInterval 来执行动画之类的视觉变化,但这种做法的问题是,回调将在帧中的某个时点运行,可能刚好在末尾,而这可能经常会使我们丢失帧,导致卡顿。(事实上,jQuery 目前的默认 animate 行为是使用 setTimeout!)
172 0
+关注
爱六六
前端开发相关专家
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载