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>