开发者社区> 亦世凡华、> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【JavaScript】一文了解事件对象

简介: 一文了解事件对象
+关注继续查看

2000元阿里云代金券免费领取,2核4G云服务器仅664元/3年,新老用户都有优惠,立即抢购>>>

🏆事件对象

事件对象只要有了事件才会存在,它是系统给我们自动创建的不需要传递参数

事件对象可以自己命名,例如:event、evt、e。

事件对象也有兼容性问题 ie678 通过window.event 兼容性写法 e = e || window.event

var div = document.querySelector('div');
// event 就是一个事件对象,写到我们侦听函数的小括号里,当形参来看
div.onclick = function(event){}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(event){
            console.log(event);
        }
    </script>
</body>
</html>

图片.png

官方解释:event对象代表事件的状态,比如键盘按键状态、鼠标的位置、鼠标按钮状态。

简单理解:事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event,它有很多属性和方法。

🍇事件对象常见的属性和方法

事件对象属性方法 说明

e.target 返回触发事件的对象(标准)

e.srcElement 返回触发事件的对象(非标准)

e.type 返回事件的类型 例如:click mouseover 不带on

e.cancelBubble 该属性阻止冒泡 非标准 ie6-8使用

e.returnValue 该属性 阻止默认事件(默认行为)非标准 ie6-8使用 比如不让链接跳转

e.preventDefault() 该方法 阻止默认事件(默认行为)标准 比如不让链接跳转

e.stopPropagation() 阻止冒泡 标准

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>123</div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        // 常见事件对象的属性和方法
        // 1.e.target返回的是触发事件的元素(对象),this返回的是绑定事件的元素(对象)
        // 区别:e.target点击了那个元素就返回了那个元素 this哪个元素绑定了事件就返回谁
        var div = document.querySelector('div');
        div.addEventListener('click',function(e){
            console.log(e.target);
            console.log(this);
        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e){
            // 我们给ul绑定了事件,那么this就指向ul
            console.log(this);
            // e.target指向我们点击的那个对象,谁触发了事件 我们点击的li e.target就指向谁
            console.log(e.target);
        })
        // 2.e.srcElement 非标准 ie6-8使用 了解
        // div.onclick = function(){
        //     e = e || window.event;
        //     var target = e.target || e.srcElement;
        //     console.log(target);
        // }
    </script>
</body>
</html>

图片.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>123</div>
    <a href="https://www.baidu.com">百度</a>
    <form action="https://www.baidu.com">
        <input type="submit" value="提交">
    </form>
    <script>
        // 1.返回事件类型
        var div = document.querySelector('div');
        div.addEventListener('click',fn);
        div.addEventListener('mousemove',fn);
        div.addEventListener('mouseout',fn);
        function fn(e){
            console.log(e.type);
        }
        // 2.阻止默认行为(事件)让链接不跳转 或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click',function(e){
            e.preventDefault(); //dom标准写法,阻止链接跳转
        })
        a.onclick = function(e){
            // 普通浏览器
            // e.preventDefault();
            // IE6-8
            // e.returnValue
            // rerurn false 也能阻止默认行为,但是后面的代码不能执行
        }
    </script>
</body>
</html>

图片.png

🍈阻止事件冒泡

事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到DOM最顶层节点。

事件冒泡的本身特性既有好处也有坏处,需要我们灵活掌握。

stopPropagation()方法(标准写法)ie低版本浏览器未cancelBubble(); 这里不在讲解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 400px;
            height: 400px;
            margin: 100px auto;
            background-color: #008c8c;
            position: relative;
        }
        .son{
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #f00;
            left: 25%;
            top: 25%;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        // 冒泡阶段,如果addEventListener 第三个参数是 false或省略 那么则处于冒泡阶段 
        // son -> father -> body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click',function(e){
            alert('son')
            e.stopPropagation() // 停止冒泡传播
        },false)
        var father = document.querySelector('.father');
        father.addEventListener('click',function(){
            alert('father')
        },false)
    </script>
</body>
</html>

图片.png

🍉事件委托

事件委托也称事件代理,在jQuery里面称为事件委派。

原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。

