详解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 drag拖动代码
Dec 09 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 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来写记数器(详细介绍)
2006/10/09 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
js微信分享实现代码
2020/10/11 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
python使用Berkeley DB数据库实例
2014/09/26 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
Python入门之后再看点什么好?
2018/03/05 Python
pycharm设置注释颜色的方法
2018/05/23 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
外贸英语毕业生自荐信
2013/11/14 职场文书
家长给幼儿园的表扬信
2014/01/09 职场文书
公司门卫管理制度
2014/02/01 职场文书
金融事务专业求职信
2014/04/25 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
三严三实心得体会范文
2014/10/13 职场文书
医院营销工作计划
2015/01/16 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL