基本概念: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. cf754 754D - Fedor and coupons

    2个多小时,弱智了..(连A都做不对,就不要做D了(迷)) #include<bits/stdc++.h> #define lowbit(x) x&(-x) #define LL ...

  2. [LeetCode] 930. Binary Subarrays With Sum 二元子数组之和

    In an array A of 0s and 1s, how many non-empty subarrays have sum S? Example 1: Input: A = [1,0,1,0, ...

  3. ES6与ES5的继承

    ES6 ES6中的类 类与ES5中的构造函数写法类似 区别在于属性要放入constructor中,静态方法和属性实列不会继承 <script> class Person{ height=& ...

  4. MyBatis parameterType、resultType的数据类型

    parameterType.resultType的数据类型要写全限定类名或者别名. mybatis已经给常用的数据类型起好了别名,参考mybatis.pdf  3.1.1小节: 基本数据类型很少用,一 ...

  5. 常用Java工具类

    一. org.apache.commons.io.IOUtils closeQuietly:关闭一个IO流.socket.或者selector且不抛出异常,通常放在finally块 toString: ...

  6. Java 统计整数二进制中1的个数

    package cookie; public class CountBinary_1 { public static void main(String[] args) { System.out.pri ...

  7. poi 导出Excel java代码

    js: function initBatchExport(url,sub_key,current_sub_num){ var btn_id="#btn_char"+current_ ...

  8. 雷火神山直播超两亿,Web播放器事件监听是怎么实现的?

    Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播.在视频业务大数据平台中,播放数据的统计分析非常重要,所以We ...

  9. 关于c++静态类的说法

    看了网上的观点,大致有这几种比较好的. 观点一:根据现代的C++观点,静态类没有必要存在于C++中. 一个类是对一个概念的描述,类的本质是它维护了一个不变式,也就是说它有一个状态,它所有的接口都是为了 ...

  10. poj 3262 Protecting the Flowers 贪心 牛吃花

    Protecting the Flowers Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 11402   Accepted ...