js事件对象&鼠标与键盘事件对象

最新推荐文章于 2024-07-26 11:41:15 发布

吃瓜瓜瓜

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量388

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_53125449/article/details/112756929

版权

事件对象

对象可以看成属性的合集，函数也是属性的一种。（属性的集合）
事件对象主要包含一些事件的信息

事件绑定

元素节点.on+事件类型=匿名函数；

事件对象的产生：在事件绑定完成后，就自动生成了一个事件对象。
事件绑定函数，因为不是在代码中直接调用函数，所以没办法直接传参，
浏览器会给我们一个默认参数，这个参数就是事件对象。

获取事件对象

在标准浏览器中。

直接在事件处理函数上的一个形参。
会在事件触发时后，由浏览器自动传递实参。

加粗样式

window.event
在标准浏览器下也可以使用
兼容写法：
var event = event || window.event;

<script>
        window.onload = function(){

            function box(a){
                // 存储实参的
                alert(arguments.length);
            }
            // a(15)
            var box = document.querySelector(".box");
            box.onclick = function(event){
                // e 异常  try catch
                // alert(arguments.length);
                // console.log(arguments[0]);
                // console.log(event);
                // console.log(window.event);

                var event = event || window.event;
                console.log(event);
            }

        }
    </script>

鼠标事件

鼠标事件对象:

属性:

button：用来表示咱们按下的是哪一个按键
0 左键
1 滚轮
2 右键

获取当前鼠标的位置（原点不同）

clienX clienY 可视窗口的左上角为原点
pageX pageY 整个页面的左上角为原点
screenX screenY 电脑屏幕的左上角为原点
offsetX offsetY 以事件触发的元素为原点

<script>
        window.onload = function(){
            var box = document.querySelector(".box");
            // box.onclick = function(event){
            //     var event = event || window.event;
            //     console.log(event.button);
            // }
            box.onmousedown = function(event){
                var event = event || window.event;
                // console.log(event.button);
                // console.log("clientX="+event.clientX);
                // console.log("clientY="+event.clientY);
                // console.log("pageX="+event.pageX);
                // console.log("pageY="+event.pageY);
                // console.log("screenX="+event.screenX);
                // console.log("screenY="+event.screenY);
                console.log("offsetX="+event.offsetX);
                console.log("offsetY="+event.offsetY);
            }
        }
    </script>
</head>
<body>
    <div class="box">

    </div>
</body>

获取元素尺寸

获取元素尺寸

元素的占地面积
（宽高+内边距+边框） IE盒模型设置的宽高就是元素的占地尺寸
offsetWidth offsetHeight 元素的内容+内边距+边框
clientWidth clientHeight 元素的内容 + 内边距

    <style>
        .box{
            width: 300px;
            height: 300px;
            padding: 50px;
            border: 10px solid;
            margin: 100px auto;
            background-color: brown;
            /* display: none; */
            opacity: 0;
        }
    </style>
    <script>
        window.onload = function(){
            var box = document.querySelector(".box");
            console.log("offsetWidth="+box.offsetWidth);
            console.log("offsetHeight="+box.offsetHeight);
            console.log("clientWidth = "+box.clientWidth);
            console.log("clientHeight = "+box.clientHeight);
            // box.onclick  = function(event){
                
            // }
        }
    </script>
</head>
<body>
    <div class="box">

    </div>
</body>

获取元素的偏移量

一个元素对于参考系的坐标位置.
offsetParent

语法:元素.offsetParent
作用:拿到该元素获取偏移量时的参考父级
默认以body为参考系,如果父辈有定位属性,则获取改父辈元素**.
offsetleft offsetTop**
语法:元素.offsetleft 元素.offsetTop
作用:拿到元素相对于参考系的相对偏移量

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .father {
            position: relative;
            background-color: burlywood;
            width: 600px;
            height: 600px;
            margin: 200px;
            overflow: hidden;
        }

        .box {
            width: 300px;
            height: 300px;
            padding: 50px;
            border: 10px solid;
            margin: 100px auto;
            margin-left: 50px;
            background-color: brown;
            /* display: none; */
            /* opacity: 0; */
        }
    </style>
    <script>
        window.onload = function () {
            var box = document.querySelector(".box");
            // console.log("offsetParent="+box.offsetParent);
            console.log("offsetLeft = " + box.offsetLeft);
            console.log("offsetTop = " + box.offsetTop);

        }
    </script>
    

