JavaScript常见事件和方法

最新推荐文章于 2024-07-02 12:21:43 发布

失忆症患者_

最新推荐文章于 2024-07-02 12:21:43 发布

阅读量242

点赞数

分类专栏： JavaScript基础文章标签： javascript js

本文链接：https://blog.csdn.net/qq_41929578/article/details/108993179

版权

JavaScript基础专栏收录该内容

24 篇文章 1 订阅

订阅专栏

常见事件和方法

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

    1. e.target 返回的是触发事件的对象（元素）  
    2. this 返回的是绑定事件的对象（元素）
 	区别 ： e.target 点击了哪个元素，就返回哪个元素 ，this 哪个元素绑定了这个点击事件，那么就返回谁

例如：

<ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
</ul>
<script>
		var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
                // 我们给ul 绑定了事件  那么this 就指向ul  
                console.log(this);
                console.log(e.type);//返回事件类型
                // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                console.log(e.target);

            })
</script>

案例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</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);
                console.log(e.currentTarget);
                console.log(e.type);//返回事件类型

                // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                console.log(e.target);

            })
            // 了解兼容性
            // div.onclick = function(e) {
            //     e = e || window.event;
            //     var target = e.target || e.srcElement;
            //     console.log(target);

        // }
        // 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识
    </script>
</body>

</html>

获取鼠标在屏幕中的位置

<script type="text/javascript">
			document.addEventListener('click',function(e){
				// 1. client在鼠标可视区的X,Y坐标
				console.log('('+e.clientX+','+e.clientY+')')
				// 2. page得到距离顶部的X,Y坐标
				console.log('('+e.pageX+','+e.pageY+')')
			})
		</script>

失忆症患者_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript常见事件和方法

常见事件和方法常见事件对象的属性和方法： 1. e.target 返回的是触发事件的对象（元素） 2. this 返回的是绑定事件的对象（元素）区别： e.target 点击了哪个元素，就返回哪个元素，this 哪个元素绑定了这个点击事件，那么就返回谁例如：<ul> <li>abc</li> <li>abc</li> <li>abc</li&gt
复制链接

扫一扫