JavaScript的事件对象

最新推荐文章于 2022-05-05 22:17:53 发布

dancheng_work

最新推荐文章于 2022-05-05 22:17:53 发布

阅读量748

点赞数

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/dancheng1/article/details/77018396

版权

JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

事件对象，每个事件(包括鼠标、键盘事件)触发执行的过程中，都有对应的事件对象，通过事件对象可以获得鼠标相对页面的坐标信息、通过事件对象也可以感知什么键子被触发执行、通过事件对象还可以阻止事件流产生、阻止浏览器默认动作。

1、获得事件对象

获得：

①主流浏览器(IE9以上版本浏览器)：

node.onclick = function(evt){evt就是事件对象}

addEventListener(类型,function(evt){}/函数名字);

function 函数名称(evt){}

事件处理函数的第一个形参就是事件对象

② IE(6/7/8)浏览器

node.onclick = function(){window.event事件对象}

全局变量event就是事件对象

<body>
    <h2>事件流</h2>
    <div>
        操作事件对象
    </div>
</body>
</html>
<script type="text/javascript">
    //形参evt代表事件对象
    function clk(evt) {
        //console.log(evt);
        var  evnt = evt ? evt : window.event;   //兼容事件对象获取
        this.style.backgroundColor = "green";
    }
    var dv = document.getElementsByTagName('div')[0];
    dv.addEventListener('click', clk);
</script>

效果图：

2、事件对象作用

（1）获得鼠标信息

event.clientX/clientY; //相对dom区域坐标

event.pageX/pageY; //相对dom区域坐标，给考虑滚动条位置

event.screenX/screenY; //相对屏幕坐标

<body>
    <h2>事件流</h2>
    <div>
        操作事件对象
    </div>
</body>
</html>
<script type="text/javascript">
    //形参evt代表事件对象
    function clk(evt) {
        var  evnt = evt ? evt : window.event;   //兼容事件对象获取
        console.log(evnt.clientX + "--" + evnt.clientY);
        console.log(evnt.pageX + "--" + evnt.pageY);   //考虑滚动条的长度
        console.log(evnt.screenX + "--" + evnt.screenY)   //关于电脑屏幕的位置
    }
    var dv = document.getElementsByTagName('div')[0];
    dv.addEventListener('click', clk);
</script>

效果图：

（2）阻止事件流

event.stopPropagation(); //主流浏览器

event.cancelBubble = true; // IE浏览器

冒泡型、捕捉型都可以进行阻止,为了浏览器兼容处理，只考虑冒泡型。

<body>
    <h2>事件流</h2>
    <div>
        <p>
            <span>I am span</span>
        </p>
    </div>
</body>
</html>
<script type="text/javascript">
    var dv = document.getElementsByTagName('div')[0];
    var pp = document.getElementsByTagName('p')[0];
    var sp = document.getElementsByTagName('span')[0];
    //addEventListener（类型， 处理， true捕捉/false冒泡）
    sp.addEventListener('click', function (evt) {
        console.log('span tag');
        evt.stopPropagation();   //阻止事件流产生
    }, false);
    pp.addEventListener('click', function (evt) {
        console.log('p tag');
        evt.stopPropagation();   //阻止事件流产生
    }, false)
    dv.addEventListener('click', function (evt) {
        console.log('div tag');
        evt.stopPropagation();   //阻止事件流产生
    }, false)
</script>

效果图：

（3）阻止浏览器默认动作

浏览器默认动作，注册form表单页面，提交表单的时候，浏览器的页面会根据action属性值进行跳转，这个动作称为“浏览器默认动作”。

event.preventDefault(); //主流浏览器

event.returnValue = false; //IE浏览器

return false; //dom1级事件设置起作用

<body>
    <h2>事件对象阻止浏览器默认动作（form表单提交动作）</h2>
    <form action="21.php" method="post">
        <p>用户名<input type="text" name="username" ></p>
        <p>密码<input type="password" name="userpwd" ></p>
        <p>邮箱<input type="text" name="useremail" ></p>
        <p><input type="submit" value="注册"></p>
    </form>
</body>
</html>
<script type="text/javascript">
    var fm = document.getElementsByTagName('form')[0];
    fm.addEventListener('submit', function (evt) {
        alert('邮箱格式不正确');
        //return false;   //dom1事件的阻止form表单提交
        evt.preventDefault();   //dom2级事件的阻止foem表单提交
    });
</script>

（4）感知被触发键盘键子信息

event.keyCode 获得键盘对应的键值码信息

通过事件触发时候获得的keyCode数值码信息可以对应键盘的键子信息。

<body>
    <h2>事件对象阻止浏览器默认动作（form表单提交动作）</h2>
        <p>用户名<input type="text" name="username" id="username" ></p>
        <p>密码<input type="password" name="userpwd" ></p>
        <p>邮箱<input type="text" name="useremail" ></p>
        <p><input type="submit" value="注册"></p>
</body>
</html>
<script type="text/javascript">
    var username = document.getElementById('username');
    username.addEventListener('keyup', function (evt) {
        //感知被触发键盘信息
        var num = evt.keyCode;
        if(num == 37){
            console.log('左');
        } else if(num == 38){
            console.log('上');
        } else if(num == 39){
            console.log('右');
        } else if(num == 40){
            console.log('下');
        }
    });
</script>

效果图：

（5）什么是加载事件

js代码执行时候，需要html&css的支持，就让html先执行(先进入内存)，js代码后执行

js代码在最后执行的过程就是“加载过程”，通常通过“加载事件”实现加载过程

具体设置：

window.onload = 匿名/有名函数; //推荐

第一种加载方式：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function jiazai() {
            var dv = document.getElementsByTagName('div')[0];
            dv.onclick = function () {
                this.style.backgroundColor = "pink";
            }
        }
    </script>
    <style type="text/css">
        div {width: 300px; height: 200px; background: lightblue;}
    </style>
</head>
<body οnlοad="jiazai()">
    <h2>加载事件</h2>
    <div>
        操作加载事件
    </div>
</body>
</html>

效果图：

第二种加载方式：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function jiazai() {
            var dv = document.getElementsByTagName('div')[0];
            dv.onclick = function () {
                this.style.backgroundColor = "pink";
            }
        }
        window.onload = jiazai;
    </script>
    <style type="text/css">
        div {width: 300px; height: 200px; background: lightblue;}
    </style>
</head>
<body>
    <h2>加载事件</h2>
    <div>
        操作加载事件
    </div>
</body>
</html>

效果图：

第三种：匿名灵活使用

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function jiazai() {
            var dv = document.getElementsByTagName('div')[0];
            dv.onclick = function () {
                this.style.backgroundColor = "pink";
            }
        }
        function f1() {
            console.log('加载中...');
        }
        window.onload = jiazai;

        window.onload = function () {
            jiazai();
            f1();
        }
    </script>
    <style type="text/css">
        div {width: 300px; height: 200px; background: lightblue;}
    </style>
</head>
<body>
    <h2>加载事件</h2>
    <div>
        操作加载事件
    </div>
</body>
</html>

效果图：