基本概念: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. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-home

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. (九)微信小程序---for指令

    对于数据是列表 wxml <view wx:for="{{dataList}}">{{index}}-{{item}}</view> 我们可以看到上面的代码 ...

  3. NO14 快照-克隆-必须掌握的Linux目录结构

    壹  VMware克隆,快照讲解及相应问题讲解: ·快照:比喻:假设把人生作一个快照.1岁10岁20岁6无限还原到前一个设置的节点. ·克隆学习一般用链接克隆,不另外占用磁盘,但是依赖本体虚拟机.完整 ...

  4. Arch系Linux中安装Docker

    Arch系Linux中安装Docker 1. 下载最新版docker $ sudo pacman -Syu docker 2. 免sudo执行docker $ sudo gpasswd -a ${US ...

  5. maven集成SSM项目,jetty部署运行——搭建maven项目部署jetty试运行(一)

    今天闲来没事采用maven集成一个SSM框架来复习复习,下面开始我的复习之旅,慢慢来,不着急,哈哈,不忙时候敲两下,整起来. 工具为Eclipse,首先需要建立一个maven工程,file右键new- ...

  6. javacv 通过rtsp 获取视频流 设置帧率

    原文章:https://blog.csdn.net/eguid_1/article/details/52680802 原代码: /** * 按帧录制视频 * * @param inputFile-该地 ...

  7. 两表关联更新数据——oracle

    from testb b where b.id=a.id) ; (where exists(select 1 from testb b where b.id=a.id):如果没有这个条件,不匹配的选项 ...

  8. springboot项目 线程消费队列注入报错误空指针

    背景: 在调用阿里云隐私保护有一个通话记录的回执消息是一个消费线程队列,这个还别人告诉我的,因为我根本没有看出来哪里是个线程了,然后我就把它当成普通的代码拿到返回值以后然后插入数据库 可是我这边该加的 ...

  9. java List的用法

    List的用法List包括List接口以及List接口的所有实现类.因为List接口实现了Collection接口,所以List接口拥有Collection接口提供的所有常用方法,又因为List是列表 ...

  10. android 开发学习

    androidSDK自带SQLite数据库,使用时继承父类(SQLiteOpenHelper). this表对象本身,理解为指向自身的指针:super(超类)表对象的父类,即指向父类的指针. Cont ...