<body>
    <div class="father">
        <div class="box">
        </div>
    </div>

</body>

获取浏览器窗口尺寸

BOM

innerWidth
innerHeight

DOM 文档 html的元素尺寸

document.documentElement.clientWidth
document.documentElement.clientHeight

<script>
        window.onload = function(){
            
            console.log("window.innerWidth = "+window.innerWidth);
            console.log("window.innerHeight = "+window.innerHeight);
            console.log("document.documentElement.clientWidth = "+document.documentElement.clientHeight);
            console.log("document.documentElement.clientHeight = "+document.documentElement.clientHeight);
        }
        
    </script>

键盘事件对象

判断你按下的是哪个键
属性:
key:

你按下的是哪个键区分大小写
在IE低版本不适用

keycode:

以编码的格式返回,不区分大小写.
空格32
回车(Enter)13

在火狐低版本使用which属性
尽量用keycode去判断你按下的键位

altkey 判断是否按下alt键
shiftkey 判断是否按下shift键
ctrlKey 判断是否按下ctrl键
metaKey 判断是否按下 window win键苹果系统（mac） comment键
以上四个值返回是布尔值,组合键(按下它的同时在下别的键位)

 <script>
        document.onkeydown = function(event){
            var event = event || window.event;
            console.log("您按下的是"+event.key+",编码为："+event.keyCode);
            console.log(event.metaKey);
        }
    </script>

事件传播机制

当你在一个元素上触发行为的时候,会按照父级的顺序,从下往上进行传播行为,直到window为止,
事件传播只会传播同一类型的事件

冒泡和捕获

在事件的对象中，有一个属性叫做 target
表示本次事件触发，准确触发的对象。
事件目标
事件:事件源,事件类型,事件处理函数

在低版本的IE中不支持
IE支持:srcElcement
兼容写法:

var event = event || window.event;
var target = event.srcElement || event.target;

冒泡:

从事件目标到window的顺序来执行所有的事件

捕获:

从 window 到事件目标的顺序来执行所有的事件。

addEventListener 第三个参数为true的话表示捕获。 false 表示冒泡。


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            background-color: #27ae60;
        }

        #div2 {
            background-color: #e67e22;
        }

        #div3 {
            background-color: #e74c3c;
        }

        #div1,
        #div2,
        #div3,
        #other {
            padding: 50px;
        }
    </style>
    <script>
        window.onload = function () {
            var boxs = document.getElementsByTagName("div");
            for (var i = 0; i < boxs.length; i++) {
                boxs[i].dataset.index = i + 1;
                boxs[i].addEventListener("click",function(){
                    alert("div" + this.dataset.index);
                });
                // boxs[i].onclick = function (event) {
                //     // alert("div" + this.dataset.index);
                //     // console.log(this);
                //     console.log(event.target);
                // }
            }
            // var div1 = document.getElementById("div1");

            // div1.onclick  = function(event){
            //     var event = event || window.event;
            //     var target = event.srcElement || event.target;
            //     console.log(target);
            // }
            

        }
    </script>
</head>

<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>

    </div>
</body>

</html>

mouseenter

mouseenter mouseleave 他们不会进行事件传播。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: burlywood;
        }
        #intor{
            width: 200px;
            height: 200px;
            background-color: cadetblue;
        }
    </style>
    <script>
        window.onload = function(){
            var box = document.getElementById("box");
            var intor = document.getElementById("intor");
            
            box.onmouseenter = function(){
                console.log("box移入了");
            }
            box.onmouseleave = function(){
                console.log("box移出了");
            }
            intor.onmouseenter = function(){
                console.log("intor移入了");
            }
            intor.onmouseleave = function(){
                console.log("intor移出了");
            }
            // box.onmouseover = function(){
            //     console.log("box移入了");
            // }
            // box.onmouseout = function(){
            //     console.log("box移出了");
            // }
            // intor.onmouseover = function(){
            //     console.log("intor移入了");
            // }
            // intor.onmouseout = function(){
            //     console.log("intor移出了");
            // }
            
        }
    </script>
