JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

周末無聊，這幾天又復(fù)習(xí)了下JS搞基程序設(shè)計(jì)3， 想著好記性不如浪筆頭哇，要么把這些東西寫下來，這樣基礎(chǔ)才能更加扎實(shí)么么噠, 知道的同學(xué)也可以直接過一下,當(dāng)做復(fù)習(xí)， 小姨子再也不用擔(dān)心我的學(xué)習(xí)啦；

成都創(chuàng)新互聯(lián)公司成立與2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元阜康做網(wǎng)站,已為上家服務(wù),為阜康各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

從哪里開始呢????? JS中的事件類型和事件屬性的基礎(chǔ)知識(shí) ？ ???????

事件的類型

DOM3規(guī)定了下面這幾事件類型:
　　UI事件；onload，resize，scoll等等;
　　焦點(diǎn)事件；
　　鼠標(biāo)事件；
　　滾輪事件；
　　文本事件；
　　鍵盤事件；
　　變動(dòng)事件；（用的也少）；
　　變動(dòng)名稱事件，當(dāng)元素的屬性名發(fā)生改變的時(shí)候觸發(fā)（沒啥用，要弄編輯器的時(shí)候才用得到）；

UI事件：
　　　　"DOMActivate" : 元素被用戶操作(鼠標(biāo)或者鍵盤激活)會(huì)觸發(fā)的事件, chrome(38)有效， firefox(34)下無效, 代碼如下,點(diǎn)擊即可打開查看:

運(yùn)行下面代碼

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>事件的類型</title>
            <meta charset="UTF-8" />
        </head>
        <body>
        <pre>
            test        </pre>
        <script>
            document.body.addEventListener("DOMActivate",function(){
                alert("body")
            },false);
            document.getElementsByTagName("pre")[0].addEventListener("DOMActivate",function(){
                alert("pre")
            },false);        </script>
        </body>
        </html>

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

"onload" : 會(huì)在window， object 以及 img上面觸發(fā)(PS:IE8和IE8之前的script標(biāo)簽不支持但是支持onreadystatechange, IE家族中所有元素都支持這個(gè)狀態(tài)屬性么么噠)
　　"unload" : window.onuload , object.onunload ,圖像不觸發(fā)onunload;

運(yùn)行下面代碼

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>事件的類型</title>
    <meta charset="UTF-8" /></head><body><pre>
            test
            //圖像被刪除不觸發(fā)unload事件;        </pre><script>
    var i = document.createElement("img");
    document.body.appendChild(i);
    i.onload = function() {alert("load")};
    i.onunload = function() {
        alert("onunload");
    };    //記得要先添加事件哦, 因?yàn)閕mg標(biāo)簽只要添加了url就會(huì)開始加載, script和link標(biāo)簽要等到添加到DOM中才開始加載!important;    i.src="http://static.cnblogs.com/images/logo_small.gif";
    document.body.removeChild(i);</script></body></html>

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

"error" :　當(dāng)一個(gè)ｊｓ代碼執(zhí)行發(fā)生錯(cuò)誤的時(shí)候觸發(fā)，　或者img, object, script等需要請(qǐng)求遠(yuǎn)程資源的標(biāo)簽沒有請(qǐng)求到, 就會(huì)觸發(fā)這個(gè)事件, 這個(gè)事件實(shí)際工作中用的不多。。　

運(yùn)行下面代碼

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>事件的類型</title>
            <meta charset="UTF-16" />
        </head>
        <script>
            window.onerror = function(){
                alert("JS執(zhí)行發(fā)出錯(cuò)誤!")
            };
            a(1)        </script>
        <body>
        <pre>
            <img onerror="alert('error')" src="unknow.png" />
        </pre>
        </body>
        </html>

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

"abort" : 用戶停止下載(用戶問題)或者內(nèi)容沒有加載完畢(服務(wù)器問題), 就會(huì)觸發(fā);
"resize" : 把窗口拉大拉小, 最大化和最小化也會(huì)觸發(fā)這個(gè)事件(在移動(dòng)端上的onoritatinochange反應(yīng)很慢,就可以用resize代替),而且火狐的低版本是等到用戶停止resize才會(huì)執(zhí)行事件函數(shù);
"scroll" : 滾動(dòng),主要是window.onscroll這個(gè)事件。

resize事件的執(zhí)行快的話70毫秒，慢的話100毫秒執(zhí)行一次,DEMO，你把界面resize一下，然后快一點(diǎn)點(diǎn)擊cacl 這個(gè)按鈕測試瀏覽器平均多久執(zhí)行一次resize的事件,別怪我懶啊,鍛煉你的反應(yīng)力的時(shí)候到了，懂嗎 \\~_~///;

