首页 > 代码库 > javascript的实现事件的一些实例
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=http://www.mamicode.com/"#">链接</a> <span id="myspan">文字</span><br /> <input type="button" name="name" value=http://www.mamicode.com/"按钮" 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=http://www.mamicode.com/"替换内容 " onclick=" replaceTextContent()" /> </p> <p id="myDom"> <a href=http://www.mamicode.com/"#">一个链接</a> <span>一句话</span> </p></body>
其实在这里是替换文本信息，不局限于是原来的文本信息交换位置，可以是任意内容的，嘿嘿。
三..改变图片大小
<script> function updateImgAttribute() { var imgmsg = document.getElementById("myimg"); //获取图片的元素 imgmsg.width = "500"; //图片存在属性width和height，然后设置即可 imgmsg.height = "500"; } </script><body> <p> <input type="button" name="btn" value=http://www.mamicode.com/"修改属性" onclick="updateImgAttribute()" /> </p> <img src=http://www.mamicode.com/"4.jpg" id="myimg" alt="加载中!" height="200" width="200"/></body>
改变图片大小其实是通过元素的属性设置即可，或者通过获取其元素，在使用setAttribute也可以实现的，这样是最简单的。
四.显示另一个元素的值
<script> function getOthBtnValue(btn) { //接收一个元素节点 var pnode =btn.parentNode; //把传进来的这个元素作为p的子节点 for (var i = 0; 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=http://www.mamicode.com/"显示btn2的值 " onclick="getOthBtnValue(this)"/> <!--this在这里是指当前元素--> <input type="button" name="btn1" value=http://www.mamicode.com/"显示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=http://www.mamicode.com/"克隆图片" onclick="cloneImg()"/> <br /> <img src=http://www.mamicode.com/"4.jpg" id="myimg" alt="加载中" height="200" width="200"/> </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=http://www.mamicode.com/"隐藏图片" onclick="showOrHide()"/> <br /> <img src=http://www.mamicode.com/"4.jpg" id="myimg" alt="加载中" height="200" width="200"/> </p></body>
之前没有介绍display的使用方法，它应该是style的属性，在这里需要注意的是它的参数，仅仅存在none和空。
七.文本信息排序
<script> function changeSeriation() { var ulnode = document.getElementsByTagName("ul")[0];//获取页面的ul元素, 在这里[0]是代表第一个ul if (ulnode.hasChildNodes) { //判断是否包含子节点 var length = ulnode.childNodes.length; //获取子节点的长度 var str = []; for (var i = 0; i < length; i++) { str[i] = ulnode.childNodes[0]; //每次获取的子节点元素放在最前面 ulnode.removeChild(ulnode.childNodes[0]); //清除当前的子节点元素，按照上面的顺序依次输出 } for (var i = length-1; i >=0; 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=http://www.mamicode.com/"交换顺序 " onclick="changeSeriation()"/></body>
在这里理解起来可能刚接触不太容易理解，但是我感觉之前学习了pop方法和push方法，其实这个就是那个理解起来相似，但是最后的显示的信息还是打不同的，仅限于理解上面，
八.form表单
<script> window.onload = function () { document.getElementsByName("btn").onclick = function(e){ // 在这使用一个匿名的方法实现单击事件 //function getAllValue(e) { var formmsg = document.forms[0]; //获取第一个form元素 var formelements = formmsg.elements; //获取form表单中的元素 //var str = ""; var count=0; for (var i = 0; i < formelements.length; i++) { //str[i] = formelements[i].name = "text"; //alert(formelements[i].name); if (formelements[i].getAttribute("type") == "text") { count++; } alert(count); } } } </script><body> <form action="/" method="post"> 文本框:<input type="text" name="mytext" value=http://www.mamicode.com/"文本框 " /><br /> 单选框:<input type="radio" name="myradio" value=http://www.mamicode.com/"单选框1" /><input type="radio" name="myradio" value=http://www.mamicode.com/"单选框2" /><br /> 下拉列表: <select name="myselect"> <option value=http://www.mamicode.com/"下拉列表" >==请选择== </option> <option value=http://www.mamicode.com/"下拉列表1">第一项</option> <option value=http://www.mamicode.com/"下拉列表2">第二项</option> </select> <br /> <input type="button" name="name" id="btn" value=http://www.mamicode.com/"得到所有控件的value" onclick="" /> </form></body>
在这里需要注意的获取form表单中的元素的value的使用和name的使用，很可惜的是我没有写出来，不知道哪出了问题，希望写出来能够改正。
九.通过一个按钮触发事件获取另一个按钮触发事件
<script> function changeValue() { var mybtnmsg = document.getElementById("btnid").click(); //元素存在一个单击事件 } </script><body> <p> <input type="button" value=http://www.mamicode.com/"触发按钮的事件 " onclick="changeValue()" /> <input type="button" id="btnid" value=http://www.mamicode.com/"按钮提示 " onclick="alert(‘我被触发了‘)" /> </p></body>
十.创建新元素
<script> function createNewElement() { document.getElementById("p1").innerHTML = "<span>我是新添加进来的文本1</span>"; //直接通过innerHTML添加文本元素 var newspanelement = 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=http://www.mamicode.com/"创建新元素 " 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.mamicode.com/"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 = http://www.mamicode.com/‘‘; }; document.getElementById("txtname").onblur = function () { //当鼠标离开时间仍然显示默认值 this.value = http://www.mamicode.com/‘用户名‘; } } </script><body> <form action="/" method="post"> <table> <tr><td>UserName</td><td> <input type="text" id="txtname" name="txtname" value=http://www.mamicode.com/"用户名 " /></td></tr> <tr> <td>UserPwd</td> <td> <input type="password" name="txtpwd" value=http://www.mamicode.com/"密码" /> </td> </tr> <tr> <td> <input type="button" name="name" value=http://www.mamicode.com/"登录 " /></td> <td> <input type="reset" name="name" value=http://www.mamicode.com/"充值 " /></td> </tr> </table> </form></body>
学习了这些实例，其实要自己直接写估计还是挺为难的，感觉还是不能自己写下来吧，不过我会更多的练习的，每次在学习做实例的时间都是非常兴奋，可以把前面学习的所有的很乱的知识使用上啦，感觉它终于有用啦，原来是实现这个功能的，就写到这里啦，发现过啦昨天好久啦，要睡觉啦，嘿嘿。
javascript的实现事件的一些实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。