今天学习了javascript中的事件,已经接近尾声,可以说明天跨入jquery的学习啦,学习了一周的javascript,感觉还没有掌握其中学习的微妙之处,javascript使用起来是比较灵活的,而且很多浏览器的兼容性还是不一样的,嘿嘿,或许这就是原因的所在吧,在事件的处理上面还是很容易理解的,前面学习了那么多的语法知识以及对DOM的操作,想必在事件的学习上还是很容易接受的,就来总结一下吧。
一.this的对象的区分
<script> //实现html与js分离的原则 window.onload = function () { document.getElementsByName("btn")[0].onclick = function () { alert("我点击的是第一个按钮"); alert(this); //this指的是windw alert(this.value); //this指的是所因为0的按钮 }; document.getElementsByName("btn")[1].onmouseenter = function () { alert(this.value); //指的是鼠标进入事件 }; function showMsg() { alert("my name is btn "); }; document.getElementsByName("btn")[2].onclick=showMsg; //鼠标的单击事件 }; </script> <body> <form> <input type="button" name="btn" value="点击" /><br /> <input type="button" name="btn" value="点击函数执行" /><br /> <input type="button" name="btn" value="函数体赋值" /> </form> </body>
其实刚开始接触javascript就接触了this,那时间虽然知道当前页面有个父类是window,但是却不知道在直接alert(this)的this为window,一直在迷茫中也没有明白,后来还是看了一个有关闭包的问题才对this有了了解,可以说就在这时间我才分清楚this在什么情况下指的是window,在什么情况下是当前的对象。就来看下我理解this时间的例子:
<script> var name = "my name"; var resoult=""; var object = { name: "my object", getNameFunc: function () { return function () { return this.name; }; } }; alert(object.getNameFunc()()); </script> <script> var name = "my name"; var resoult=""; var object = { name: "my object", getNameFunc: function () { var that = this; return function () { return that.name; }; } }; alert(object.getNameFunc()()); </script>
可以看下上面的两个例子的区别,一个是直接返回name,一个是把this赋值给that,而第一个弹出的值是my name,第二个弹出的值是my object,嘿嘿,我刚开始直接看这个例子时间没考虑很多,只是猜一猜的心态感觉第一个是object,第二个是name,恰恰相反的是,第一是name,第二个是object,这个说起来只有分析,但是你尝试的时间结果就在你面前,你也不得不相信啦,至于为什么会是这样的结果,还是我师傅给的解释:javascript是动态(或者动态类型)语言,this关键字在执行的时候才能确定是谁。所以this永远指向调用者,即对‘调用对象‘者的引用。第一部分通过代码:object.getNameFunc()调用返回一个函数。这是个返回的函数,它不在是object的属性或者方法,此时调用者是window。因此输出是 The Window;第二部分,当执行函数object.getNameFunc()后返回的是:function(){return that name};此时的that=this,而this指向object,所以that指向object,无论执行多少次,都是执行对object的引用,所以弹出的是my object。这个还是最好理解的吧,嘿嘿。
二.鼠标按下和按钮提交事件
<script> window.onload = function () { document.body.getElementsByTagName("span")[0].onmousedown = function (e) { var e = e || window.event; //在这里鼠标按下事件有三种情况,0代表鼠标左键按下事件,1代表鼠标滚轴按下事件,2代表右键按下事件 alert(e.button); }; document.getElementsByName("name")[0].onsubmit = function (e) { e.preventDefault(); //阻止默认行为的发生 }; }; </script> <body> <p style="background-color:pink">1234</p> <span style="background-color:yellow">元素</span> <input type="submit" name="name" value="提交 " id="submit" /> </body>
在写鼠标的onmousedown事件时间,这个就是要考虑其他的情况啦,我上面的注释写的鼠标的左右和滚轴键按下的事件弹出的数字,在IE里卖弄是不一样的,其他浏览器是这样的情况,IE中左键是0,滚轴键是4,鼠标的右键按下事件则是2,这个是需要注意的。另外,在第二个submit提交的事件中传的一个参数e,很确定的说学习了上面的this,在这里应该能够反映过来e指的就是我们的window对象,可以使用preventDefault()来阻止浏览器加载就要跳转的页面。
三.冒泡与捕获
<script> window.onload = function () { document.getElementById("outdiv").onclick = function () { alert("我是外层div"); }; document.getElementById("div").onclick = function () { alert("我是中层div"); }; document.getElementById("innerdiv").onclick = function () { alert("我是内层div"); }; }; </script> <body> <div style="background-color:yellow;height:800px" id="outdiv"> 123 <div style="background-color:red;height:600px" id="div"> 234 <div style="background-color:silver" id="innerdiv"> 345 </div> </div> </div> <a href="http://www.baidu.com" id="link">链接</a> </body>
冒泡事件:其实就是在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。上面的定义看过后不一定能够真正的了解,还是实施操作实例吧,嘿嘿,很简单的说:冒泡事件,即点击内层的div时间中层的和外层的都可以触发,点击中层的外层的可以触发。这是看上面的实例写的。
四.按键按下事件
<script> window.onload = function () { document.getElementById("txt").onkeydown = function () { var length = this.value.length; if (length > 150) { return false; } else { document.getElementById("span").innerHTML = length + "/150"; } }; }; </script> <body> <textarea id="txt" style="background-color:silver" rows="20" cols="20"> </textarea><span id="span">0/150</span> </body>
看到按键按下事件可能很模=迷惑,这个事件能有什么用那?不要着急,其实像上面的事件的实现我们就可以想象我们在qq空间发表说说时间是不是有一个限制,最多的字是多少?当达到一定字的数量输入的字即被忽略。在这里使用的就是按键的按下事件。
五.页面刷新事件
<script> function fresh() { window.location.reload(); //调用location对象的reload函数 } setTimeout("fresh()",10000); </script> <body> <p>页面正在刷新</p><span id="span"></span> </body>
页面刷新使用的reload方法,这里方法一般用于要求不断更新数据的情况下,不断更新数据当然需要的不是手动的更新,而是页面自动更新,这样的情况主要使用于像12306的预定火车票,甚至更精确地是炒股的页面。
六.页面的前进与后退
<body> <span>我是第一个标签</span><a href="007.html">007back</a> </body>
<script> window.onload = function () { document.getElementById("btn").onclick = function () { window.history.back(); //返回到上一页 }; document.getElementById("back").onclick = function () { window.history.farword(); //前进到下一页 }; } </script> <body> <input type="button" name="name" value="向前 " id="btn" /> <input type="button" name="name" value="退后 " id="back" /> </body>
<body> 最后以及节点<a href="007.html">退后</a> </body>
前几天就学习了页面的前进与后退使用window的history这个属性,但是仅仅学习了后退使用的是history的back()方法或者在IE上面也可以使用go(-1),现在学习下前进页面则使用的是history的farword()方法,这样实现了页面的前进与后退。
七.页面在一定的时间内未发生事件则关闭
<script> window.onload = function () { document.getElementsByTagName("body")[0], onclick = function () { var bool = true; function clickBody() { bool= false; }; setInterval(function () { if (bool) { window.close(); } else { bool = true; }; },10000); }; }; </script> <body> <p>如果10秒钟之后不操作,那么页面自动关闭</p> </body>
这个功能的实现可能会使用在我们个人的的信息需要保密,当我们长时间未操作界面即可让他关闭即可。有助于保护我们的个人隐私信息。
八.广告的实现
<script> function showAdPic() { var ad = document.getElementById("ad"); ad.innerHTML = "<img src=‘1.jpg‘ width=‘300‘ height=‘200‘>"; setTimeout(function () { ad.style.display = ‘none‘; },10000) } window.onload = showAdPic; </script> <body> <p>网页内容上部</p> <p id="ad"></p> <p>网页内容下部</p> </body>
说起来广告页面,我们都很讨厌的,嘿嘿,这是一种最简单的方法实现的广告的页面的呈现,即在这里是呈现10钟后消失。
九.五角星实现评分的效果
<script> window.onload = function () { var isClicked; var spansnode = document.getElementsByTagName("span"); for (var i = 0; i < spansnode.length; i++) { spansnode[i].onmouseover = function () {// 鼠标进入的事件 if (isClicked) return; for (var j = 0; j < spansnode.length; j++) { spansnode[j].innerHTML = "★"; if (spansnode[j] === this) { break; } } }; spansnode[i].onmouseout = function () {// 鼠标离开事件 if (isClicked) return; for (var j = 0; j < spansnode.length; j++) { spansnode[j].innerHTML = "☆"; } }; } } </script> <body> <div> <span>☆</span> <span>☆</span> <span>☆</span> <span>☆</span> <span>☆</span> </div> </body>
上面的功能其实也是我们很熟悉的,最常见的地方就是我们在淘宝买完商品后对店家的评分,功能其实就是这样实现的。
十.菜单的事件
<style> .meun { list-style: none; width: 400px; margin: 10px auto; } .meun li { float: left; width: 98px; border: 1px solid black; } .meun a { color: black; width: 100%; } .meun a:hover { background-color: pink; } .curr { background-color: pink; } </style> <script> window.onload = function () { var currentIndex = 1; var menunodes = document.getElementById(‘menu‘); var itemslinode = menunodes.children; for (var i = 0; i < itemslinode.length; i++) { itemslinode[i].onmouseover = function () { this.className = ‘menuname‘; }; }; }; </script> <body style=" text-align:center"> <ul class="menu" id="menu"> <li><a href="#" class="a">菜单</a></li> <li><a href="#" class="a" >菜单</a></li> <li><a href="#" class="a">菜单</a></li> <li><a href="#" class="a">菜单</a></li> </ul> </body>
好啦,今天就写到这里,可以说javascript的基本知识要告一段落啦,下面就要学习它的一个库JQuery,熟悉了javascript不知道学习jquery是否真的很简单,但是无论怎样都想以一种诚恳的态度对待,相信只有这样学习起来才不会输在起点上面,嘿嘿,明天继续加油!