主页 / 网络编程 /

详解js的事件处理函数和动态创建html标记方法

网络编程 2021-07-04 19:19www.168986.cn编程入门
本文主要对javascript的事件处理函数，动态创建html标记的两种方法进行详细介绍，具有很好的参考价值，需要的朋友一起来看下吧

1 HTML的事件属性

全局事件属性:HTML 4 增加了使事件在浏览器中触发动作的能力，比如当用户点击元素时启动 JavaScript。

  a. Window 事件属性，针对 window 对象触发的事件（应用到 <body> 标签），常用的为onload。

  b. Form事件，由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）常用的为onblur、onfocus、onselect、onsubmit。

  c. keybord事件

  d.Mouse事件，由鼠标或类似用户动作触发的事件常用的为onclick、onmouseover、onmouseout。

  e. Media事件，由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及     <video>）。

2  事件处理函数

文档的结构与文档的行为混杂在一起，例如

<a href="images/example.jpg" onclick="showPic(this);return false;">

文档的结构与文档的行为分开，例如

element.onclick = function() { showPic(whichpic); return false; }

3 共享onload事件

页面加载之后立即执行一段 JavaScript<element onload="script">，如果想让页面加载后执行多个脚本呢？办法是:

window.onload = function() {
 script1;
 script2;
 script3;
 ......
 }

这个办法没有弹性，如果需要加载的脚本不断变化,那么代码也要跟着变化，更好的办法是:

 function addLoadEvent(func)() {
 var oldonload = window.onload;
 if (typeof window.onload !="function") {
  window.onload = func;
 } else {
  window.onload = function() {
   oldonload();
   func;
  }
 }
 }

4 动态创建html标记

  a. 两个传统的方法

    document.write方法和innerHTML属性，两者都不是标准化的DOM(W3C标准)所支持的方法和属性，它们都是html的专有属性。

    document.write方法可以很方便的插入元素标签，尤其是字符串。它与网页设计应将行为(脚本)和结构(html标签)分离的原则相背。

<!DOCTYPE html>
 <html>
 <head>
 <meta chaset="utf-8" />
 <title>document.write</title>
 <body>
  <script>
  <!--可以很方便的插入元素标签,尤其是字符串.它与网页设计应将行为(脚本)和结构(html标签)分离的原则-->
  document.write("<p>This is inserted by document.write</p>");
  </script>
 </body>
 </head>
 </html>

innerHTML适合将一大段HTML内容插入网页,如:

<div id="testdiv">
 </div>
 window.onload = function() {
 var testdiv = document.getElementById("testdiv");
 testdiv.innerHTML = "<p>This is inserted by <em>innerHTML</em></p><en>";
 }

  b. 更加精细化的dom方法-获取dom节点树和改变dom节点树

    检索节点（元素）:document.getElementById和element.getElementsByTagName
   
    创建节点（元素）:document.createElement,document.createTextNode
   
    追加节点（元素）:element.appendChild

    插入(将一个节点插入到另一个节点之前):parentEelement.insertBefore(newElement, targetElement)

    很有用的属性element.parentNode（获取父节点）、element.nextSibling（获取兄弟节点）

    上面用innerHTML属性插入HTML的效果用dom方法照样可以实现:

 window.onload = function() {
  var testdiv = document.getElementById("testdiv");
  var para = document.createElement("p");
  testdiv.appendChild(para);
  var context1 = doument.createTextNode("This is inserted by ");
  para.appendChild(context1);
  var emphasis = document.createElement("em");
  para.appendChild(emphasis);
  var context2 = document.createTextNode("method of domcore");
  emphasis.appendChild(context2);
 }

利用上面的dom方法写一个将一个节点插入到另一个节点之后的函数

function insertAfter(newElement, targetElement) {
 var parent = targetElement.parentNode;
 if (parent.lastChild == targetElement) {
  parent.appendChild(newElement);
 } else {
  targetElement.inserBefore(newElement, targetElement.nextSibling);
 }
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望多多支持狼蚁SEO！

上一篇：JS作用域闭包、预解释和this关键字综合实例解析 下一篇：利用js来实现缩略语列表、文献来源链接和快捷键

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by