JS是以事件驱动为核心的一门语言。

事件的三要素：事件源、事件、事件驱动程序。

例如：

<body>

<div id="box1"></div>

<script type="text/javascript">

    // 1、获取事件源

    var div = document.getElementById("box1");

    // 2、绑定事件

    div.onclick = function () {

        // 3、书写事件驱动程序

        alert("我是弹出的内容");

    }

</script>

</body>

常见的事件如下：

DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM就是由节点组成的。

解析过程

HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

DOM树（一切都是节点）

DOM的数据结构如下：

DOM节点的获取

DOM节点的获取方式其实就是获取事件源的方式。

节点的访问关系，是以属性的方式存在的。

JS中的父子兄访问关系：

插入节点

插入节点有两种方式，它们的含义是不同的。

方式1：

    父节点.appendChild(新的子节点);

解释：父节点的最后插入一个新的子节点。

方式2：

    父节点.insertBefore(新的子节点,作为参考的子节点)

解释：

  • 在参考节点前插入一个新的节点。
  • 如果参考节点为null，那么他将在父节点最后插入一个子节点。

复制节点（克隆节点）

格式如下：

    要复制的节点.cloneNode();       //括号里不带参数和带参数false，效果是一样的。

    要复制的节点.cloneNode(true);

括号里带不带参数，效果是不同的。解释如下：

  • 不带参数/带参数false：只复制节点本身，不复制子节点。

  • 带参数true：既复制节点本身，也复制其所有的子节点。

JS — 事件的相关概念和DOM的更多相关文章

  1. JS中的函数、Bom、DOM及JS事件

    本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...

  2. js 事件相关 事件处理 封装 事件封装 DOM 0 2 3 级事件

    1.绑定 function(element, type, handler){        if (element.addEventListener) {            element.add ...

  3. C#-WebForm-JS知识：基础部分、BOM部分、DOM部分、JS事件

    一.基础部分: 1.JavaScript 是什么? 是一门脚本语言,是属于弱类型(语言语法很随意),C#是强类型(语言语法非常严格)(李献策lxc) 优点:JS 执行速度快 2.JS 与java有什么 ...

  4. JS DOM属性+JS事件

    DOM属性 console.log(ele.attributes) 获取ele元素的属性集合 ele.attributes.getNamesItem(attr).nodeValue 获取指定属性值 e ...

  5. js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

    事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...

  6. DOM操作 JS事件 节点增删改查

    --------------------------习惯是社会的巨大的飞轮和最可贵的维护者.——威·詹姆斯 day 49 [value属性操作] <!DOCTYPE html><ht ...

  7. JS事件流与DOM事件处理程序

    在Javascript的DOM中,关于事件Event对象的知识是一定要掌握的.Event对象模型主要分为两个部分,一个是Event对象本身具有的属性和方法,这个参照API就可以学得:另一个是在DOM节 ...

  8. dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  9. js事件技巧方法整合

    window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...

随机推荐

  1. python脚本实现药品名自动翻译2

    python机器学习-乳腺癌细胞挖掘(博主亲自录制视频)https://study.163.com/course/introduction.htm?courseId=1005269003&ut ...

  2. linux如何交叉编译i2c-tools?

    1. 获取源码 wget https://mirrors.edge.kernel.org/pub/software/utils/i2c-tools/i2c-tools-4.1.tar.xz 2. 解压 ...

  3. unittest快速装载目前下所有测试用例的方法

    import unittest from BeautifulReport import BeautifulReport #导入BeautifulReport if __name__ == '__mai ...

  4. Linux命令之date

    date [选项] [格式] date [-u|--utc|--universal] [MMDDhhmm[[CC]yy][.ss]] date命令根据指定格式显示当前时间或设置系统时间.很多shell ...

  5. 小记LoadRunner 11 安装VC2005运行环境报错处理

    这几天在做性能优化,需要在虚拟机里装个LoadRunner 11.从测试同学那里搞来安装包,按照文档提示安装系统运行环境,提示我要装VC2005 SP1. 安装程序自己安装,报错.截图如下. 于是我又 ...

  6. unity 读取灰度图生成三维地形并贴图卫星影像

    从 https://earthexplorer.usgs.gov/ 下载高程数据 从谷歌地球上保存对应地区卫星图像 从灰度图创建地形模型,并将卫星影像作为贴图 using System.Collect ...

  7. python列表删除--remove(),del,pop()

    remove()参数为列表元素,若在列表中,删除,不在则报错 如: pop()不带参数时默认删除列表的末尾元素并返回该元素,带参数时该参数为列表元素的下标值 不带参数: 以下标为参数: del 后面可 ...

  8. 【Python】机器学习之单变量线性回归 利用批量梯度下降找到合适的参数值

    [Python]机器学习之单变量线性回归 利用批量梯度下降找到合适的参数值 本题目来自吴恩达机器学习视频. 题目: 你是一个餐厅的老板,你想在其他城市开分店,所以你得到了一些数据(数据在本文最下方), ...

  9. Linux特基础的知识（接上一条）

    grep:文本过滤工具(找到要找的文本) print lines matching a pattern例: 打印 行 匹配 一个 模式/样式[root@oldboyedu /opt]# grep &q ...

  10. Java学习笔记-包,classpath,import,jar

    这里介绍Java的包,classpath,import和jar 包(package) 对类文件进行分类管理 给类提供多层命名空间 写在程序文件的第一行 类名的全称的是 包名.类名 包也是一种封装形式 ...