事件监听：

语法：element.addEventListener(event, function, useCapture);

  • event：事件的类型，触发什么事件，注意不需要on作为前缀，比如click
  • function：事件触发后调用的函数
  • useCapture：描述事件是冒泡还是捕获，该参数可选的

当用户点击按钮时触发监听事件：

  • document.getElementById("myBtn").addEventListener("click",displayDate);
  • addEventListener可以向同个元素添加多个事件，且不会覆盖已存在的事件

向Window对象添加事件句柄：

当用户重置窗口大小时添加时间监听：

window.addEventListner("resize",function(){

document.getElementById("demo").innerHTML = sometext;

});

向同一个元素添加多个事件句柄：

  • element.addEventListener("click",myFunction)
  • element.addEventListener("mousedown",muSecondFunction);

RemoveEventListener()方法

RemoveEventListener()方法移除由addEventListener()方法添加的事件句柄

element.removeEventListener("mousemove",myFunction);

版本兼容：

IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

  • element.attachEvent(event, function);
  • element.detachEvent(event, function);

元素（节点）增删改查：

  • nodeName:节点名称
  • nodeValue:节点的值
  • nodeType : 节点的类型

创建HTML元素：document.createElement("p");Element.appendChild(node);

首先创建该元素，然后向一个已经存在的元素追加该元素

<body>

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

<script>

var text = document.createTextNode("这是一个新的段落");

var node = document.createElement("p");

node.appendChild(text);

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

div.appendChild(node);

</script>

</body>

删除已有的HTML元素：

  1. 首先拿到要删除的节点元素及其父亲结点
  2. 然后通过parent.removeChild(child)删除
<div id="div1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

<script>

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

</script>

9 HTML DOM事件监听&版本兼容&元素（节点）增删改查的更多相关文章

  1. 使用DOM进行xml文档的crud（增删改查）操作<操作详解>

    很多朋友对DOM有感冒,这里我花了一些时间写了一个小小的教程,这个能看懂,会操作了,我相信基于DOM的其它API(如JDOM,DOM4J等)一般不会有什么问题. 后附java代码,也可以下载(可点击这 ...

  2. DOM 事件监听 事件冒泡 事件捕获

    addEventListener() 方法 实例: // 当用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventList ...

  3. DOM事件监听和触发

    EventTargetAPI定义了DOM事件(mouse事件等)的监听和触发方法,所有的DOM节点都部署了这个接口. 这个接口有三个方法:addEventListener, removeEventLi ...

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

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

  5. JS DOM节点增删改查 属性设置

    一.节点操作 增 createElement(name)创建元素 appendChild();将元素添加   删 获得要删除的元素 获得它的父元素 使用removeChild()方法删除 改 第一种方 ...

  6. js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  7. js事件监听机制(事件捕获)

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  8. Javascript事件监听

    FireFox : addEventListener()方法 IE : attachEvent()方法 为HTML元素添加一个事件监听, 而不是直接对元素的事件属性(如:onclick.onmouse ...

  9. JavaScript HTML DOM增删改查

    首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对HTML元素进行增删改查. 1 查找DOM 第一种方式是我们最常用的 ...

随机推荐

  1. maven私服搭建&使用

    Maven私服搭建教程 一.nexus安装 1,解压安装包 安装包下载地址 2,以管理员身份打开cmd 3,进入到nexus的bin目录 (1) 安装:nexus install (2) 启动:nex ...

  2. ORACLE_BASE、ORACLE_HOME有什么区别

    ORACLE_BASE.ORACLE_HOME有什么区别   ORACLE_BASE下是admin和productORACLE_HOME下则是ORACLE的命令.连接库.安装助手.listener等等 ...

  3. Azure IoT Hub 十分钟入门系列 （1）- 10分钟带你了解Azure IoT Hub 并创建IoT Hub

    建议您先对<Azure 上 IoT 整体解决方案概览 >进行了解. 本文主要分享一个案例: 10分钟-了解Azure IoT Hub并创建Azure IoT Hub 本文主要有如下内容: ...

  4. 理解Javascript的原型和原型链

    前言 本文2088字,阅读大约需要13分钟. 总括: 结合实例阐述了原型和原型链的概念并总结了几种创建对象的方法,扩展原型链的方法. 参考文章:The Secret Life of Objects,继 ...

  5. 深入delphi编程理解之消息（一）WINDOWS原生窗口编写及消息处理过程

    通过以sdk方式编制windows窗口程序,对理解windows消息驱动机制和delphi消息编程有很大的帮助. sdk编制windows窗口程序的步骤: 1.对TWndClass对象进行赋值; 2. ...

  6. Springmvc-crud-03（静态资源错误）

    错误描述:静态资源加载失败 原因:spring会拦截静态资源 解决办法: <!-- 配置spring支持静态资源请求 --> <mvc:default-servlet-handler ...

  7. 【PAT甲级】1077 Kuchiguse (20 分)（cin.ignore()吃掉输入n以后的回车接着用getine(cin,s[i])输入N行字符串）

    题意: 输入一个正整数N(<=100),接着输入N行字符串.输出N行字符串的最长公共后缀,否则输出nai. AAAAAccepted code: #include<bits/stdc++. ...

  8. POJ 1061 青蛙的约会（exgcd）

    嗯... 题目链接:http://poj.org/problem?id=1061 两只青蛙相遇时肯定满足:x+k*m≡y+k*n(mod L) x+k*m-(y+k*n)=L*s k*(n-m)-s* ...

  9. 关于GOM引擎启动时显示：ｗｉｎｄｏｗs socket error: 在其上下文中，该请求的地址无效。 （10049）， on API 'bind'

    GOM启动时网管登陆器显示:windows socket error: 在其上下文中,该请求的地址无效. (10049), on API 'bind'解决方法: 重新配置引擎控制台.在配置里取消双IP ...

  10. C语言：将3*5矩阵中第k列的元素左移到第0列，第k列以后的每列元素依次左移，原来左边的各列依次绕到右边。-在m行m列的二维数组中存放如下规律的数据，

    //将3*5矩阵中第k列的元素左移到第0列,第k列以后的每列元素依次左移,原来左边的各列依次绕到右边. #include <stdio.h> #define M 3 #define N 5 ...