記錄我的旅程2之JavaScript Dom學習筆記

來源:互聯網
上載者:User

下面我們接著上一篇繼續我們的Dom征程,在我的學習中,我感覺越學Dom越感覺非常的有意思,期待我們能夠共同學習。下面我們學習window對象的屬性,這個部落格我就專門針對我這段時間學習的window對象的屬性做個筆記。

  1. window對象的屬性1

(1) window.location.href=’http://www.baidu.com’,重新導航到新的地址,和navigate方法效果一樣,window.location.reload()重新整理頁面。

    <input type="button" value="href" onclick="alert(location.href)" /> <!--擷取當前的地址-->

    <input type="button" value="重新導向" onclick="location.href='http://www.baidu.com'" />

    <input type="button" value="重新整理" onclick="location.reload()" />

(2) window.event是非常重要的屬性,用來擷取發生事件時的資訊,事件不局限於window對象的事件,所有元素的事件都可以通過event屬性擷取相關資訊,類似於Winform中的e(EventArg)。

 1) altkey屬性,bool類型,表示發生事件時alt鍵是否被按下,類似的還有Ctrkey,Shiftkey屬性,例如:

<input  type="button"  value="點擊"  onclick="if(event.CtrlKey){alert('Ctrl被點擊')}else{alert('隨便點擊')}" />

 2) clientX,clientY發生事件時滑鼠在客戶區的座標,screenX,ScreenY發生事件時滑鼠在螢幕上的座標,offsetX,offsetY發生事件時,滑鼠相當於事件來源(如點擊按鈕時觸發onclick)的座標。

 3) returnValue屬性,如果將returnValue設定為false,就會取消預設事件的處理,在超連結的onclick裡面禁止訪問href的頁面,在表單校正的時候禁止提交表單到伺服器。

例1   <a href="http://www.baidu.com" onclick="alert('禁止訪問');window.event.returnValue=false;">百度</a>

例2   <form action="f1f2.htm">

        <input type="submit" value="提交" onclick="alert('資料有問題');window.event.returnValue=false;" />

                  </form>

 4) srcElement 獲得事件的來源物件

 5) keyCode 發生事件時的按索引值

 6) button 發生時間時滑鼠按鍵,1為左鍵,2為右鍵,3為左右鍵同時按。

          <body onmousedown="if(event.button==2){alert('禁止複製')}">

       注釋:禁止Button控制項上面內容的複製

(3) 例子:定時器走馬燈重寫,完美的方案

    <title>這是一片文章的資訊是</title>

    <script type="text/javascript">

        function scroller() {

            var title = document.title;

            var lastCh = title.charAt(0); //容易錯

            var leftStr = title.substring(1, title.length);

            document.title = leftStr + lastCh;

        }

    </script>

<input type="button" value="滾動" onclick="timeId=setInterval('scroller()', 500)" />

<input type="button" value="停止(錯誤)" onclick="clearInterval(setInterval('scroller()', 500))" />

<input type="button" value="停止(正確)" onclick="clearInterval(timeId)" />

  1. window對象的屬性2

(1) screen對象,螢幕的資訊

    <script type="text/javascript">

        alert("解析度:" + screen.width + "*" + screen.height);

        if (screen.width < 1037 || screen.height < 800) {

            alert("解析度太低");

        }

    </script>

(2) clipboardData對象,對黏貼板的操作。clearData(“Text”)清空黏貼板,getData(“Text”)讀取黏貼板的值,傳回值為黏貼板中的內容,setData(“Text”,val)設定黏貼板的值。

<input type="button" value="分享本頁給好友" onclick="clipboardData.setData('Text','我發現了好玩的網頁!!'+location.href);alert('成功');" />

(3) 當複製的body的oncopy方法被觸發,直接return=false就是禁止複製

<body oncopy="alert('禁止複製');return false;">

(4) 很多元素也有oncopy,onpaste事件。

手機號碼<input type="text" /><br />

確認手機號碼:<input type="text" onpaste="alert('請勿黏貼');return false;" /><br />

(5) 在網站中複製文章的時候,為了防止那些拷貝黨不添加文章來源,自動在複製的內容後面添加著作權聲明。

    <script type="text/javascript">

        function modifyclipboard() {

            clipboardData.setData('Text', clipboardData.getData('Text') + '本文來自部落格園——>Kencery' + location.href);

        }

    </script>

注釋:oncopy=”setTimeout(‘modifyclipboard()’,100)”。使用者複製動作發生0.1秒以後再去改黏貼板中的內容,100ms是一個經常取值,寫1000,10,50,20…….都不能直接在oncopy裡面修改黏貼板。

不能直接在oncopy中執行對黏貼板的操作,因此設定定時器,0.1秒以後執行,這樣就不在copy的執行調用佔用了。

        function modifyclipboard1() {

            var txt = clipboardData.getData('Text');

            txt = txt + ",本文來自部落格園——>Kencery:" + location.href;

            clipboardData.setData('Text', txt);

        }

<body oncopy="setTimeout('modifyclipboard1() ',100)">

                    毒蛇釘刺發生的說多少次風送斷腸聲生產方式測試說的

                      場發射才說的才是才說的cvs才說的長vdsc是調查vs<br />

</body>

  1. window對象的屬性3

(1) history操作記錄

  1) window.history.back(1) 後退,window.history.forward() 前進。我們的代碼也可以用window.history.go(-1),window.history.go(1) 前進。

(2) 例如:建立兩個頁面

1) <a href="f1f2.htm">進入第二頁</a>

    2) <a href="javascript:window.history.back()">後退</a>

<input type="button" value="後退" onclick="window.history.back()" />

至此,我的這篇部落格筆記也完成了,下篇我們將介紹document屬性。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.