javascript
第四部分：JS事件
本部分將介紹JS中的事件，由于各種瀏覽器的事件不同，所以有分歧，故事件在不同瀏覽器中有不同的形式，本部分主要研究IE和火狐之下的事件差異。
1.事件的分類
（1）鼠標(biāo)事件
???????? ①onclick事件：是指鼠標(biāo)單擊時(shí)觸發(fā)的事件
???????? ②ondbclick事件：是指鼠標(biāo)雙擊時(shí)觸發(fā)的事件
???????? ③onmousemove事件：是指鼠標(biāo)浮在控件上面時(shí)觸發(fā)的事件，和onmouseover的主要區(qū)別在于：onmouseover事件只要鼠標(biāo)一直浮在控件上面就一直觸發(fā)這個(gè)事件
???????? ④onmousedown事件：是指按下鼠標(biāo)時(shí)觸發(fā)的事件 不論鼠標(biāo)是否松開
???????? ⑤onmouseout事件：是指鼠標(biāo)移出控件時(shí)所觸發(fā)的事件
???????? ⑥onmouseover事件：是指當(dāng)鼠標(biāo)第一次進(jìn)入控件上面時(shí)觸發(fā)的事件，就只觸發(fā)這一次，除非再一次進(jìn)入
???????? ⑦onmouseup事件：是指當(dāng)鼠標(biāo)點(diǎn)擊之后松開鼠標(biāo)時(shí)觸發(fā)的事件
（2）鍵盤事件
???????? ①onkeydown事件：是指鍵盤按下就出發(fā)的事件（不論你松不松開鍵盤），當(dāng)這時(shí)為文本框賦值時(shí)，文本框里還沒(méi)有值就出發(fā)了
???????? ②onkeypress事件：和onkeydown事件一樣
???????? ③onkeyup事件：是指按下鍵盤松開鍵盤之后觸發(fā)的事件
（3）接口事件
???????? ①blur：使失去焦點(diǎn)
???????? ②reset：使表單重置
???????? ③submit：使表單提交
2.事件的取消
（1）return false方式
（2）如果是IE瀏覽器，window.event.returnValue=false;
（3）如果是火狐瀏覽器：e.preventDefault();
?
例如:??????????? document.getElementById("txtTest").onkeydown = function (e) {
??????????????? ????????????????if (window.event) {
??????????????????????????????????? window.event.returnValue = false;
??????????????????????????????? }
??????????????????????????????? else {
??????????????????????????????????? e.preventDefault();
???????????????????? ???????????}
????????????? }
或者直接用return false;
3.事件的注冊(cè)
???????? 如果要是一個(gè)控件想要綁定多個(gè)事件，每個(gè)都要綁定的話，很費(fèi)事，所以JS給我們提供了一種方法，來(lái)為一個(gè)控件綁定多個(gè)事件。
（1）在IE下：element.attachEvent(“on+事件名", function () {……});
（2）在火狐下：element.addEventListener(“事件名”,function(){……},”bool值”),最后一個(gè)bool值是指：? false是設(shè)置冒泡由里到外，true是由外到里
?
例如：???????? if (window.attachEvent) {//判斷是否支持attachEvent
??????????????? document.getElementById("testDiv").attachEvent("onmousemove", function () { alert(123); });
??????????? }
??????????? else {
??????????????? document.getElementById("testDiv").addEventListener("mousemove", function () { alert(123); },false);
??????????? }
4.事件的冒泡和取消
（1）在IE下：window.event. cancelBubble()=true;
（2）在火狐下：e. stopPropagation();
例如：
<html>
<head>
??? <title></title>
??? <script type="text/javascript">
??????? window.onload = function () {
??????????? document.getElementById("outerDiv").onclick = function () {
??????????????? alert("你點(diǎn)擊了outerDiv");
??????????? }
??????????? document.getElementById("innerDiv").onclick = function (e) {
??????????????? alert("你點(diǎn)擊了innerDiv")
??????????????? if (window.event) {
??????????????????? window.event.cancelBubble = true;
??????????????? }
??????????????? else {
??????????????????? e.stopPropagation();
??????????????? }
??????????? }
?? ?????}
??? </script>
</head>
<body>
??? <div id="outerDiv" style="width: 200px; height: 200px; background: green;">
??????? <div id="innerDiv" style="width: 100px; height: 100px; background: red;">
??????? </div>
??? </div>
</body>
</html>
注意：冒泡時(shí)：當(dāng)你點(diǎn)擊里面的div，外面div的點(diǎn)擊事件也被觸發(fā)，所以有時(shí)需要取消冒泡！
5. IE與火狐之間的區(qū)別總結(jié)
ff代表火狐瀏覽器。
（1）事件源
IE中：window.event.srcElement
ff中：e.target
（2）綁定事件
IE中：element.attachEvent(on+"事件名",function(e){……})
ff中：element.addEventListener(事件名(沒(méi)有on),function(){},bool值)?? //false是設(shè)置冒泡 有里到外，true是由外到里
（3）取消事件
IE中：? window.event.returnValue = false;
ff中：e.preventDefault();
（4）取消冒泡
IE中：window.event.cancelBubble=true;
ff中：e.stopPropagation();
（5）得到文本
IE中:element.innerText
ff中：element.textContent;
（6）取得鍵值
IE中： window.event.keyCode;
ff中： e.which;
?
轉(zhuǎn)載于:https://www.cnblogs.com/jiajiayouba/archive/2011/11/27/2265214.html
總結(jié)
- 上一篇： Linux环境用Sendmail架设Ma
- 下一篇： 文件夹和文件的名称变成蓝色