作用:只操作了一次DOM,提高了程序的性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
    </ul>
    <script>
        // 事件委托的核心原理:给父节点添加侦听器,利用事件冒泡影响每一个子节点。
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            e.target.style.backgroundColor = 'red'
        })
    </script>
</body>
</html>

图片.png

🍊鼠标事件

禁止选中文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    你能右键复制我吗?
    <script>
        document.addEventListener('contextmenu',function(e){
            e.preventDefault();
        })
    </script>
</body>
</html>

禁止选中文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    你能选中我吗?
    <script>
        document.addEventListener('selectstart',function(e){
            e.preventDefault();
        })
    </script>
</body>
</html>

🍋鼠标事件对象

鼠标事件对象 说明

e.clientX 返回鼠标相对于浏览器窗口可视区的 X 坐标

e.clientY 返回鼠标相对于浏览器窗口可视区的 Y 坐标

e.pageX 返回鼠标相对于文档页面的 X 坐标 IE9+支持

e.pageY 返回鼠标相对于文档页面的 Y 坐标 IE9+支持

e.screenX 返回鼠标相对于电脑屏幕的 X 坐标

e.screenY 返回鼠标相对于电脑屏幕的 Y 坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 鼠标事件对象
        document.addEventListener('click',function(e){
            // client 鼠标可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('----------------');
            // page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('----------------');
            // screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })
    </script>
</body>
</html>

图片.png

🍌键盘事件

键盘事件触发条件
onkeyup某个键盘按键被松开时触发
onkeydown某个键盘按键被按下时触发
onkeypress某个键盘按键被按下时 触发 但不识别功能键 比如 ctrl shift 箭头等

三个事件的执行顺序:keydowm -> keypress -> keyup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.keyup 按键弹起时触发
        document.addEventListener('keyup',function(){
            console.log('键盘按下弹起了');
        })
        // 2.keydown 按键按下的时候触发
        document.addEventListener('keydown',function(){
            console.log('键盘按下了down');
        })
        // 3.keypress 不能识别功能键 ctrl shift 左右箭头等
        document.addEventListener('keypress',function(){
            console.log('键盘按下了press');
        })
    </script>
</body>
</html>

图片.png

🍍键盘事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 键盘事件对象的keyCode属性可以得到相应键的ASCII码值
        // 1.我们的keyup 和 keydown 时间不区分大小写 a 和 A 得到的都是65
        document.addEventListener('keyup',function(e){
            console.log('up:'+e.keyCode);
            // 我们可以通过keyCode返回的ASCII码值来判断用户按下了哪个键
            if(e.keyCode == 65){
                alert('您按下了a键')
            }else{
                alert('您没有按下a键')
            }
        })
        // 2.我们的keypress 事件 区分字母大小写 a 得到的是 97  A 得到的是65
        document.addEventListener('keypress',function(e){
            console.log('press:'+e.keyCode);
        })
    </script>
</body>
</html>

图片.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript 对象
通过这节学习JavaScript 对象。
4 0
Javascript 对象
Javascript 对象
30 0
JavaScript对象
JavaScript对象
24 0
JavaScript对象
JavaScript对象有两种创建方式
47 0
JavaScript 对象
原文:JavaScript 对象 JavaScript 对象是拥有属性和方法的数据。 JavaScript 对象是变量的容器。 对象定义 你可以使用字符来定义和创建 JavaScript 对象: 实例 var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; 对象属性 可以说 "JavaScript 对象是变量的容器"。
591 0
javascript包装对象
原文:javascript包装对象            javascript对象是一种复合值,它是属性或已命名的值的集合,通过符号"."来引用属性值,当属性值是一个函数的时候,我们称之为方法。  我们看到字符串也具有属性和方法:           var s="hello,world!";           var word=s.
710 0
javascript对象类型
javascript中没有类的概念,由函数模拟类的方式工作。function Base(){   //定义属性   this.id = "123456";   this.name = "张三";   //定义方法   this.
477 0
+关注
亦世凡华、
在校大学生,涉及前端开发,Python,java,web安全相关爱好,努力成为一名优质的阿里云原创作者
65
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载
http://www.vxiaotou.com