【JS、三】DOM高级

最新推荐文章于 2024-08-02 14:21:03 发布

不倒翁玩偶

最新推荐文章于 2024-08-02 14:21:03 发布

阅读量113

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/sh1307212321/article/details/129870488

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

注册事件

传统注册事件
- 同一个元素多个事件，后面会把前面覆盖
监听注册事件
- addEventListener（）他是一个方法
- 里面的事件类型是字符串，必定加引号，而且不带on
- 同一个元素同一个事件可以添加多个监听器

body>
<button>99</button>

<script>
var bb = document.querySelector('button');
bb.addEventListener('click',function (){
    alert(666)
})

</script>
</body>

第三个参数：true捕获阶段
1. false 冒泡阶段

事件对象

<body>
<button>99</button>

<script>
var bb = document.querySelector('button');
bb.onclick=function (event){
    alert(event)
}

</script>
</body>

event 就是一个事件对象，写到我们侦听函数的小括号里面，当形参来看
事件对象只有有了事件才会存在，他是系统给我们自动创建的，不需要我们传递参数
事件对象是我们事件的一系列相关数据的集合，根据事件相关的比如鼠标点击里面就包含了鼠标相关的信息，鼠标坐标啊
这个时间对象，我们可以自己命名
时间也是有兼容性问题

方法：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m2SXnR85-1680197402756)(C:\Users\86185\AppData\Roaming\Typora\typora-user-images\image-20211204035154800.png)]$

<body>
<button>99</button>

<script>
var bb = document.querySelector('button');
bb.onclick=function (event){
    //target 返回的是触发事件的对象，this返回是绑定事件的对象
   //target谁点击了返回谁，this谁绑定了返回谁
    console.log(event.target)
}

</script>
</body>

阻止行为：

var bb = document.querySelector('button');
bb.onclick=function (e){
    
    //1
    e.preventDefault();
    
    //2低版本浏览器
    e.returnValue;
    
    //3
    return false;
    
}

阻止冒泡：

var bb = document.querySelector('button');
bb.addEventListener('click',function (e){
	//stop停止
    e.stopPropagation();
    //2
    e.canaelBubble=true;
})

常用的鼠标事件

禁止鼠标右键菜单
contextmenu

<body>
<button>99</button>

wowowowo
<script>
document.addEventListener('contextmenu',function (e){
    e.preventDefault();
})


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

禁止选中文字
swlwctstart

document.addEventListener('swlwctstart',function (e){
    e.preventDefault();
})

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xOBpj4ze-1680197402757)(C:\Users\86185\AppData\Roaming\Typora\typora-user-images\image-20211204041428414.png)]$

鼠标移动事件：

mousemove
首先一定要将图片绝对定位

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
img{
    width: 50px;
    height: 50px;
    position: absolute;
}

  </style>
</head>
<body>
<img src="9.jpg">
<script>
    //获取图片
    var qq = document.querySelector('img');
//添加事件
document.addEventListener('mousemove',function (e){
    //获取x坐标
    var x = e.pageX;
    //获取y坐标
    var y = e.pageY;
    //赋给图片
    qq.style.left=x+'px';
    qq.style.top=y+'px';
})

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

键盘事件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3uc8iuuV-1680197402758)(C:\Users\86185\AppData\Roaming\Typora\typora-user-images\image-20211204043250398.png)]$

松开时触发：

document.addEventListener('keyup',function (e){
    console.log('我弹起来')
})

按下时触发：

document.addEventListener('keydown',function (e){
    console.log('我弹起来')
})

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4V07OHHj-1680197402758)(C:\Users\86185\AppData\Roaming\Typora\typora-user-images\image-20211204043722962.png)]$

键盘时间对象

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FLpKcEH4-1680197402758)(C:\Users\86185\AppData\Roaming\Typora\typora-user-images\image-20211204044057879.png)]$

案例1：

键盘按s，获取文本框的焦点

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OOApmU6y-1680197402759)(C:\Users\86185\AppData\Roaming\Typora\typora-user-images\image-20211204044433941.png)]$

案例2：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AL2JaTPX-1680197402759)(C:\Users\86185\AppData\Roaming\Typora\typora-user-images\image-20211204044837386.png)]$