js事件入门（5）

2024-02-15 13:11:46

5.窗口事件

5.1.onload事件

元素加载完成时触发,常用的就是window.onload

window.onload = function(){
    //等页面加载完成时执行这里的代码
}

5.1.resize

当浏览器窗口改变的时候触发

window.onresize = function(){
    alert(1)
}

6.event对象

6.1.什么是event对象？

event对象代表事件的状态，当事件发生的时候用来记录事件的详细信息，类似于飞机的黑匣子。

在ie和chrome中，事件对象（event）是一个内置的全局对象，必须在事件调用的时候才有值，如果没有事件调用，event没有值，

在firefox中event对象没有被定义，如果一个函数被事件调用，那么这个事件函数中的第一个参数就是event对象，这也是标准浏览器下的处理方式，在非标准下，这种方式不被采用

总结：在非标准下，使用被定义好的event内置对象，在标准下使用事件函数中的第一个参数，假设传入的第一个参数为ev，可以用逻辑或做兼容，var ev = ev || event

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onunload = function(){
                var oDiv = document.getElementById('box');
                oDiv.onclick = function(ev){
                    //这里的ev就是event对象
                    //兼容性处理
                    var ev = ev || event;
                    console.log(ev);
                }
            }
        </script>
    </head>
    <body>
       <div id="box"></div>
    </body>
</html>

6.2.event对象上的属性 clientX,clientY

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function(){
                var oDiv = document.getElementById('box');
             
                document.onmousemove = function(ev){
                    //event对象
                    var ev = ev || event;
                    //innerHtml表示往div里面添加内容
                    oDiv.innerHTML = "clientX:"+ev.clientX+",clientY:"+ev.clientY;
                }
            }
        </script>
        <style type="text/css">
            #box{
                height: 100px;
                background: black;
                color: white;
            }
        </style>
    </head>
    <body>
       <div id="box"></div>
    </body>
</html>

6.3.综合案例2

综合案例2代码实现：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
            window.onload = function(){
                //获取到box对象
                var oDiv = document.getElementById("box");
                
                oDiv.onmousedown = function(ev){
                    //事件兼容性处理
                    var ev = ev || event;
                    
                    var disX = ev.clientX - oDiv.offsetLeft;
                    var disY = ev.clientY - oDiv.offsetTop;
                    
                    document.onmousemove = function(ev){
                        
                        var ev = ev || event;
                        
                        oDiv.style.left = ev.clientX - disX + "px";
                        oDiv.style.top = ev.clientY -disY + "px";
                    }
                    document.onmouseup = function(){
                         
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }
                    return false;
                }
            }
        </script>
        <style type="text/css">
            #box{
                position: absolute;
                
            }
            #box img{
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <img src="img/window.png"/>
        </div>
    </body>
</html>

6.4.event对象上的keycode属性

对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。

<!DOCTYPE html>

码农公寓