Web第五课(事件对象)

最新推荐文章于 2022-06-11 19:27:58 发布

姚文洲

最新推荐文章于 2022-06-11 19:27:58 发布

阅读量180

点赞数

文章标签： dom

本文链接：https://blog.csdn.net/qq_42123832/article/details/107640040

版权

本文详细介绍了DOM事件的相关知识，包括事件对象、事件的冒泡过程及其取消方法，事件的委派实现，事件的绑定方式以及在IE8中的特殊处理，事件的传播阶段（捕获、目标、冒泡），并提及了拖拽、鼠标滚轮和键盘事件的应用。

摘要由CSDN通过智能技术生成

1. 事件对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>事件基础</title>
    <style type=text/css>
        #areaDiv{
    
            width: 300px;
            height:150px;
            border: 1px solid black;
        }
        #showMsg{
    
            width: 300px;
            height: 50px;
            border: 1px solid black;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
    
            // 当事件响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递给相应函数
            // clientX、clientY 是鼠标相对于可视窗口的位置
            // pageX、pageY 是鼠标相对于整个文档的位置，但是这两个属性在IE8及以下浏览器不支持
            // chrome认为滚动条是body的，火狐等浏览器认为滚动条是html的
            // 在IE8中，相应函数被触发时，浏览器不会传递事件对象，而是将事件对象作为window的属性来保存的
            // 解决事件对象的兼容性问题
            event = event || window.event;
            _style = getComputedStyle(document.body, null) || document.doby.currentStyle;

            var areaDiv = document.getElementById("areaDiv");
            var showMsg = document.getElementById("showMsg");
            areaDiv.onmousemove = function(event) {
    
                showMsg.innerHTML = (event.clientX - parseInt(_style.marginLeft)) + "px " + (event.clientY-parseInt(_style.marginTop)) + "px";
            };
        };
    </script>
</head>
<body>
    <div id="areaDiv"></div>
    <br>
    &