運(yùn)行下面代碼

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>事件的類型</title>
    <meta charset="UTF-16" /></head><body><pre>
            sdfs        </pre><div>
    result:0</div><button onclick="calc()"> calc </button><script>
    var startTime = null;    var times = []
    window.onresize = function(){        if(startTime === null) {
            startTime =  new Date().getTime();
        };
        times.push(new Date().getTime() - startTime);
        console.log(new Date().getTime() - startTime)
    };    function calc(){        var len = times.length;;        var val = times.reduce(function(a,b){return a+b})/len;        document.getElementsByTagName("div")[0].innerHTML = val+"毫秒";
    };</script></body></html>

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

焦點(diǎn)事件 : 焦點(diǎn)事件可以獲取用戶在界面上的行蹤;
　　blur : 失去焦點(diǎn)的時(shí)候觸發(fā)，不冒泡；
　　focus ：這個(gè)是聚焦的時(shí)候發(fā)生，不冒泡；
　　DOMFocusIn ：這個(gè)時(shí)間和 focusin一樣，只是DOM三選擇了focusin
　　DOMFocusOut ：這個(gè)時(shí)間和 focusout一樣，只是DOM3選擇了focusout
　　focusin ：冒泡的聚焦事件;
　　focusout ：冒泡的失焦事件;

檢測焦點(diǎn)事件的代碼如下,只能說火狐不給力，:

運(yùn)行下面代碼

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>事件的類型</title>
    <meta charset="UTF-8" /></head><body><button id="btn"> calc </button>
    <pre>
        chrome 的結(jié)果
            focus
            focusin
            body focusin
            DOMFocusIn
            blur
            focusout
            body focusout
            DOMFocusOut
        firefox的結(jié)果：
            "focus"
            "blur"

        chorme所有的冒泡事件都支持。
        火狐34還是只支持focus 和blur， 而且界面一開始就自動(dòng)對(duì)body進(jìn)行了focus;    </pre><script>
    var eventUtil = {
        add : function(el, type, handler) {            if(el.addEventListener) {
                el.addEventListener(type, handler, false);
            }else if( el.attachEvent ) {
                el.attachEvent("on"+type, handler);
            }else{
                el["on"+type] = handler;
            }
        },
        off : function(el, type, handler) {            if( el.removeEventListener ) {
                el.removeEventListener(type, handler, false)
            }else if( el.detachEvent ) {
                el.detachEvent(type, handler);
            }else{
                el["on"+type] = null;
            }
        }
    };    var eBtn = document.getElementById("btn");
    eventUtil.add(eBtn,"focus",function() {
        console.log("focus")
    })
    eventUtil.add(eBtn,"blur",function() {
        console.log("blur")
    })
    eventUtil.add(eBtn,"DOMFocusIn",function() {
        console.log("DOMFocusIn")
    })
    eventUtil.add(eBtn,"DOMFocusOut",function() {
        console.log("DOMFocusOut")
    })
    eventUtil.add(eBtn,"focusout",function() {
        console.log("focusout")
    })
    eventUtil.add(eBtn,"focusin",function() {
        console.log("focusin")
    });
    eventUtil.add(document.body,"focusin",function() {
        console.log("body focusin")
    });
    eventUtil.add(document.body,"focusout",function() {
        console.log("body focusout")
    });    /*
     document.body.onfocus = function(){
     console.log("body focusin")
     }     */</script></body></html>

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

鼠標(biāo)和滾輪你事件:
　　DOM3規(guī)定了9個(gè)鼠標(biāo)事件(.........)你數(shù)一數(shù)，是不是剛好九個(gè)；
　　click：一般是左鍵觸發(fā)這個(gè)事件，右鍵是觸發(fā)右鍵菜單，如果當(dāng)前的元素獲得焦點(diǎn)，那么我們按回車(enter)也會(huì)觸發(fā)click事件，這個(gè)DEMO不是讓你點(diǎn)擊，是讓你在按鈕聚焦的情況下按enter鍵：

運(yùn)行下面代碼

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>事件的類型</title>
        <meta charset="UTF-8" />
    </head>
    <body>
    <button autofocus="true" id="btn"> calc </button>
    <pre>

    </pre>
    <script>
    var eventUtil = {
        add : function(el, type, handler) {            if(el.addEventListener) {
                el.addEventListener(type, handler, false);
            }else if( el.attachEvent ) {
                el.attachEvent("on"+type, handler);
            }else{
                el["on"+type] = handler;
            }
        },
        off : function(el, type, handler) {            if( el.removeEventListener ) {
                el.removeEventListener(type, handler, false)
            }else if( el.detachEvent ) {
                el.detachEvent(type, handler);
            }else{
                el["on"+type] = null;
            }
        }
    };    var eBtn = document.getElementById("btn");
    eventUtil.add(eBtn,"click",function() {
        alert("click")
    })    </script>
    </body>
    </html>

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

