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;
                }
            }
        }

目录
相关文章
|
6月前
|
JavaScript
如何写事件冒泡和事件捕捉?
如何写事件冒泡和事件捕捉?
|
6月前
第二十二章 案例TodoList之鼠标事件
第二十二章 案例TodoList之鼠标事件
|
6月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
48 2
|
6月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件,而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。例如: ```javascript element.addEventListener('click', console.log, false); // 冒泡 element.addEventListener('click', console.log, true); // 捕获 ```
44 0
|
6月前
|
JavaScript
JS事件,你真的懂吗(捕获,冒泡)?
JS事件,你真的懂吗(捕获,冒泡)?
59 0
|
6月前
|
JavaScript 前端开发
js基础——事件(鼠标事件、键盘事件、表单事件......)
js基础——事件(鼠标事件、键盘事件、表单事件......)
57 0
|
前端开发 JavaScript UED
前端祖传三件套JavaScript的DOM之事件的各种具体事件类型的键盘/文本
在前端开发中,JavaScript 中的 DOM 事件机制提供了丰富的功能和灵活的方式来处理各种事件。本文将介绍 JavaScript 中常见的键盘/文本事件类型,包括输入事件、按键事件和复制/剪切/粘贴事件。
132 0
|
前端开发 JavaScript UED
前端祖传三件套JavaScript的DOM之事件的各种具体事件类型的鼠标/滚轮
在前端开发中,JavaScript 中的 DOM 事件机制提供了丰富的功能和灵活的方式来处理各种事件。本文将介绍 JavaScript 中常见的鼠标/滚轮事件类型,包括鼠标事件、滚轮事件。
467 0
|
JavaScript 前端开发 索引
如何用原生JS写Tab切换
1. 基本思路 ① 遍历Tab选项 ② 然后给每个Tab选项绑定点击事件 ③ 每次点击时清除所有Tab选项及Tab选项内容的样式,然后给当前Tab选项添加标记样式,给当前Tab选项添加显示样式 2.
3201 1
JavaScrip 常用的键盘事件
JavaScrip 常用的键盘事件
102 0