</head>
<body>
   
    <div id="box">
        <div id="intor"></div>
    </div>
</body>
</html>

阻住事件传播

在标准浏览器中：

event.stopPropagation();
【注意】书写在事件处理函数中
在IE低版本中:
event.cancelBubble = true;

兼容写法

 if (event.stopPropagation) {
        event.stopPropagation();
     } else {
        event.cancelBubble = true;
     }

案例:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            background-color: #27ae60;
        }
        #div2{
            background-color: #e67e22;
        } 
        #div3{ 
            background-color: #e74c3c;
        }
        #div1,#div2,#div3,#other{
            padding: 50px;
        }
    </style>
  
    <script>
        window.onload  = function(){
            var boxs = document.getElementsByTagName("div");
            for (var i = 0; i < boxs.length; i++) {
                boxs[i].index = i+1;
                boxs[i].onclick = function(event){
                    var event = event || window.event;
                    alert("div" + this.index);
                    if (event.stopPropagation) {
                        event.stopPropagation();
                    } else {
                        event.cancelBubble = true;
                    }
                    
                    // event.stopPropagation();
               }
            }
        }
    </script>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>
</html>

事件委托

循环绑定事件：

浪费资源
新增的节点没有绑定事件，需要手动再绑定一次。

事件委托:
**原理:**冒泡
步骤:

找到要操作的节点的共同的父节点或者祖先节点。
将事件添加到父节点上。
找到事件目标，判断事件目标是否是想要触发的对象，如果是，则触发响应的事件。

获取焦点

元素节点.focus();


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title
    <script>
        window.onload = function(){
            var lis = document.getElementsByTagName("li");
            var ul = document.querySelector("ul");
            var btn = document.querySelector("button");
            ul.onclick = function(event){
                var event = event || window.event;
                var target = event.target || event.srcElement;
                // 元素节点的nodeName 是大写的标签名
                if(target.nodeName === "LI"){
                    target.style.backgroundColor = "red";
                }
            }
            btn.onclick = function(){
                var li = document.createElement("li");
                li.innerHTML = (lis.length+1) * 111;
                ul.appendChild(li);
            }
        }

    </script>
</head>
<body>
    <button>添加</button>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
</body>
</html>

阻住浏览器默认行为

默认行为：

a标签自带点击效果
form 表单自己会提交
框选
鼠标右键菜单

表单事件

失去焦点:blur
获取焦点: focus
提交:submint
重置:reset

阻止浏览器默认行为：

要在你阻止的行为中添加阻止方法.
标准浏览器
event.preventDefault();
IE低版本:
event.returnValue = false;

兼容写法:

if(event.preventDefault){
   event.preventDefault();
  }else{
    event.returnValue = false;
   }


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var form = document.querySelector("form");
            form.onsubmit = function(event){
                var event = event || window.event;
                // event.preventDefault();
                if(event.preventDefault){
                    event.preventDefault();
                }else{
                    event.returnValue = false;
                }
            }
        }
    </script>
</head>
<body>
    <form action="https://www.baidu.com/s">
        <input type="text" name="wd">
        <button type="button">提交</button>
        <input type="submit" value="提交">
    </form>
</body>
</html>

吃瓜瓜瓜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js事件对象&鼠标与键盘事件对象

事件对象对象可以看成属性的合集，函数也是属性的一种。（属性的集合）事件对象主要包含一些事件的信息事件绑定元素节点.on+事件类型=匿名函数；事件对象的产生：在事件绑定完成后，就自动生成了一个事件对象。事件绑定函数，因为不是在代码中直接调用函数，所以没办法直接传参，浏览器会给我们一个默认参数，这个参数就是事件对象。获取事件对象在标准浏览器中。直接在事件处理函数上的一个形参。会在事件触发时后，由浏览器自动传递实参。加粗样式window.event在标准浏览器下也可以使
复制链接

扫一扫