JavaScript中DOM操作常用事件总结

下面将详细讲解“JavaScript中DOM操作常用事件总结”的攻略。

标题

“JavaScript中DOM操作常用事件总结”

介绍

在JavaScript中，DOM操作是非常常见的，而操作DOM的过程中，经常会用到事件。本攻略将对JavaScript中常用的DOM事件进行总结和讲解。

常用DOM事件

以下是常用的DOM事件：

• click - 鼠标点击事件
• mouseover - 鼠标移入事件
• mouseout - 鼠标移出事件
• mousedown - 鼠标按下事件
• mouseup - 鼠标松开事件
• keydown - 键盘按下事件
• keyup - 键盘松开事件
• load - 页面或图片加载完成事件
• focus - 元素获取焦点事件
• blur - 元素失去焦点事件

代码示例

示例一

下面是一个简单的示例，实现了当用户点击按钮时，改变文本框的内容：

<button id="btn1">点击</button>
<input id="txt1" type="text" value="点击按钮可以改变我">

<script>
    var btn1 = document.getElementById('btn1');
    var txt1 = document.getElementById('txt1');

    btn1.addEventListener('click', function() {
        txt1.value = '我被改变了';
    });
</script>

上面的示例中，当用户点击按钮时，会触发click事件，然后执行回调函数，改变文本框的内容。

示例二

下面是一个更加复杂的示例，实现了当用户按下键盘上的方向键时，改变图片的位置：

<img id="img1" src="image.jpg" style="position:absolute; top:100px; left:100px;">

<script>
    var img1 = document.getElementById('img1');

    document.addEventListener('keydown', function(event) {
        switch(event.keyCode) {
            case 37: // 向左箭头键
                img1.style.left = (parseInt(img1.style.left) - 10) + 'px';
                break;
            case 38: // 向上箭头键
                img1.style.top = (parseInt(img1.style.top) - 10) + 'px';
                break;
            case 39: // 向右箭头键
                img1.style.left = (parseInt(img1.style.left) + 10) + 'px';
                break;
            case 40: // 向下箭头键
                img1.style.top = (parseInt(img1.style.top) + 10) + 'px';
                break;
        }
    });
</script>

上面的示例中，当用户按下键盘上的方向键时，会触发keydown事件，然后执行回调函数，改变图片的位置。

结论

本攻略总结了JavaScript中常用的DOM事件，并给出了两个示例，用以说明这些事件的使用方法。通过掌握这些常用的DOM事件，我们可以更加有效地操作DOM元素，实现更加丰富的交互效果。