详解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 组件之旅(一)分析和设计
Oct 28 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 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 api函数实现数组的交换排序示例
2014/04/13 PHP
Laravel框架表单验证详解
2014/09/04 PHP
thinkphp分页实现效果
2016/10/13 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
Python3实现并发检验代理池地址的方法
2016/09/18 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
python装饰器实例大详解
2017/10/25 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
节能减排倡议书
2014/04/15 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
世界遗产导游词
2015/02/13 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers