js中的event对象。

最新推荐文章于 2024-05-13 01:39:01 发布

guangbing8877

最新推荐文章于 2024-05-13 01:39:01 发布

阅读量304

点赞数

本文链接：https://blog.csdn.net/guangbing8877/article/details/53153664

版权

事件对象的总结，以下面代码进行说明：

1.函数中参数问题

    function cl() {
        console.log("大家好");
    }

    //cl();
    cl("aaaa");//传了也不会出问题

如上面代码,是不是和别的语言有很大差距。

    document.onclick = function (a) {
        //console.log("点击了");
        console.log(a);
    }

    //浏览器内部会去调用 而且会传入一个参数

如上面代码，当在页面点击时候，浏览器自动传入一个event对象，console.log(a)的执行结果是。

触动了一个mouseEvent对象。Event时间中有几个位置坐标，再此详细说明一下

event.clientX, event.clientY.这是相对于浏览器左上角位置以开始位置，以鼠标在浏览器中某处的点击位置，为终点位置，进行取值。

event.pageX, event.pageY.这是相对于浏览器左上角位置以开始位置，以鼠标在浏览器中某处的点击位置，为终点位置，进行取值,不过，如果此时浏览器中出现了滚动栏，那么要加上滚动栏卷曲的高度，或者宽度。

event.screenX,event.screenY,此时位置的计算方法为，以屏幕screen 左上角为起始点，以鼠标的点击为最终点，所计算的位置值。

2.事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        alert("按钮被点击了");
    }
    document.onclick = function () {
        alert("文档被点击了");
    }
</script>
</body>
</html>

因为button属于document,所以点击完毕btn后，也相当与点击了document,所以两个alert()均被执行，这就叫做冒泡。

但是如果再点击按钮时候，不想冒泡，也就是不想触动document.click.,就可以这样修改代码：

    btn.onclick = function (event) {
        alert("按钮被点击了");
        //阻止冒泡
        var event = event || window.event;
        //正常浏览器 event.stopPropagation()
        event.stopPropagation();//能够阻止事件冒泡
        //IE678 取消冒泡
        event.cancelBubble = true;

        //取消冒泡的兼容写法
        if (event && event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }

    }

3.绑定事件的两种方法，直接运行代码，分析结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<script>

    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");

    //第一个人写的代码
    btn1.onclick = function () {
        console.log("第一个人写的代码");
    }
    //第二个人
    btn1.onclick = function () {
        console.log("第二个人写的代码");
    }

    //添加事件监听器 事件类型 事件处理函数 是否使用捕获
    btn2.addEventListener("click", function () {
        console.log("第一个人写的代码");
    }, false);

    btn2.addEventListener("click", function () {
        console.log("第二个人写的代码");
    }, false)

    //通过这种形式 后面的不会把前面的覆盖掉
    //IE678不兼容
    

</script>
</body>
</html>

直接给dom元素绑定onclick事件，那么后面的就会把前面的给覆盖掉。

通过addEventListener绑定的click事件，就不会把前面的时间给覆盖掉，执行代码时候，两者皆可以执行。

如果此时想移除绑定的事件。对于第一种绑定，btn.οnclick=null;就可以解除绑定。

而对于第二种，可以使用 btn2.removeEventListener

但是应用此种解除的时候有个前提，就是 btn2.addEventListener中的第二个参数不能为匿名函数（如同本案例中所示那样，道理很简单，如果使用匿名函数，你怎么知道要解除掉哪个匿名函数呢。

正确的写法如下，需要在外声明一个函数。

    function fn() {
        //代码
    }
    btn2.addEventListener("click", fn, false);
    btn2.removeEventListener("click", fn, false);//通过这种方式能够移除事件

4.关于冒泡和捕获。

先看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #father {
            width: 100px;
            height: 100px;
            margin: 100px;
            background-color: red;
        }

        #son {
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="son"></div>
</div>
<script>
    var son = document.getElementById("son");
    var father = document.getElementById("father");

    var arr = [son, father, document.body, document];

    for (var i = 0; i < arr.length; i++) {
        
         arr[i].onclick = function () {
         console.log(this);
         }   
    }

</script>
</body>
</html>

页面为：

当点击小蓝色方框时候，控制台输出：

可以看到触动son的同时，也要触动其上级father,上上级document.body, 上上上级document。这就叫做冒泡，

如果触动father,那么结果也不能想象，结果如下：

同样在页面上进行点击的，结果当然是上图中的，后两条打印结果。

也就是：<body>...</body>

#document

上面冒泡的写法，也可以改为如下：

        arr[i].addEventListener("click", function () {
         console.log(this);
         }, false)

其中监听事件中的第三个参数，默认就是false ,表示冒泡。如果设为true,就是捕获啦。如下代码：

        arr[i].addEventListener("click", function () {
            console.log(this);
        }, true)//如果第三个参数useCapture 是 true 就使用捕获的方式来执行事件

当点击小蓝色框时候，执行结果恰好与冒泡相反：

关于捕获，冒泡的其他知识点，将还会进行补充的。

5.keyup ,keydown时间。

我们在一些input中按下键盘和弹起键盘通常会触发keyup,keydown事件，此时event对象有个keyCode属性，它的值对应键盘上每一个按键。此时可以通过判断按下了，那个键，分别做相应的响应。通常应用中是，判断enter键，让其进行光标的重新定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<script>
    var inputs = document.getElementsByTagName("input");
    //按下回车键 切换到下一个文本框
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onkeydown = function (e) {
            //console.log(e.keyCode);//回车键的keycode是13
            if (e.keyCode == 13) {
                var txt = this.nextElementSibling.nextElementSibling;
                if (txt.type == "text") {
                    txt.focus();
                }
            }
        }
    }

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text" id="inp1"/>
<script>
    var inp1 = document.getElementById("inp1");
    //键盘按下
    inp1.onkeydown = function (e) {
        console.log("down" + e.keyCode);//通过键盘码可以知道用户按下了哪个键
    }
    //键盘弹起
    /*inp1.onkeyup = function (e) {
     console.log("up" + e.keyCode);
     }*/

    //键盘按下
    //w3c 写的是 onkeypress = onkeydown+onkeyup
    //实际情况可能不同 onkeypress = onkeydown
    //最本质的区别是 keydown 和 keyup 用的是键盘码 press 用的是ASCII
    inp1.onkeypress = function (e) {
        console.log("press" + e.keyCode);
    }


</script>
</body>
</html>