dblclick：鼠標(biāo)雙擊的時(shí)候觸發(fā)，有時(shí)候有用，如果dblclick觸發(fā)了也會(huì)觸發(fā)click的事件;

運(yùn)行下面代碼

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>事件的類型</title>
        <meta charset="UTF-16" />
    </head>
    <body>
    <div id="btn"> calc </div>
    <pre>

    </pre>
    <script>
    var eventUtil = {
        add : function(el, type, handler) {            if(el.addEventListener) {
                el.addEventListener(type, handler, false);
            }else if( el.attachEvent ) {
                el.attachEvent("on"+type, handler);
            }else{
                el["on"+type] = handler;
            }
        },
        off : function(el, type, handler) {            if( el.removeEventListener ) {
                el.removeEventListener(type, handler, false)
            }else if( el.detachEvent ) {
                el.detachEvent(type, handler);
            }else{
                el["on"+type] = null;
            }
        }
    };    var eBtn = document.getElementById("btn");
    eventUtil.add(eBtn,"click",function() {
        console.log("click")
    })
    eventUtil.add(eBtn,"dblclick",function() {
        console.log("dblclick")
    });    /*
        控制臺(tái)輸出 ：
        "click"
        "dblclick"
        "click"
        "dblclick"
        結(jié)論就是兩次快速的點(diǎn)擊會(huì)觸發(fā)一次dblclick(dbl的意思就是doubleclick的縮寫)    */
    </script>
    </body>
    </html>

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

事件名字只要包含mouse，都只能通過鼠標(biāo)的觸發(fā)比如, 無法通過鍵盤觸發(fā)的事件：
　　mousedown,
　　mousemove,
　　mouseout,
　　mouseover,
　　mouseup
　　mouseenter, (要注意這個(gè)事件， chrome的高版本才支持的, 這個(gè)事件是ie先弄出來的，jQ有做兼容處理所以在chrome下可以使用這個(gè)事件)　　
　　mouseleaver (要注意這個(gè)事件， chrome的高版本才支持的, 這個(gè)事件是ie先弄出來的，jQ有做兼容處理所以在chrome下可以使用這個(gè)事件);

因?yàn)槌Ｓ玫狞c(diǎn)擊都是鼠標(biāo)左鍵，所以要觸發(fā)dblclick會(huì)觸發(fā)大部分的mouse事件；
比如你要觸發(fā)dblclick，也會(huì)依次觸發(fā)
1: mousedown
2: mouseup
3: click
4: mousedown
5: mouseup
6: click
7: dblclick;

要檢測鼠標(biāo)事件的兼容通過：
　　document.implementation.hasFeature("MouseEvents","2.0") //true （注意注意，DOM2的事件檢測的名字是復(fù)數(shù)，要加一個(gè)s，DOM3的不用的）
　　document.implementation.hasFeature("MouseEvent","3.0") //true
　　document.implementation.hasFeature("MouseEvent","4.0") //true
　　document.implementation.hasFeature("MouseEvent","5.0") //true
　　chrome和firefox這兩個(gè)奇葩了(IE? IE是什么能吃嗎？)，無論怎么傳都是true, 我勒個(gè)去;新航道雅思

事件對(duì)象的屬性：
客戶坐標(biāo)的值：
　　clientX
　　clientY
頁面坐標(biāo)的值：
　　pageX
　　pageY;
IE8以及更早版本沒有pageX這個(gè)值，我們可以通過客戶指標(biāo)的值(clientX,clientY)和界面的滾動(dòng)條算出來；
　　pageX = clientX + document.documentElement.scrollLeft || document.body.scrollLeft (IE8以及之前的2px沒有處理哦)
　　pageY = clientY + document.documentElement.scrollTop || document.body.scrollTop; (同上)
屏幕的坐標(biāo)：
　　screenX
　　screenY (這兩個(gè)屬性我從來沒有用過..)
修改鍵(熱鍵,也叫快捷鍵)：
//這幾個(gè)值都在事件對(duì)象下面;
　　ctrlKey,
　　shiftKey,
　　altKey,
　　metaKey( WINDOW中是窗口鍵，蘋果電腦是CMD鍵 )
　　 JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

相關(guān)元素（relateTarget）:
　　　　IE下沒有relateTarget這個(gè)東東，有個(gè)toElement和fromElement;這個(gè)屬性沒啥用，唯一的用處就是在不支持mouseenter以及mouseleave的瀏覽器中模擬這兩個(gè)事件(chrome低版本);

