JavaScript的事件对象

来源：互联网发布：什么是linux内核编辑：程序博客网时间：2024/05/22 10:24

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

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 onload="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>

效果图：

阅读全文

0 0