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


Posted in Javascript onDecember 16, 2016

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);
 }
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
Dom与浏览器兼容性说明
Oct 25 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
详解React路由传参方法汇总记录
Nov 29 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 #Javascript
JS限制条件补全问题实例分析
Dec 16 #Javascript
Node.js用readline模块实现输入输出
Dec 16 #Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 #Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 #Javascript
概述jQuery中的ajax方法
Dec 16 #Javascript
JS数组排序方法实例分析
Dec 16 #Javascript
You might like
浅析PHP绘图技术
2013/07/03 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
input 高级限制级用法
2009/03/26 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
Python跳出多重循环的方法示例
2019/07/03 Python
Python实现最常见加密方式详解
2019/07/13 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python实现代码统计工具
2019/09/19 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
介绍一下mysql的日期和时间函数
2013/03/28 面试题
俄语专业毕业生推荐信
2013/10/28 职场文书
单位单身证明范本
2014/01/11 职场文书
求职信需要的五点内容
2014/02/01 职场文书
学校标语大全
2014/06/19 职场文书
调研座谈会发言材料
2014/08/23 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
七年级语文教学反思
2016/03/03 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
vue自定义右键菜单之全局实现
2022/04/09 Vue.js