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. pandas总结

    ### 一.创建对象  # 1.可以通过传递一个list对象来创建一个Series,pandas会默认创建整型索引: # s=pd.Series([1,3,5,np.nan,6,8]) # print ...

  2. Markdown使用TOC自动生成导航栏

    经常使用markdown 的玩家一定很想要一个自动生成的导航栏吧,自己写的基本思路就是 轮询监听滚动条的位置,通过抛锚和跳锚实现,这里介绍一下今天的主角,markdown-toc插件: https:/ ...

  3. PAT 甲级 1028 List Sorting (25 分)（排序，简单题）

    1028 List Sorting (25 分)   Excel can sort records according to any column. Now you are supposed to i ...

  4. js取url问号后的参数方法封装

    工具方法: function getRequest() { var url = location.search; // 获取url中?后面的字符串 var theRequest = new Objec ...

  5. Flutter Widget框架概述

    Flutter Widget采用现代响应式框架构建,这是从 React 中获得的灵感,中心思想是用widget构建你的UI. Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么.当w ...

  6. 集群架构04·NFS服务，环境安装

    初识 网络文件系统Netwrok File System,类似于wiin10的网络共享 功能:通过网络让不同主机系统之间可以共享文件或目录 客户端通过挂载的方式将服务器端共享的目录挂载到本地系统. 集 ...

  7. 自助机dmv？鸡肋

    今天终于扛着懒癌去了一趟所谓的dmv自动机(dmv now kiosk),发现此机器只处理有关vehicle的三种事项,比如vehicle的new registration之类的,如果是其它事情还是得 ...

  8. du 和 df命令

    测试环境数据库收到磁盘报警时,需要清理部分磁盘空间 df -h 查看整个磁盘占有 找到对应目录 查看每个文件夹占有磁盘量: sudo du -h --max-depth=1 data/ --max-d ...

  9. CSS3伪类与伪元素的区别及注意事项

    CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特 ...

  10. 【贪心科技】贪心科技内容合伙人关于AI公司及创业的演讲笔记

    贪心科技内容合伙人关于AI公司及创业的演讲笔记 视频 目录 一.投资角度对 AI 的两个基本认知 二.简单分析 AI 公司的两个纬度四个层面 三.AI 垂直行业应用的三点中美对比 四.给创业者的四个建 ...