DOM事件

作者: 唐卡豆子 | 来源:发表于2018-04-10 21:13 被阅读0次

1.基本概念:DOM事件的级别
DOM0 element.onclick = function(){}

在js中:添加事件监听对象的形式
element.addEventListener("事件名", function(){})

DOM2 element.addEventListener('click', function(){}, false) //removeEventListener()
DOM3 element.addEventListener('keyup', function(){}, false) 事件类型增加了
1级DOM标准中并没有定义事件相关的内容,所以没有所谓的1级DOM事件模型

2.DOM事件模型:事件发生的各个阶段
捕获(上到下) 冒泡(当前元素向上)

3.DOM事件流:浏览器在为当前页面
三个阶段:
捕获(true),依次记录各级父元素上绑定的处理函数
目标阶段(到达目标元素),
冒泡(false),依次触发各级父元素上的事件处理函数

4.描述DOM事件捕获的具体流程
捕获流程:window -> document -> html -> body ->一层一层 ->目标元素

5.Event对象的常见应用
event.preventDefault() 阻止默认行为
event.stopPropagation() 阻止冒泡(父子)
event.stopImmediatePropagation() 事件响应优先级(多个按钮)
event.currentTarget 当前绑定的事件
event.target 当前被点击的元素

6.自定义事件
var eve = new Event('test');
ev.addEventListener('test', function(){
console.log('test dispatch');
});
setTimeout(function(){
ev.dispatchEvent(eve);
}, 1000);

相关文章

  • 前端面试题(3)——DOM事件类

    基本概念:DOM事件的级别 DOM事件模型:事件冒泡事件捕获 DOM事件流 描述DOM事件捕获的具体流程 Even...

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级、DOM1级、DOM2级、DOM3级DOM事件:DOM0级事件处理、...

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级,DOM1级,DOM2级和DOM3级DOM事件:DOM0级事件处理,...

  • DOM0和DOM2级事件简单理解

    关于DOM0 和DOM1级事件可以简单理解为:事件分为DOM 0级事件和Dom 2级事件,DOM2级事件也叫做事件...

  • Dom事件

    基本概念 Dom事件级别 Dom事件模型 Dom事件流 描述Dom事件捕获的具体流程 Event对象的常见应用 自...

  • 3-6 DOM事件

    问题 DOM 事件的级别 DOM 事件模型(就是捕获和冒泡儿) DOM 事件流 描述DOM事件捕获的具体流程 Ev...

  • HTML DOM 事件

    HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中...

  • 网易微专业-DOM编程艺术 05 事件

    1、DOM事件⑴主要内容▪事件流▪事件注册▪事件对象▪事件分类▪事件代理 ⑵什么是DOM事件▪点击一个DOM元素▪...

  • DOM事件类

    基本概念:DOM事件的级别 DOM事件模型 DOM事件流 描述DOM事件捕获的具体流 Event对象的常见应用 自...

  • DOM事件

    DOM事件的级别 DOM事件模型 DOM事件流 描述DOM时间捕获的具体流程 Event对象的常见应用 自定义事件...

网友评论

      本文标题:DOM事件

      本文链接:https://www.haomeiwen.com/subject/xqqohftx.html