详解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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
一些不错的js函数ajax
Aug 20 Javascript
js select常用操作控制代码
Mar 16 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
Node.js实现文件上传
Jul 05 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
js实现简单的无缝轮播效果
Sep 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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
js实现圆盘记速表
2015/08/03 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
python2.7实现邮件发送功能
2018/12/12 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
高中毕业自我鉴定范文
2013/10/02 职场文书
卫生安全检查制度
2014/02/04 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
安全责任书怎么写
2014/07/28 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
万里长城导游词
2015/01/30 职场文书
项目负责人岗位职责
2015/02/15 职场文书
个人思想政治总结
2015/03/05 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
MySQL分区路径子分区再分区
2022/04/13 MySQL
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js