详解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 相关文章推荐
javscript对象原型的一些看法
Sep 19 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
JS中常用的消息框总结
Feb 24 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
JavaScript实现网页留言板功能
Nov 23 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
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
jquery replace方法去空格
2017/05/08 jQuery
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
webpack4简单入门实例
2018/09/06 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
python重试装饰器示例
2014/02/11 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
python对象与json相互转换的方法
2019/05/07 Python
Tensorflow 实现释放内存
2020/02/03 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
初学者学习Python好还是Java好
2020/05/26 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
python pymysql库的常用操作
2020/10/16 Python
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
保护环境建议书
2014/03/12 职场文书
安全生产工作汇报
2014/10/28 职场文书
2015年司法所工作总结
2015/04/27 职场文书
十二生肖观后感
2015/06/12 职场文书
安全责任协议书范本
2016/03/23 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python
SpringBoot集成Redis的思路详解
2021/10/16 Redis