JS中的DOM事件

DOM事件

1. DOM事件

事件三要素：事件源、事件、事件驱动程序

☛事件源，也就是需要操作的对象，例如：var box = document.getElementById(“box”);
☛事件，例如：onclick、onmouseenter等，例如：box.onclick = function() { 程序 };
☛事件驱动程序，就是接下来我们将要要学习的关于DOM的操作，例如：this.innerHTML = “我是一个div盒子”;
1.1 单击事件

JS中的DOM事件
实例：给文档中的 id=“box” 元素添加点击事件。

<script>
    window.onload = function () {
        var obj = document.getElementById("box");
        obj.onclick = function () {
            alert("单击事件");
        }
    }
</script>

我们也可以给元素直接添加点击事件。

<body>
    <div onclick="testClick()">点击我</div>
    <script>
        function testClick() {
            alert("单击事件");
        }
    </script>
</body>

1.2 双击事件

JS中的DOM事件

实例：给文档中的 id=“btn” 元素添加点击事件。

<body>
    <div id="btn">双击事件</div>
    <script>
        var btn = document.getElementById("btn");
        btn.ondblclick = function () {
            console.log("双击事件");
        };
    </script>
</body>

注意：如果对同一个元素添加单击事件和双击事件，需要我们自己手动区分！

1.3 焦点事件

JS中的DOM事件
实例：给文档中的id="uName"元素添加点击事件。

<body>
    <input id="uName" type="text">
    <script>
        var input = document.getElementById("uName");
        input.onfocus = function () {
            console.log("获取焦点");
        };

        input.onblur = function () {
            console.log("失去焦点");
        }
    </script>
</body>

1.4 改变事件

JS中的DOM事件
实例：给文档中的和元素添加改变事件。

<body>
故乡：<select name="city" id="city">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广州</option>
        <option value="4">武汉</option>
     </select>
密码：<input id="password" type="password" placeholder="请输入密码">
<script>
    var city = document.getElementById("city");
    city.onchange = function () {
        console.log("选中的城市：" + this.value);
    };
    var password = document.getElementById("password");
    password.onchange = function () {
        console.log("选中的城市：" + this.value);
    };
</script>

1.5 鼠标事件

JS中的DOM事件
当鼠标指针穿过元素时，会发生 onmouseenter 事件。该事件大多数时候会与 onmouseleave 事件一起使用。onmouseover 事件和 onmouseout 事件一起使用。

与 onmouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 onmouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 onmouseover 事件。

实例：给文档中的id="box"元素添加鼠标事件。

<body>
    <div id="box"></div>
    <script>
        window.onload = function () {
            var box = document.getElementById("box");
            // 鼠标进入
            box.onmouseenter = function () {
                console.log("鼠标进入");
            };
            // 鼠标移动
            box.onmousemove = function () {
                console.log("鼠标移动");
            };
            // 鼠标按下
            box.onmousedown = function () {
                console.log("鼠标按下");
            };
            // 鼠标抬起
            box.onmouseup = function () {
                console.log("鼠标抬起");
            };
            // 鼠标离开
            box.onmouseleave = function () {
                console.log("鼠标离开");
            }
        }
    </script>
</body>

1.6 键盘事件

JS中的DOM事件
实例：给文档中的id="box"元素添加鼠标事件。

<body>
<script>
    document.body.onkeydown = function () {
        console.log("键盘按钮按下");
    };

    document.body.onkeyup = function () {
        console.log("键盘按钮弹起");
    }
</script>
</body>

2. event事件对象

2.1 event属性
JS中的DOM事件

当前事件源，它的值一定是this（event.currentTarget == this）; 事件触发源，它的值为不一定是this（event.target ?== this）。

2.2 event方法
2.2.1 阻止事件冒泡
防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。

JS中的DOM事件
实例：阻止文档中 id=“child” 的元素事件派发。

<body>
    <div id="parent">
        <div id="child"></div>
    </div>
    <script>
        var parent = document.getElementById("parent");
        var child = document.getElementById("child");
        child.onclick = function (event) {
            console.log("child -- 子类被触发");
            // 阻止事件派发
            event.stopPropagation();
        };
        parent.onclick = function () {
            console.log("parent -- 父类被触发");
        }
    </script>
</body>

2.2.2 取消事件默认行为

JS中的DOM事件
事件冒泡：是因为事件会按照DOM的层次结构像水泡一样不多向上直至顶端。

实例：阻止文档中 id="link" 元素的默认行为。

<body>
    <a id="link" href="http://www.baidu.com">百度一下，你就知道</a>
    <script>
        var link = document.getElementById("link");
        link.onclick = function (event) {
            // 阻止默认行为
            event.preventDefault();
        };
    </script>
</body>

1. DOM事件

2. event事件对象

相关推荐