dom事件对象、解绑事件、事件委托、页面加载、滚动事件、页面尺寸事件-369IT编程

admin管理员组
文章数量:1130349

dom事件对象、解绑事件、事件委托、页面加载、滚动事件、页面尺寸事件

1、e.type获取事件类型，例如click input focus

<input type="text">
<script>let input=document.querySelector('input');input.addEventListener('input',function (e) {console.log(e);//这个e就是一个对象// e.type获取事件类型，例如click input focusconsole.log(e.type);//input})</script>

还是同样的例子，把事件类型换成了keyup

2、e.code可以判断按下的是哪一个键

input.addEventListener('keyup',function (e) {// console.log(e);//enter// e.code可以判断按下的是哪一个键console.log(e.code);})

判断是否按了某个键

input.addEventListener('keyup',function (e) {console.log(e.code);// 判断是否按下了Enter键if (e.key==='Enter') {console.log('我按下了enter键');}
})

3、事件解绑

先写二个按钮，并获取

<button>事件解绑1</button>
<button class="btn">事件解绑2</button>
const btn=document.querySelector('button');
const btn2=document.querySelector('.btn');

on事件方式：直接使用null，就可以事件的解绑

// 绑定（点击）事件
btn.onclick=function(){alert('点击了');
}
// 解绑（点击）事件
// null是空对象
btn.onclick=null;

addEventListener方式，必须使用
removeEventListener(事件类型,事件处理函数，[获取捕获或者冒泡阶段])
匿名函数无法被解绑

const btn2=document.querySelector('.btn');
function fn() {alert('点击2');
}
btn2.addEventListener('click',fn);
btn2.removeEventListener('click',fn);

二者区别：
传统on注册 (LO)
同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖，就可以实现事件的解绑
都是冒泡阶段执行的

事件监听注册 (L2)
语法:addEventListener(事件类型事件处理函数，是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener(事件类型事件处理函数，获取捕获或者冒泡阶段
匿名函数无法被解绑

4、事件委托

<ul><li>第1个孩子</li><li>第2个孩子</li><li>第3个孩子</li><li>第4个孩子</li><li>第5个孩子</li><p>我不需要变颜色</p>
</ul>
<script>// 需求：点到谁（指孩子），谁的颜色变红色// 利用冒泡：点到li 然后li冒泡到 ulconst ul=document.querySelector('ul');ul.addEventListener('click',function (e) {console.log(e);console.log(e.target);// 需求2：只有点到li才会变颜色if (e.target.tagName==='LI') {e.target.style.color='red'}})
</script>

5、阻止默认事件

<form action="/"><input type="submit" value="注册">
</form>
<a href="/" target="_blank">百度一下</a>
<script>const form = document.querySelector('form');const a = document.querySelector('a');form.addEventListener('click',function (e) {// 阻止默认事件e.preventDefault();})a.addEventListener('click',function (e) {e.preventDefault();})
</script>

点击之后，不会跳转到新的页面

6、页面加载事件

<!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><script>const btn=document.querySelector('button');btn.addEventListener('click',function () {alert(12);})</script>
</head>
<body><button>点击</button>
</body>
</html>

把script写在上边会导致script无效

点击后，会报错

此时就需要页面加载函数，让页面其他部分先加载，script最后在执行

<script>window.addEventListener('click', function () {const btn = document.querySelector('button');btn.addEventListener('click', function () {alert(12);});});
</script>

再点击就能正常运行了

img.addEventListener('load',function () {// 等待图片加载完毕，在执行相关事件
})

这个速度更快！

7、页面滚动事件

<style>div{width: 200px;height: 200px;overflow: scroll;margin: 100px;}body{height: 3000px;}
</style>

<div>《方舟：生存进化》故事主要讲述，一群男女从在岸边醒来后，发现自己身处一个充满恐龙的神秘岛屿“ARK”。游戏中除了狩猎、资源搜刮、物品打造、种植、科研、调查技术和建造房子来抵抗炎热的白天，冰冷的夜晚，易变的天气系统，危险的野外和潜在的敌人等之外，玩家还必须面对其他玩家所扮演的幸存者，合作或者是相互厮杀。并且有80多种恐龙和其他史前生物，玩家们可以驯服这些庞大的生物，并利用它们来和更强的敌人战斗。当然恐龙并非岛上的危险生物，其他的玩家也正在组织自己的部落，积累各种资源和经验来建立庞大的村庄和城市，他们还能不断发展技术来跨越原始的石器时代并进入现代的电气时代，而且他们还会不断战斗来摧毁威胁到他们的人。
此外玩家们还需要通过策略战术来驯服游戏中出现的各种恐龙和其他原始生物，并利用他们来跨越海陆空甚至进入地下世界。玩家们可以利用本作中深入的角色扮演系统来充分打造自己角色的长处，并获得各种物品、技能和宠物等。玩家们还要同数以百计的其他玩家部落展开生存竞争，并最终发现“方舟(ARK)”的真正目的。 [3] 
80多种恐龙使用各种策略去驯服、训练，同时还能繁殖恐龙和其它史前生物，这些生物生活在陆地、海洋、空气甚至地下洞窟等各色完整的生态系统中。除了探索一个庞大且具有生命力的史前环境，还要摸索出生存的方法，壮大自己，最终逃离方舟。 [1] </div>

const div=document.querySelector('div');
div.addEventListener('scroll',function () {console.log('我滚动了');// srocllTop被卷去的头部console.log(div.scrollTop);
})

// 获取整个html页面滚动了多少
window.addEventListener('scroll',function () {// 获取html页面// console.log(document.documentElement);console.log(`html滚动了${parseInt(document.documentElement.scrollTop)}px`);// 当页面滚动了100px以上。就让div显示if (parseInt(document.documentElement.scrollTop)>100) {div.style.display='block';}
})

8、页面尺寸事件

<!-- resize当页面尺寸发生变化的时候，就会触发这个事件 -->
<script>window.addEventListener('resize',function () {console.log('页面发生变化了');})
</script>

8.1、clientWidth、clientHeight获取元素的可见部分宽高(不包含边框，margin，滚动条等)

<style>div{width: 200px;height: 200px;padding: 10px;margin: 50px;background-color: pink;}
</style>
<div></div>

const div=document.querySelector('div');
console.log(div.clientWidth);

8.2、offset

不加border

        .one {height: 200px;width: 200px;background-color: pink;/* border: 10px solid red; */padding: 20px;/* margin: 10px; */}</style>
</head><body><div class="one"></div><script>const one=document.querySelector('.one');console.log(one.offsetWidth);</script>
</body>

把border的注释取消了

<style>*{padding: 0;margin: 0;}绝对定位的父盒子宽高都是300px，距离左边和上边都是50px.father{position: absolute;top: 50px;left: 50px;width: 300px;height: 300px;background-color: pink;}.son{width: 100px;height: 100px;background-color: red;margin: 10px;}</style>
</head>
<body><div class="father"><div class="son"></div></div><script>//获取元素let father=document.querySelector('.father');let son=document.querySelector('.son');// offsetLeft可算出自身可见区域到最近带有定位的盒子的距离// 如果祖先元素都没有定位，那么距离就是到html文档距离console.log("son.offsetLeft:"+son.offsetLeft);//10console.log("father.offsetLeft:"+father.offsetLeft);//50</script>
</body>

位置总结：

dom事件对象、解绑事件、事件委托、页面加载、滚动事件、页面尺寸事件

1、e.type获取事件类型，例如click input focus

<input type="text">
<script>let input=document.querySelector('input');input.addEventListener('input',function (e) {console.log(e);//这个e就是一个对象// e.type获取事件类型，例如click input focusconsole.log(e.type);//input})</script>

还是同样的例子，把事件类型换成了keyup

2、e.code可以判断按下的是哪一个键

input.addEventListener('keyup',function (e) {// console.log(e);//enter// e.code可以判断按下的是哪一个键console.log(e.code);})

判断是否按了某个键

input.addEventListener('keyup',function (e) {console.log(e.code);// 判断是否按下了Enter键if (e.key==='Enter') {console.log('我按下了enter键');}
})

3、事件解绑

先写二个按钮，并获取

<button>事件解绑1</button>
<button class="btn">事件解绑2</button>
const btn=document.querySelector('button');
const btn2=document.querySelector('.btn');

on事件方式：直接使用null，就可以事件的解绑

// 绑定（点击）事件
btn.onclick=function(){alert('点击了');
}
// 解绑（点击）事件
// null是空对象
btn.onclick=null;

addEventListener方式，必须使用
removeEventListener(事件类型,事件处理函数，[获取捕获或者冒泡阶段])
匿名函数无法被解绑

const btn2=document.querySelector('.btn');
function fn() {alert('点击2');
}
btn2.addEventListener('click',fn);
btn2.removeEventListener('click',fn);

二者区别：
传统on注册 (LO)
同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖，就可以实现事件的解绑
都是冒泡阶段执行的

4、事件委托

<ul><li>第1个孩子</li><li>第2个孩子</li><li>第3个孩子</li><li>第4个孩子</li><li>第5个孩子</li><p>我不需要变颜色</p>
</ul>
<script>// 需求：点到谁（指孩子），谁的颜色变红色// 利用冒泡：点到li 然后li冒泡到 ulconst ul=document.querySelector('ul');ul.addEventListener('click',function (e) {console.log(e);console.log(e.target);// 需求2：只有点到li才会变颜色if (e.target.tagName==='LI') {e.target.style.color='red'}})
</script>

5、阻止默认事件

<form action="/"><input type="submit" value="注册">
</form>
<a href="/" target="_blank">百度一下</a>
<script>const form = document.querySelector('form');const a = document.querySelector('a');form.addEventListener('click',function (e) {// 阻止默认事件e.preventDefault();})a.addEventListener('click',function (e) {e.preventDefault();})
</script>

点击之后，不会跳转到新的页面

6、页面加载事件

<!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><script>const btn=document.querySelector('button');btn.addEventListener('click',function () {alert(12);})</script>
</head>
<body><button>点击</button>
</body>
</html>

把script写在上边会导致script无效

点击后，会报错

此时就需要页面加载函数，让页面其他部分先加载，script最后在执行

<script>window.addEventListener('click', function () {const btn = document.querySelector('button');btn.addEventListener('click', function () {alert(12);});});
</script>

再点击就能正常运行了

img.addEventListener('load',function () {// 等待图片加载完毕，在执行相关事件
})

这个速度更快！

7、页面滚动事件

<style>div{width: 200px;height: 200px;overflow: scroll;margin: 100px;}body{height: 3000px;}
</style>

<div>《方舟：生存进化》故事主要讲述，一群男女从在岸边醒来后，发现自己身处一个充满恐龙的神秘岛屿“ARK”。游戏中除了狩猎、资源搜刮、物品打造、种植、科研、调查技术和建造房子来抵抗炎热的白天，冰冷的夜晚，易变的天气系统，危险的野外和潜在的敌人等之外，玩家还必须面对其他玩家所扮演的幸存者，合作或者是相互厮杀。并且有80多种恐龙和其他史前生物，玩家们可以驯服这些庞大的生物，并利用它们来和更强的敌人战斗。当然恐龙并非岛上的危险生物，其他的玩家也正在组织自己的部落，积累各种资源和经验来建立庞大的村庄和城市，他们还能不断发展技术来跨越原始的石器时代并进入现代的电气时代，而且他们还会不断战斗来摧毁威胁到他们的人。
此外玩家们还需要通过策略战术来驯服游戏中出现的各种恐龙和其他原始生物，并利用他们来跨越海陆空甚至进入地下世界。玩家们可以利用本作中深入的角色扮演系统来充分打造自己角色的长处，并获得各种物品、技能和宠物等。玩家们还要同数以百计的其他玩家部落展开生存竞争，并最终发现“方舟(ARK)”的真正目的。 [3] 
80多种恐龙使用各种策略去驯服、训练，同时还能繁殖恐龙和其它史前生物，这些生物生活在陆地、海洋、空气甚至地下洞窟等各色完整的生态系统中。除了探索一个庞大且具有生命力的史前环境，还要摸索出生存的方法，壮大自己，最终逃离方舟。 [1] </div>

const div=document.querySelector('div');
div.addEventListener('scroll',function () {console.log('我滚动了');// srocllTop被卷去的头部console.log(div.scrollTop);
})

// 获取整个html页面滚动了多少
window.addEventListener('scroll',function () {// 获取html页面// console.log(document.documentElement);console.log(`html滚动了${parseInt(document.documentElement.scrollTop)}px`);// 当页面滚动了100px以上。就让div显示if (parseInt(document.documentElement.scrollTop)>100) {div.style.display='block';}
})

8、页面尺寸事件

<!-- resize当页面尺寸发生变化的时候，就会触发这个事件 -->
<script>window.addEventListener('resize',function () {console.log('页面发生变化了');})
</script>

8.1、clientWidth、clientHeight获取元素的可见部分宽高(不包含边框，margin，滚动条等)

<style>div{width: 200px;height: 200px;padding: 10px;margin: 50px;background-color: pink;}
</style>
<div></div>

const div=document.querySelector('div');
console.log(div.clientWidth);

8.2、offset

不加border

        .one {height: 200px;width: 200px;background-color: pink;/* border: 10px solid red; */padding: 20px;/* margin: 10px; */}</style>
</head><body><div class="one"></div><script>const one=document.querySelector('.one');console.log(one.offsetWidth);</script>
</body>

把border的注释取消了

<style>*{padding: 0;margin: 0;}绝对定位的父盒子宽高都是300px，距离左边和上边都是50px.father{position: absolute;top: 50px;left: 50px;width: 300px;height: 300px;background-color: pink;}.son{width: 100px;height: 100px;background-color: red;margin: 10px;}</style>
</head>
<body><div class="father"><div class="son"></div></div><script>//获取元素let father=document.querySelector('.father');let son=document.querySelector('.son');// offsetLeft可算出自身可见区域到最近带有定位的盒子的距离// 如果祖先元素都没有定位，那么距离就是到html文档距离console.log("son.offsetLeft:"+son.offsetLeft);//10console.log("father.offsetLeft:"+father.offsetLeft);//50</script>
</body>

位置总结：

本文标签： dom事件对象解绑事件事件委托页面加载滚动事件页面尺寸事件

版权声明：本文标题：dom事件对象、解绑事件、事件委托、页面加载、滚动事件、页面尺寸事件内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：https://it.en369.cn/IT/1694638909a254375.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

dom事件对象、解绑事件、事件委托、页面加载、滚动事件、页面尺寸事件

dom事件对象、解绑事件、事件委托、页面加载、滚动事件、页面尺寸事件

1、e.type获取事件类型，例如click input focus

2、e.code可以判断按下的是哪一个键

3、事件解绑

4、事件委托

5、阻止默认事件

6、页面加载事件

7、页面滚动事件

8、页面尺寸事件

dom事件对象、解绑事件、事件委托、页面加载、滚动事件、页面尺寸事件

1、e.type获取事件类型，例如click input focus

2、e.code可以判断按下的是哪一个键

3、事件解绑

4、事件委托

5、阻止默认事件

6、页面加载事件

7、页面滚动事件

8、页面尺寸事件

更多相关文章

dom事件对象、解绑事件、事件委托、页面加载、滚动事件、页面尺寸事件

发表评论

推荐文章

WePE 2.3 x64x86镜像ISO文件下载

不会报毒误杀的office激活BAT命令工具

cisco忘记console口密码

英语翻译器语音识别app哪款好？建议试试这六个

基于STM32+OneNet的智能安全帽设计_113

热门文章

个人电子邮箱注册申请哪个更好用？

139邮箱注册免费注册 html5.mail.10086.cn,139邮箱注册(登录139免费邮箱)

Windows自带的几种截图快捷键使用方法记录

android系统刷机,安卓手机刷机完全攻略 从此不再怕刷机

Nat. Commun. | 机器学习在化学发现中的应用

基于Node.js+vue智能手机推荐平台(开题+程序+论文) 计算机毕业设计

安装配置node.js

计算机键盘字母乱码,电脑键盘乱码怎么办 电脑键盘乱码原因及解决方法

在计算机里的键盘叫什么名字,电脑键盘最长的一个键叫什么名字

关于笔记本最下面出现黑条的解决办法

最新文章

Sublime 32位 激活码

windows下载安装远程桌面工具RealVNC-Server教程(RealVNC_E4_6_1版带注册码)

【亲测免费】 抖音直播伴侣推流密钥获取工具使用教程

【亲测免费】 Proxifer 安装包与注册码

Royal TSX许可证密钥(6.x后所有版本都可以用)

程序员刚毕业，先去大厂镀金还是先去小厂攒经验？

万象2008清空boss账户密码

【Tools】GitBook简明教程

oracle exadata celldisk 闪存盘受损导致性能下降

SDUT 2138 图结构练习——BFSDFS——判断可达性

WordPress get parent category taxonomy

Omit specific product categories from WooCommerce shortcode

Updating Posts table in database without overwriting user generated content

php - Use wp_get_recent_posts with search term

responsive - How to exclude an image size from the Wordpress srcset

android系统刷机,安卓手机刷机完全攻略从此不再怕刷机

计算机键盘字母乱码,电脑键盘乱码怎么办电脑键盘乱码原因及解决方法

Sublime 32位激活码

【亲测免费】抖音直播伴侣推流密钥获取工具使用教程