基本概念: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. pl/sql远程连接oracle数据库乱码

    1. --在PLSQL Developer中查询select userenv('language') from dual ; 我的查询结果为:AMERICAN_AMERICA.ZHS16GBK 2.新 ...

  2. 电影网站的电影m3u8源址分享(存储于mysql数据库,可直接应用在电影网站上使用)

    说明: 1.包含一个films.sql文件,基于mysql5.6的数据表导出文件. 2.该sql文件里面包含一个mysql数据表films,内含35000部电影m3u8源地址. 3.films数据表包 ...

  3. 报错SQL盲注之BIGINT 溢出

    首先感谢原创博主,在此致敬.本文转自:http://www.cnblogs.com/lcamry/articles/5509112.html MySQL版本在 5.5.5 及其以上 0x01 概述 我 ...

  4. centos7-虚拟机 主机 互通 静态ip网络设置

    由于目前互联网发展的速度之快.用户量之多,很多时候作为服务端单台服务器的硬件配置已经不足以支撑业务.集群.分布式等技术架构变得越来越普及,作为开发人员也有必要掌握相关技能.笔者打算选用virtual ...

  5. MERGE INTO:存在就更新不存在就新增——oracle

    MERGE INTO [your table-name] [rename your table here] USING ( [write your query here] )[rename your ...

  6. Java8 新特性_Lambda 表达式

    1. Java8新特性_简介 Lambda 表达式 函数式接口 方法引用与构造器引用 Stream API 接口中的默认方法与静态方法 新时间日期 API 减少空指针异常的容器 Optional 2. ...

  7. Linux Mysql 安装 开启远程连接 供python agent 连接测试 Mark

    Linux     6.3 (1) cat  /etc/redhat-release uname -a 查看yum 源:   阿里源 无源运行: echo 下载阿里云的yum源配置 wget -O / ...

  8. (转)null和NULL和nullptr和””区别

    突然想到这个有趣的问题:C语言和C++对大小写是敏感的,也就是说null和NULL是区别对待的.NULL代表空地址,null只是一个符号.便来深究,看了很多资料,总结如下: 其实null和NULL都是 ...

  9. Java IO 乱码

    InputStreamReader isr = new InputStreamReader(new FileInputStream("./test/垃圾短信训练集80W条.txt" ...

  10. bugku-Web-多次(异或注入,判断被过滤的关键字)

    进去看到url感觉是sql注入, 加上',报错但是%23不报错,加上'--+,也不报错,说明可以用--+注释 加上' or 1=1--+,报错 尝试' oorr 1=1--+,正常 说明or被过滤了. ...