鼠標(biāo)按鈕：
　　　　平常用的不多，就是在鼠標(biāo)按下去的時(shí)候是鼠標(biāo)左鍵還是中鍵還是鼠標(biāo)右鍵的區(qū)別；
　　　　IE8以及之前對(duì)鼠標(biāo)的按鍵的規(guī)定和DOM3區(qū)別很大，DOM3是這樣規(guī)定的：
　　　　　　0：鼠標(biāo)左鍵，
　　　　　　1：鼠標(biāo)中鍵（滾動(dòng)鍵）；
　　　　　　2：鼠標(biāo)右鍵；
　　因?yàn)镮E和DOM2,DOM3按鈕事件屬性(event)都有button這個(gè)屬性，必須通過hasFearture進(jìn)行判斷（也沒有別的方法了吧，soga）,so,兼容代碼要如下：

運(yùn)行下面代碼

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

            if( document.implementation.hasFearture("MouseEvents","2.0")return event.button,
            else{
                swtich( event.button ) {
                    case 0:
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                        return 0;
                    case 2:
                    case 6:
                        return 2;
                    case 4 :
                        return 1
                };
            }

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

現(xiàn)在到了滾輪事件了：

IE和chrome以及opera的鼠標(biāo)滾輪滾動(dòng)都是通過event.wheelDelta標(biāo)識(shí)的;
　　如果滾輪是向上滾動(dòng)那么wheelDelta為120，向下值為-120；哇擦家里么喲鼠標(biāo)，筆記本的滾輪怎么滾啊，（￣Ｑ￣）╯，先貼代碼吧，

運(yùn)行下面代碼

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>事件的類型</title>
            <meta charset="UTF-16" />
        </head>
        <body>
        <style>
            #btn{
                overflow: auto;
                width:400px;
                height:400px;
                background: #f0ad4e;
            }
        </style>
        <div id="btn"> xx            <div>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>hehe                <br>
                <br>
                <br>
                <br>
                <br>hehe                <br>
                <br>
                <br>
                <br>
                <br>hehe                <br>
                <br>
                <br>
                <br>
                <br>hehe                <br>
                <br>
                <br>
                <br>
                <br>hehe            </div>
        </div>
        <pre>

        </pre>
        <script>
        var eventUtil = {
            add : function(el, type, handler) {                if(el.addEventListener) {
                    el.addEventListener(type, handler, false);
                }else if( el.attachEvent ) {
                    el.attachEvent("on"+type, handler);
                }else{
                    el["on"+type] = handler;
                }
            },
            off : function(el, type, handler) {                if( el.removeEventListener ) {
                    el.removeEventListener(type, handler, false)
                }else if( el.detachEvent ) {
                    el.detachEvent(type, handler);
                }else{
                    el["on"+type] = null;
                }
            }
        };        var eBtn = document.getElementById("btn");
        eventUtil.add(eBtn,"mousewheel",function(ev) {
            ev = ev || window.ev;
            console.log(ev.wheelDelta);
        })        /*
        * */
        </script>
        </body>
        </html>

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

火狐到了現(xiàn)在還是沒有mousewheel事件，我要噴了，還是要使用DOMMouseScroll這個(gè)事件進(jìn)行綁定;
火狐的滾輪的滾動(dòng)屬性值和chrome和ie都不一樣，是一個(gè)叫做detail的屬性，而且向上的值為-3，向下為3（方向反了，這樣記比較好記）;
要寫出兼容代碼，要這樣

運(yùn)行下面代碼

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

        var eBtn = document.getElementById("btn");
        eventUtil.add(eBtn,"mousewheel",wheel)
        eventUtil.add(eBtn,"DOMMouseScroll",wheel);
        wheel = function() {
            ev = ev || window.ev;
            if(ev.wheelDelta) {
                return ev.wheelDelta
            }else{
                return - ev.detail*3
            }
        }

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

鍵盤事件：
　　keydown，(如果用戶按住不放會(huì)重復(fù)觸發(fā)，而且這個(gè)鍵有點(diǎn)延遲，，)
　　keypress，(如果用戶按住不放會(huì)重復(fù)觸發(fā)，而且這個(gè)鍵有點(diǎn)延遲，)
　　keyup，
　　textInput (這個(gè)事件是DOM3新增的)
　　事件的屬性信息：
　　　　既然是用戶輸入，那么肯定要有一個(gè)是字符串的信息的事件屬性，猜都不用猜的
　　　　要跨瀏覽器獲取用戶輸入的字符串編碼，可以通過，

運(yùn)行下面代碼

        if( typeof event.charCode === "number") {
            return event.charCode;
        }else{
            return event.keyCode;
        }；

keyCode這個(gè)值是包含了回車，制表符，箭頭數(shù)字鍵盤，f1，f12所有鍵盤的數(shù)值;

charCode只是表示按下字符的ascll編碼;

好了好了，睡覺去了，眼睛要常休息下；

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)

網(wǎng)頁題目：JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)
網(wǎng)站URL：http://aaarwkj.com/article16/gjoigg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站導(dǎo)航、關(guān)鍵詞優(yōu)化、移動(dòng)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、建站公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

JS中的事件類型和事件屬性的基礎(chǔ)知識(shí)