基本概念:Dom事件的级别

  • Dom0 级别 element.onclick=function() {}
  • Dom1  没有制定事件相关的
  • Dom2 element.addEventListener("click" function() {} , false//捕获还是冒泡)
  • Dom3 element.addEventListener("keyup" function() {} , false//捕获还是冒泡) 新增鼠键盘事件

DOM事件模型:捕获 冒泡

捕获:从上往下

冒泡:当前元素往上

DOM事件流

浏览器在为当前页面与用户交互  比如鼠标左键响应  如何传到页面 响应

1.事件通过捕获

2.目标元素(目标阶段)

3.上传到window对象(冒泡)

DOM事件捕获的具体流程

第一个接受到事件的对象  window

-----document-----html标签----body---父级元素--子---目标元素

Event对象的常见应用 // 1事件原理 2怎么注册 监听  3响应event常见应用

event.preventDefault()阻止默认事件

event.stopPropagation() 阻止冒泡

event。stopimmediatePropagation()两个click事件 A中注册这个 阻止Bclick事件

event.currentTarget //for循环dom注册事件  如何优化  子元素事件代理到父元素

event.target

自定义事件(模拟事件)

var eve = new Event("custome")

ev.addEventListener("custome",function)

ev.dispatchEvent(eve) //触发事件

面试准备 DOM的更多相关文章

  1. 已看1.熟练的使用Java语言进行面向对象程序设计,有良好的编程习惯,熟悉常用的Java API,包括集合框架、多线程(并发编程)、I/O(NIO)、Socket、JDBC、XML、反射等。[泛型]\

    1.熟练的使用Java语言进行面向对象程序设计,有良好的编程习惯,熟悉常用的Java API,包括集合框架.多线程(并发编程).I/O(NIO).Socket.JDBC.XML.反射等.[泛型]\1* ...

  2. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

  3. 面试整理之DOM事件阶段

    因为快面试了,打开<JavaScript高级程序设计>,对DOM事件进行整理了下 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可 ...

  4. 前端面试(原生js篇) - DOM

    根据我的面试经历,一般小公司的面试环节,比较关心框架的熟练程度,以及独立开发组件的能力 但大厂通常有五轮以上的面试,而且对 js 基础语法很是看重 于是我总结了一些关于 js 基础的面试对话,有的当时 ...

  5. Vue Virtual Dom 和 Diff原理(面试必备) 极简版

    我又来了,这是Vue面试三板斧的最后一招,当然也是极其简单了,先说Virtual Dom,来一句概念: 用js来模拟DOM中的节点.传说中的虚拟DOM. 再来一张图: 是不是一下子秒懂  没懂再来一张 ...

  6. 面试 15-虚拟DOM

    15-虚拟DOM #前言 vdom 是 vue 和 React 的核心,先讲哪个都绕不开它. vdom 比较独立,使用也比较简单. 如果面试问到 vue 和 React 和实现,免不了问 vdom: ...

  7. [java面试]javascript中dom取值问题radio名字一样归属于同一个组,求点击的是哪一个

    题目描述: 看如下的html文件,里面定义了一些radio类型的元素,请完成parse()函数的内容,要求能够弹出对话框提示当前选中的是第几个单选框. </pre><pre code ...

  8. (转)DOM appendHTML实现及insertAdjacentHTML

    appenChild() 原文转自 JS中有很多基本DOM方法,例如createElement, parentNode等,其中,appendChild方法是相当地常用与熟知,可谓是DOM节点方法中的& ...

  9. 【干货分享】前端面试知识点锦集04(Others篇)——附答案

    四.Others部分 技术类 1.http状态码有哪些?分别代表是什么意思? (1).成功2×× 成功处理了请求的状态码.200 服务器已成功处理了请求并提供了请求的网页.204 服务器成功处理了请求 ...

随机推荐

  1. 吴裕雄--天生自然java开发常用类库学习笔记:Stack类

    import java.util.Stack ; public class StackDemo{ public static void main(String args[]){ Stack<St ...

  2. 033-PHP对一个数组先奇后偶,然后再进行从大到小排序

    <?php function Compare($str1, $str2) { if (($str1 % 2 == 0) && ($str2 %2 == 0)) { if ($st ...

  3. 使用HttpURLConnection方式访问接口

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...

  4. 吴裕雄--天生自然JAVA SPRING框架开发学习笔记:SSH框架(Struts2+Spring+Hibernate)搭建整合详细步骤

    在实际项目的开发中,为了充分利用各个框架的优点,通常都会把 Spring 与其他框架整合在一起使用. 整合就是将不同的框架放在一个项目中,共同使用它们的技术,发挥它们的优点,并形成互补.一般而言,在进 ...

  5. elasticsearch下载与安装

    目录 安装之前 下载 安装 测试 安装之前 必须注意的是:安装路径不允许有中文及空格和非法字符,尤其是中文 下载 打开elasticsearch官网.选择免费试用. 选择对应产品与版本(选择6.5.4 ...

  6. SpringBoot的ApplicationRunner和CommandLineRunner

    如果你需要在你的SpringBoot启动完成之后实现一些功能,那么可以通过创建class实现ApplicationRunner和CommandLineRunner来完成: @Component pub ...

  7. EUI库 - 10 - 使用自定义组件

      步骤 1 在根节点,添加一个自定义的命名空间  2 可以设置skinName 自定义组件规范 1 不复用的不要用自定义组件 2 属性必须要有默认值(赋值为null也可以),因为TS编译器会把没有默 ...

  8. Intent 显示意图 隐式意图

    //显式意图  :必须指定要激活的组件的完整包名和类名 (应用程序之间耦合在一起) // 一般激活自己应用的组件的时候 采用显示意图  //隐式意图: 只需要指定要动作和数据就可以 ( 好处应用程序之 ...

  9. 数据库连接池C3P0的使用

    一.直接使用代码链接(一般企业开发不会用到.大多数用方法二) 1.导入jar 2.新建JDBCUtil import java.io.FileInputStream; import java.io.I ...

  10. Java TCP发送与接收

    IP地址?端口号?主机名? 什么是Socket? 什么是UDP? 什么是TCP? UDP和TCP区别? 以上问题请自行百度,有标准解释,此处不再赘述,直接上干货! 实例: 发送端: public cl ...