详解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 相关文章推荐
js tab 选项卡
Apr 26 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
js实现聊天对话框
Feb 08 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
利用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按一定比例压缩图片的方法
2018/10/12 PHP
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
Python常用内置模块之xml模块(详解)
2017/05/23 Python
python 字典操作提取key,value的方法
2019/06/26 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
python标识符命名规范原理解析
2020/01/10 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
a标签下载链接的简单实现
2016/09/13 HTML / CSS
旧时光糖果:Old Time Candy
2018/02/05 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
班级年度安全计划书
2014/05/01 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android