HTML 事件响应函数,详解js的事件处理函数和动态创建html标记方法

╰+哭是因爲堅強的太久メ 2022-10-06 11:43 150阅读 0赞

1 HTML的事件属性

全局事件属性:HTML 4 增加了使事件在浏览器中触发动作的能力，比如当用户点击元素时启动 JavaScript。

a. Window 事件属性，针对 window 对象触发的事件(应用到

标签)，常用的为onload。

b. Form事件，由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素，但最常用在 form 元素中)：常用的为onblur、onfocus、onselect、onsubmit。

c. keybord事件

d.Mouse事件，由鼠标或类似用户动作触发的事件：常用的为onclick、onmouseover、onmouseout。

e. Media事件，由媒介(比如视频、图像和音频)触发的事件(适用于所有 HTML 元素，但常见于媒介元素中，比如 、、、 以及     )。

2  事件处理函数

文档的结构与文档的行为混杂在一起，例如：

文档的结构与文档的行为分开，例如：

element.onclick = function() \{ showPic(whichpic); return false; \}

3 共享onload事件

页面加载之后立即执行一段 JavaScript：，如果想让页面加载后执行多个脚本呢？办法是:

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标签)分离的原则相背。

document.write

document.write("

This is inserted by document.write

");

innerHTML适合将一大段HTML内容插入网页,如:

window.onload = function() \{

var testdiv = document.getElementById("testdiv");

testdiv.innerHTML = "

This is inserted by *innerHTML*

";

\}

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);

\}

\}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

发表评论取消回复

表情：

评论列表（有 0 条评论，150人围观）

还没有评论，来说两句吧...

相关阅读

相关 js监听html页面的上下滚动事件方法

html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

柔情只为你懂/ 2022年12月21日 04:55/ 0 赞/ 443 阅读

相关 HTML 事件响应函数,详解js的事件处理函数和动态创建html标记方法

1 HTML的事件属性全局事件属性:HTML 4 增加了使事件在浏览器中触发动作的能力，比如当用户点击元素时启动 JavaScript。 a. Window 事件属性，针

╰+哭是因爲堅強的太久メ/ 2022年10月06日 11:43/ 0 赞/ 151 阅读

相关 AJAX动态创建HTML元素click事件无效

解决办法：将click事件绑定到body元素下面（缺点：body上事件绑定多了，页面受不了） $("body").on("click","Ajax动态创建

野性酷女/ 2022年09月25日 12:21/ 0 赞/ 184 阅读

相关 [html]事件处理addEventListener详解

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

﹏ヽ暗。殇╰゛Y/ 2022年08月05日 07:38/ 0 赞/ 238 阅读

相关 JQuery之内置函数响应事件

今天给大家介绍一下on函数中events的种类和用法。具体我把它分为：键盘事件，鼠标事件，input事件，还有一个是基础事件（例如：滚动，界面大小变化等等之类的）。一：

柔光的暖阳◎/ 2022年07月18日 04:18/ 0 赞/ 198 阅读

相关 html5 Audio常用属性和函数事件

项目需要，要做一个音乐播放器，于是又复习了一遍h5播放器各种属性。![20180422184843319][]![20180422184855576][]![201804221

悠悠/ 2022年05月26日 01:24/ 0 赞/ 190 阅读

相关直接在HTML标记中指定事件处理程序

一、介绍该方法是直接在HTML标记中指定事件处理程序，例如在<body>和<input>标记中指定。语法： <标记 … … 事件="事件处理程序" \[事件="事件处

拼搏现实的明天。/ 2022年05月11日 23:50/ 0 赞/ 117 阅读

相关 Html js鼠标 Mouseover事件和Mouseout事件

Html js鼠标事件 Mouseover事件（重点）：鼠标移动到标签之上 Mouse 鼠标 Over 在…之上 Mouseout事件（重点）：鼠标离开标签

浅浅的花香味﹌/ 2022年04月15日 02:08/ 0 赞/ 299 阅读

相关 JS--JavaScript事件处理基础、事件模型、事件流（冒泡型、捕获型、混合型）、绑定事件（静态绑定和动态绑定）、事件处理函数

JavaScript事件基础 JavaScript与用户之间的交互是通过事件驱动来实现的，事件驱动是面向对象程序设计的重要概念，其核心就是以消息为基础、以事件来驱动（me

迈不过友情╰/ 2021年08月13日 19:17/ 0 赞/ 508 阅读

相关 JS三大事件（鼠标事件、键盘事件、html事件）

鼠标事件 click：单击 dblclick：双击 mousedown：鼠标按下 mouseup：鼠标抬起 mouseover：鼠

今天药忘吃喽~/ 2021年06月26日 16:06/ 0 赞/ 696 阅读