javascript的实现事件的一些实例
嘿嘿，今天学习到了事件，其实在C#中事件只需要我们触发即可实现，但是在javascript并不是这样的，在这里，事件是javascript与html的交互，就是文档或者浏览器窗口发生的一件特定的交互瞬间。其实从定义上面你很难想象吧，那么下面就简单的举例说下。
一.实现文字改变位置
<head>
<title></title>
<script>
function getDomText() { //该方法适用于让“链接”和“文字”交换位置显示在提示在提示框中
var pnode = document.getElementsByTagName("p"); //获取p元素，让他的子节点交换位置
var str = "";
str = document.getElementById("myspan").innerHTML; //获取id为myspan的元素的文本
str += document.getElementById("myid").innerHTML; //获取id为myid的元素的文本
alert(str);
}
</script>
</head>
<body>
<p>
<a id="myid" href="#">链接</a>
<span id="myspan">文字</span><br />
<input type="button" name="name" value="按钮" onclick="getDomText()" />
</p>
</body>
上面的button就实现了onclick单击事件，然后通过事件调用了一个方法使其文本信息改变位置。
二.替换文本信息
<script>
function replaceTextContent(){ //该方法适用于替换文本信息
var pnode = document.getElementById("myDom");
pnode.innerHTML = '<span>一句话</span> <a href="">一个链接</a>';//改变id为myDom的元素的文本信息
}
</script>
<body>
<p>
<input type="button" value="替换内容 " onclick=" replaceTextContent()" />
</p>
<p id="myDom">
<a href="#">一个链接</a> <span>一句话</span>
</p>
</body>
其实在这里是替换文本信息，不局限于是原来的文本信息交换位置，可以是任意内容的，嘿嘿。
三..改变图片大小
<script>
function updateImgAttribute() {
var imgmsg = document.getElementById("myimg"); //获取图片的元素
imgmsg.width = ""; //图片存在属性width和height，然后设置即可
imgmsg.height = "";
}
</script>
<body>
<p>
<input type="button" name="btn" value="修改属性" onclick="updateImgAttribute()" />
</p>
<img src="4.jpg" id="myimg" alt="加载中!" height="" width=""/>
</body>
改变图片大小其实是通过元素的属性设置即可，或者通过获取其元素，在使用setAttribute也可以实现的，这样是最简单的。
四.显示另一个元素的值
<script>
function getOthBtnValue(btn) { //接收一个元素节点
var pnode =btn.parentNode; //把传进来的这个元素作为p的子节点
for (var i = ; i < pnode.childNodes.length; i++) {
if (pnode.childNodes[i] != btn && pnode.childNodes[i].nodeType == btn.nodeType) {
alert(pnode.childNodes[i].value); //if中的条件：当子节点满足不是btn而且子节点的类型和btn一样
}
}
}
</script>
<body>
<p>
<input type="button" name="btn1" value="显示btn2的值 " onclick="getOthBtnValue(this)"/> <!--this在这里是指当前元素-->
<input type="button" name="btn1" value="显示btn1的值 " onclick="getOthBtnValue(this)"/>
</p>
</body>
在这里写if'语句中的条件时间可能不太容易理解，但是我们可以寻找下pnode.childNodes的节点的个数即可知道我们的条件为什么要这样写，子节点的个数输出的是5，包括空白的文本节点等，所以在显示时间需要注意的。
五.克隆图片
<script>
function cloneImg() {
var imgmsg = document.getElementById("myimg");
var newimg = imgmsg.cloneNode(true); //在cloneNode中需要一个bool类型的参数，true表示强度
document.getElementById("myid").appendChild(newimg); //获取p元素，然后再p元素中添加新克隆出来的元素
}
</script>
<body>
<p id="myid">
<input type="button" name="btn" value="克隆图片" onclick="cloneImg()"/>
<br />
<img src="4.jpg" id="myimg" alt="加载中" height="" width=""/>
</p>
</body>
其实克隆图片，从名字上面的方法的名字cloneNode就知道了实现的功能，可以点击按钮克隆多张图片。
六.隐藏图片
<script>
function showOrHide() {
var myimg = document.getElementById("myimg");
var displaymsg = myimg.style.display; //display是用来显示或者隐藏
//alert(displaymsg);
if (displaymsg != 'none') { //当参数为none是为显示
myimg.style.display = 'none';
}
else {
myimg.style.display = ''; //当为空时间为隐藏
}
}
</script>
<body>
<p id="myid">
<input type="button" name="btn" value="隐藏图片" onclick="showOrHide()"/>
<br />
<img src="4.jpg" id="myimg" alt="加载中" height="" width=""/>
</p>
</body>
之前没有介绍display的使用方法，它应该是style的属性，在这里需要注意的是它的参数，仅仅存在none和空。
七.文本信息排序
<script>
function changeSeriation() {
var ulnode = document.getElementsByTagName("ul")[];//获取页面的ul元素, 在这里[0]是代表第一个ul
if (ulnode.hasChildNodes) { //判断是否包含子节点
var length = ulnode.childNodes.length; //获取子节点的长度
var str = [];
for (var i = ; i < length; i++) {
str[i] = ulnode.childNodes[]; //每次获取的子节点元素放在最前面
ulnode.removeChild(ulnode.childNodes[]); //清除当前的子节点元素，按照上面的顺序依次输出
}
for (var i = length-; i >=; i--) {
ulnode.appendChild(str[i]); //这个是相反的，每次输出的排在最后一个
}
}
}
</script>
<body>
<ul>
<li >item1</li>
<li >item2</li>
<li >item3</li>
<li >item4</li>
<li >item5</li>
</ul>
<input type="button" name="btn" value="交换顺序 " onclick="changeSeriation()"/>
</body>
在这里理解起来可能刚接触不太容易理解，但是我感觉之前学习了pop方法和push方法，其实这个就是那个理解起来相似，但是最后的显示的信息还是打不同的，仅限于理解上面，
八.form表单
<script>
window.onload = function () {
document.getElementById("btn").onclick = function (e) { // 在这使用一个匿名的方法实现单击事件
//function getAllValue(e) {
var formmsg = document.forms[]; //获取第一个form元素
var formelements = formmsg.elements; //获取form表单中的元素
//alert(formelements.length);
//var str = "";
var count = ;
for (var i = ; i < formelements.length; i++) {
//str[i] = formelements[i].name = "text";
//alert(formelements[i].value); //获取所有元素的value //alert(formelements[i].name); //获取所有元素的name if (formelements[i].getAttribute("type") == "text") { //获取tpre的值为text的元素的数量
count++;
}
}
alert(count);
}
}
</script>
<body>
<form action="/" method="post">
文本框:<input type="text" name="mytext" value="文本框 " /><br />
单选框:<input type="radio" name="myradio" value="单选框1" /><input type="radio" name="myradio" value="单选框2" /><br />
下拉列表:
<select name="myselect">
<option value="下拉列表" >==请选择==
</option>
<option value="下拉列表1">第一项</option>
<option value="下拉列表2">第二项</option>
</select>
<br />
<input type="button" name="name" id="btn" value="得到所有控件的value" />
</form>
</body>
在这里需要注意的获取form表单中的元素的value的使用和name的使用，实现单击事件可以写在html的外边，可以添加onload事件，可以使用上面的方法即可，嘿嘿。
九.通过一个按钮触发事件获取另一个按钮触发事件
<script>
function changeValue() {
var mybtnmsg = document.getElementById("btnid").click(); //元素存在一个单击事件
}
</script>
<body>
<p>
<input type="button" value="触发按钮的事件 " onclick="changeValue()" />
<input type="button" id="btnid" value="按钮提示 " onclick="alert('我被触发了')" />
</p>
</body>
十.创建新元素
<script>
function createNewElement() {
document.getElementById("p1").innerHTML = "<span>我是新添加进来的文本1</span>"; //直接通过innerHTML添加文本元素 var newspanelement = document.createNewElement("span"); //也可通过创建元素添加新的文本，这里创建的是span标签
newspanelement.appendChild(document.createTextNode("我是新添加进来的文本2"));//添加文本
var pnode = document.getElementById("p2"); //添加id为p2的p标签的的子节点span
pnode.appendChild(newspanelement); //把span的所有元素添加到p标签中
}
</script>
<body>
<p>
<input type="button" name="name" value="创建新元素 " onclick="createNewElement()" /></p>
<p id="p1"></p>
<p id="p2"></p>
</body>
十一.通过页面加载事件打开一个网页
<script>
//Window.onload() =function(){ //页面加载事件
// document.body.onclick = function () { //元素可以实现onclick事件
// alert(this.innerHTML)
// }
//} window.navigate("http://www.baidu.com");//当发生页面加载事件时间跳转到链接地址
window.location.href = "http://www.rupeng.com";//同上
</script>
<body>
<body style="background-color:red">
<p id="p">第一个DOM</p>
</body>
十二.onfocus与onblur的使用
<script>
window.onload = function () {
document.getElementById("txtname").onfocus = function () { //给文本框设置一默认值，当鼠标进入时间显示空白
this.value = '';
};
document.getElementById("txtname").onblur = function () { //当鼠标离开时间仍然显示默认值
this.value = '用户名';
}
}
</script>
<body>
<form action="/" method="post">
<table>
<tr><td>UserName</td><td>
<input type="text" id="txtname" name="txtname" value="用户名 " /></td></tr>
<tr>
<td>UserPwd</td>
<td>
<input type="password" name="txtpwd" value="密码" />
</td>
</tr>
<tr>
<td>
<input type="button" name="name" value="登录 " /></td>
<td>
<input type="reset" name="name" value="充值 " /></td>
</tr>
</table>
</form>
</body>
学习了这些实例，其实要自己直接写估计还是挺为难的，感觉还是不能自己写下来吧，不过我会更多的练习的，每次在学习做实例的时间都是非常兴奋，可以把前面学习的所有的很乱的知识使用上啦，感觉它终于有用啦，原来是实现这个功能的，就写到这里啦，发现过啦昨天好久啦，要睡觉啦，嘿嘿。
javascript的实现事件的一些实例的更多相关文章
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
- JavaScript HTML DOM 事件
JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...
- 深入理解javascript中的事件循环event-loop
前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...
- 记录下项目中常用到的JavaScript/JQuery代码二（大量实例）
记录下项目中常用到的JavaScript/JQuery代码一(大量实例) 1.input输入框监听变化 <input type="text" style="widt ...
- java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）
1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...
- JavaScript:理解worker事件api
如果你不是很了解Event事件,建议先看我上一篇随文javascript:理解DOM事件.或者直接看下文worker api. hack 首先,我们需要实例一个Worker的对象,浏览器会根据新创建的 ...
- JavaScript(1)---绑定事件、解除绑定事件
JavaScript(1)---绑定事件.解除绑定事件 一.事件概述 1.事件的几个概念 · 事件 指的是文档或者浏览器窗口中发生的一些特定交互瞬间.我们可以通过侦听器(或者处理程序)来预定事件,以便 ...
- 松软科技web教程：JavaScript HTML DOM 事件监听器
addEventListener() 方法 实例 添加当用户点击按钮时触发的事件监听器: document.getElementById("myBtn").addEventList ...
随机推荐
- Linux 下如何处理包含空格和特殊字符的文件名
Linux 下如何处理包含空格和特殊字符的文件名 作者: Avishek Kumar 译者: LCTT zpl1025 | 2015-07-08 07:47 评论: 12 收藏: 9 分享: 1 ...
- 安卓横竖屏切换时activity的生命周期
关于Activity横竖屏切换的声明周期变化: 1.新建一个Activity并把各个生命周期打印出来 2.运行Activity,得到如下信息 onCreate-->onStart-->on ...
- asp InStr
<script type="text/vbscript"> txt="This is a beautiful day!"document.write ...
- gtest日志在工程项目中的应用
网上有各种gtest的入门教学,这里就不一一重复了.本文的目的是讲解如何将gtest应用于工程应用中.利用测试驱动开发这样的理论,来先写测试代码,当自动化测试跑通以后,主工程的代码也就编写完了. 这里 ...
- ASP.NET MVC使用Oauth2.0实现身份验证
随着软件的不断发展,出现了更多的身份验证使用场景,除了典型的服务器与客户端之间的身份验证外还有,如服务与服务之间的(如微服务架构).服务器与多种客户端的(如PC.移动.Web等),甚至还有需要以服务的 ...
- Objective-C MacOS以管理员权限执行程序
在MacOS下非常多操作是须要管理员权限的, 比方我们执行chmod.在命令行下能够使用sudo chmod来申请以管理员权限执行.可是使用XCode写的程序是不能使用sudo的. 须要自己写代码来申 ...
- 非常酷的jQuery/HTML5图片滑块特效 带弹性菜单
新的一周刚刚开始,当我迷迷糊糊坐在办公桌前时,又不自主的去看了一些jQuery和HTML5的应用插件,今天我们来看一款非常酷的jQuery/HTML5图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...
- memcached监控工具
最简单和最直接的方式是在启动memcached的时候加入-vv参数,从而在控制台打印每次客户端的请求和相应,这非常适合开发.另外一种较为直接的方式是通过telnet进行查看,例如:若server为本机 ...
- zip压缩工具 tar打包 打包并压缩
6.5 zip压缩工具 6.6 tar打包 6.7 打包并压缩 zip压缩工具 xz,bzip2,gzip都不支持压缩目录 zip可以压缩目录 压缩文件 zip 2.txt.zip 2.txt [ ...
- Struts2/XWork 安全漏洞及解决办法
exploit-db网站在7月14日爆出了一个Struts2的远程执行任意代码的漏洞. 漏洞名称:Struts2/XWork < 2.2.0 Remote Command Execution V ...