JavaScript 之 DOM [ 事件 ]

時間 2019-12-05

標籤 javascript dom 事件欄目 JavaScript 简体版

原文原文鏈接

事件

描述

事件是瀏覽器告知JavaScript程序用戶的行爲

事件屬性

HTML的元素屬性

HTML元素能夠直接添加事件屬性

body>
<!-- 在html頁面中添加事件屬性 - 屬性值爲函數名 -->
<button onclick="sclick()">按鈕</button>
<script>
    /*
        在html頁面設置事件屬性
        該事件做用在當前元素，不能綁定多個
        而且沒能使HTML頁面結構與JavaScript之間存在有效分離
     */
    /* 設置事件處理函數 */
    function sclick() {
        console.log( '娃哈哈哈哈哈哈哈' );
    }
</script>
</body>

DOM事件屬性

DOM對象能夠設置事件屬性

<body>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<script>
    /*
        DOM對象的事件屬性
        onclick = function()
        該事件能夠綁定多個元素
        也作到了HTML結構與JavaScript的有效分離
     */
    /* 先定位元素位置 - 注意類數組的調用值 */
    var b1 = document.getElementsByTagName( 'button' )[0];
    /* 設置鼠標點擊事件 */
    b1.onclick = function () {
        console.log( '嘻嘻嘻嘻嘻嘻嘻之郎' );
    };

    /* 多個相同元素綁定一個事件 */
    var b2 = document.getElementsByTagName( 'button' );
    /* 先遍歷類數組獲取到每個元素 */
    for ( var bt = 0; bt < b2.length; bt++ ) {
        var bs = b2[bt];
        /* 在進行事件綁定 */
        bs.onclick = function () {
            console.log( '嘻嘻嘻嘻嘻嘻嘻之郎' );
        }
    }
</script>
</body>

事件監聽器

DOM對象提供的 addEventListener()方法
事件監聽器也能夠設置事件屬性
該方法有瀏覽器兼容問題html
- IE8 如下版本不支持
- IE8 提供瞭解決方法數組
  - attachEvent()方法

<body>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<script>
    /*
        事件監聽器
        addEventListener（）「括號中先寫事件名‘沒有on’，在寫事件事件處理函數，在寫布爾值‘可省略’」
        能夠爲單個元素綁定多個事件
     */
    /* 先定位指定元素的位置 */
    var b1 = document.getElementsByTagName( 'button' )[0];
    /* 設置事件監聽器 */
    b1.addEventListener( 'click', function() {
        console.log( '我特啊呦賭贏' );
    } );
    /* 多個相同元素綁定一個事件 */
    var b2 = document.getElementsByTagName( 'button' );
    /* 先遍歷類數組獲取到每個元素 */
    for ( var bs = 0; bs < b2.length; bs++ ) {
        var bx = b2[bs];
        /* 設置事件監聽器 */
        bx.addEventListener('click', function () {
            console.log('我特啊呦賭贏');
        });
    }
    /*
        事件監聽器存在瀏覽器兼容問題
        attachEvent（）：IE 8 專門的事件監聽器
        括號中先寫事件名‘有on’，在寫事件事件處理函數，在寫布爾值‘可省略’
     */
    b1.attachEvent( 'onclick', function () {
        console.log( '我特啊呦弄啥嘞！...' );
    } );
</script>
</body>

移除綁定事件

removeEventListener（）
表示對已綁定的事件進行移除

<body>
<button id="b1">按鈕</button>
<script>
    /*
        移除綁定事件
        removeEventListener（）
        括號中先寫事件名‘沒有on’，在寫事件處理函數名（用於指定目標事件）
        只能做用在事件監聽器上
     */
    var b = document.getElementById( 'b1' );
    /* 單獨寫事件處理函數並命名 - 方便指定目標 */
    function btn() {
        console.log( '我特啊呦弄啥嘞！...' );
    }
    /* 對指定的目標事件進行添加 */
    b.addEventListener( 'click', btn );
    /* 對指定的目標事件進行移除 */
    b.removeEventListener( 'click', btn );

    /* 移除綁定事件有兼容問題 */
    /* 專門提供瞭解決IE 8 的問題 */
    b.detachEvent( 'click', btn );
</script>
</body>

事件對象

Event事件對象瀏覽器
- 全部設置事件屬性的方式都能使用
該對象存在於事件處理函數的參數中

<body>
<button id="b1">按鈕</button>
<script>
    /*
        Event事件對象
        全部設置事件屬性的方式都能使用
        該對象存在於事件處理函數的參數中
     */
    var b = document.getElementById( 'b1' );
    b.addEventListener( 'click', function( event ) {
        console.log( event );
    } );
    /*
         Event事件對象具備兼容問題
         該事件對象被添加到 window 對象中
     */
    b.attachEvent( 'onclick', function( event ) {
        // event事件對象固定寫法
        var bevent = event || window.event;
        console.log( bevent );
    } );
</script>
</body>

阻止默認行爲

event.preventDefault()
表示阻止目標元素所綁定的事件運行

<body>
<a id="a1" href="事件對象.html">這是連接</a>
<script>
    /*
        阻止默認行爲
        event.preventDefault()
        表示阻止目標元素所綁定的事件運行
     */
    /* 定位目標元素的位置 */
    var a = document.getElementById( 'a1' );
    /* 綁定事件屬性 */
    /*a.addEventListener( 'click', function(event) {
        /!* 阻止事件的運行 *!/
        event.preventDefault();
    } );*/

    /*
        return false語句
        也具備阻止默認行爲的功能
        該語句以後的代碼將不會被執行
        建議放置在事件處理函數的最後面
        該語句不能做用在 addEventListener（）中
     */
    a.onclick = function ( event ) {
        event.preventDefault();
        return false;
    }
</script>
</body>

獲取鼠標座標

pageX和pageY

表示獲取鼠標在頁面中的位置

<body>
<button id="b1">按鈕</button>
<script>
    var b = document.getElementById( 'b1' );
    b.addEventListener( 'click', function ( event ) {
        console.log( event.pageX, event.pageY );
    } );
</script>
</body>

clientX和clientY

表示獲取鼠標在可視窗口中的位置

<body>
<button id="b2">按鈕</button>
<script>
    var b = document.getElementById( 'b2' );
    b.addEventListener( 'click', function ( event ) {
        console.log( event.clientX, event.clientY );
    } );
</script>
</body>

screenX和screenY

表示獲取鼠標在顯示器屏幕中的位置

<body>
<button id="b3">按鈕</button>
<script>
    var b = document.getElementById( 'b3' );
    b.addEventListener( 'click', function ( event ) {
        console.log( event.screenX, event.screenY );
    } );
</script>
</body>

offsetX和offsetY

表示獲取鼠標相對於在父元素中的位置

<body>
<button id="b4">按鈕</button>
<script>
    var b = document.getElementById( 'b4' );
    b.addEventListener( 'click', function ( event ) {
        console.log( event.offsetX, event.offsetY );
    } );
</script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。