文档章节

关于在html中怎样通过js 对通过js创建的节点增加各种事件

 恐空控
发布于 2013/07/19 23:34
字数 369
阅读 64
收藏 1

 对于这个内容光看标题大家可能不是很明白,我就在下边写一个简单的例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <title></title>

        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

        <style type="text/css">

            #main{width:960px;height:600px;background:blue;}

            #main p{width:960px;height:300px;background:red;}

        </style>

    </head>

    <body>

        <div id="main"></div>

        <script type="text/javascript">

            function $(eve){

                return document.getElementById(eve);

            }

            var main=$("main");

            var op=document.createElement("p");

            var oinput=document.createElement("input");

            op.appendChild(oinput);

            //标签 添加 点击事件

            op.onclick=function(event){

                alert(event);//这个将会打印出一个鼠标事件

                var  objdiv=window.event||event;

                var  odiv=objdiv.target||objdiv.srcElement;//获取目标

                //然后对这个目标操作即可假如这个其他事件也都可以这样添加,

                //通过这个控制它的子节点 父节点都没问题,

                //举例 通过目标控制子节点给oinput.value赋值

                odiv.firstChild.value=10;

                //这个input标签的value=10;网页上这个input标签里面的内容将显示为10

            }

            //将 一个p标签 加到 div

            main.appendChild(op);

        </script>

    </body>

</html>


上面的代码就是对用js增加的节点添加一个点击事件的例子,p标签内input标签的value默认为空 ,而我点击了用js添加的p标签时 会产生一个点击事件  而后会给p标签内的input标签的value赋值为10input内标签在网页中显示为10

© 著作权归作者所有

粉丝 10
博文 22
码字总数 7160
作品 0
成都
私信 提问
重学js之JavaScript简介

注意: 本文章为 《重学js之JavaScript高级程序设计》系列第一章。 关于《重学js之JavaScript高级程序设计》是重新回顾js基础的学习。 JavaScript是一种专门为网页交互而设计的脚本语言,主要...

故事胶片
05/27
0
0
JavaScript 学习(1)

参考资料:http://www.w3school.com.cn/js/index.asp 额,发现 http://www.w3cschool.cc 这里的资料似乎比上面那个更新鲜一些... 一、教程 js是一种轻量级的编程语言,可插入html页面中,并由...

明天以后
2014/09/30
233
0
回到基础:理解 JavaScript DOM

翻译:疯狂的技术宅 原文:medium.freecodecamp.org/an-introduc… Javascript DOM(文档对象模型)是一个允许开发人员操纵页面内容、结构和风格的接口。在本文中,我们将理解什么是 DOM 以及...

疯狂的技术宅
04/03
0
0
JavaScript性能优化小知识总结

前言   一直在学习javascript,也有看过《犀利开发Jquery内核详解与实践》,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于思考懒...

leycau
2015/03/05
30
0
写在前端性能优化之前你应该知道的 - 浏览器的加载和渲染

前言 一直想写点关于前端性能的东西,后来感觉所谓的性能优化最基本的前提是你要知道浏览器是如何针对web页面工作的.后来由于过年以及换工作等原因耽搁下来,只好利用这个休息的周末写一下. 本...

顽Shi
2014/03/23
887
0

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
10
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
1K
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部