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. js获取本地ip

    function getUserIP(onNewIP) { // onNewIp - your listener function for new IPs //compatibility for fi ...

  2. Canvas-基本用法

    Canvas教程-MDN HTML 5 Canvas 参考手册 <canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表.制作 ...

  3. c++ Container print

    template<typename Container>void PrintContents(const Container& con) { Container::const_it ...

  4. Docker save and load,镜像保存

    一.起因 docker pull 时发生错误 error pulling image configuration: Get https://dseasb33srnrn.cloudfront.net/r ...

  5. Python之操作RabbitMQ

    RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, 消息队列(MQ)是一种应用程序 ...

  6. 如何不让Excel图表随源数据改变而改变

    如何不让Excel图表随源数据改变而改变 一般我们在用Excel时,经常会碰到一些问题,比如,如何才能不让Excel图表随源数据改变而改变呢,下面就谈一下,一般在默认情况下,Excel的图表在一个区域 ...

  7. Flutter的布局方法

    重点是什么? Widgets 是用于构建UI的类. Widgets 用于布局和UI元素. 通过简单的widget来构建复杂的widget Flutter布局机制的核心就是widget.在Flutter ...

  8. linux ssh利用公钥免密登陆

    1.安装检查ssh 如果没有ssh的话,需要安装 #yum  install -y openssh-server openssh-clients 2.生成秘钥 ssh-keygen -t rsa 执行 ...

  9. souce and bash 的区别

    对于一些环境变量的配置文件,如想使更改后立即生效,多用 souce +file 执行后即可.如/etc/profile 里加了配置, source 和  bash 的区别: source filena ...

  10. IDEA debug漏洞第二弹(fastjson，version<1.2.47)

    首先这个漏洞调试不需要非要使用docker,本身是一个jar包的问题.所以我们可以自己写一个小java代码来直接调试. POC如下 {"name":{"@type&quo ...