Dom多个事件绑定addEventListener、鼠标事件、拖拽元素

1 Dom多个事件绑定addEventListener():

addEventListener()

- 也可以通过addEventListener()来为元素绑定事件

addEventListener(type, listener [, useCapture])

- 参数:

type 要监听的事件的字符串,注意这里不需要写on

listener 回调函数,当事件发生后调用的函数

useCapture 布尔值,是否在捕获阶段触发事件,一般都是false

通过addEventListener()可以为一个元素的一个事件绑定多个响应函数,

这样当事件被触发时,响应函数会按照事件的绑定顺序依次执行

该方法不支持IE8及以下的浏览器

通过addachEvent()可以为一个元素的相同事件绑定多个响应函数 该方法支持IE8以下的浏览器—两个参数addachEvent (on事件,回调函数)

不同的是—先绑定的后执行,后绑定的先执行!

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>事件的绑定</title><script>window.onload = function () {var btn01 = document.getElementById('btn01');// 通过 对象.属性 的形式绑定响应函数时,同时只能为一个事件绑定一个响应函数// btn01.onclick = function () {// alert(1);// };//btn01.onclick = function () {alert(2);};btn01.onclick = null;/*addEventListener()- 也可以通过addEventListener()来为元素绑定事件addEventListener(type, listener [, useCapture])- 参数:type 要监听的事件的字符串,注意这里不需要写onlistener 回调函数,当事件发生后调用的函数useCapture 布尔值,是否在捕获阶段触发事件,一般都是false通过addEventListener()可以为一个元素的一个事件绑定多个响应函数,这样当事件被触发时,响应函数会按照事件的绑定顺序依次执行该方法不支持IE8及以下的浏览器通过addachEvent()可以为一个元素的相同事件绑定多个响应函数 该方法支持IE8以下的浏览器—两个参数addachEvent (on事件,回调函数)不同的是—先绑定的后执行,后绑定的先执行!*/// btn01.addEventListener("click",function () {// alert(1);// }, false)//// btn01.addEventListener("click",function () {// alert(2);// }, false)//// btn01.addEventListener("click",function () {// alert(3);// }, false)// btn01.removeEventListener()/*removeEventListener(type, listener[, useCapture]);- 用来移除元素上的事件监听器*/function fn() {alert(123);}btn01.addEventListener('click',fn, false);btn01.removeEventListener('click', fn, false);};</script></head><body><button id="btn01">点我一下</button></body></html>

2DOM事件的捕获:

关于事件的传播方向当时两大巨头网景和微软有着不同的理解:

网景公司认为事件应该由外向内传递,

事件发生时,应该先从外层元素上的事件,然后向内一层一层传递

这一事件的传播机制,称为 事件的捕获

微软公司认为事件应该由内向外传递

事件发生时,应该先从内层元素(触发事件的元素)开始,然后一层一层传递

这一事件的传播机制,称为 事件的冒泡

于是W3C将事件整个分为了三个阶段:

1.捕获阶段

- 事件发生后首先从外层元素向内层元素进行事件的捕获

- 默认情况下此阶段并不会触发事件

通常在捕获阶段不想触发事件--可以将addEventListener()的第三个参数设置为false

- 如果希望在捕获阶段触发事件,可以将addEventListener()的第三个参数设置为true

2.目标阶段

- 捕获到达触发事件的元素,捕获终止

3.冒泡阶段

- 从触发事件的元素开始,向外层进行事件的冒泡,并触发事件

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#box1{width: 300px;height: 300px;background-color: #bfa;}#box2{width: 150px;height: 150px;background-color: #ff0;}#box3{width: 50px;height: 50px;background-color: orange;}</style><script>window.onload = function () {/*关于事件的传播方向当时两大巨头网景和微软有着不同的理解:网景公司认为事件应该由外向内传递,事件发生时,应该先从外层元素上的事件,然后向内一层一层传递这一事件的传播机制,称为 事件的捕获微软公司认为事件应该由内向外传递事件发生时,应该先从内层元素(触发事件的元素)开始,然后一层一层传递这一事件的传播机制,称为 事件的冒泡于是W3C将事件整个分为了三个阶段:1.捕获阶段- 事件发生后首先从外层元素向内层元素进行事件的捕获- 默认情况下此阶段并不会触发事件通常在捕获阶段不想触发事件--可以将addEventListener()的第三个参数设置为false- 如果希望在捕获阶段触发事件,可以将addEventListener()的第三个参数设置为true2.目标阶段- 捕获到达触发事件的元素,捕获终止3.冒泡阶段- 从触发事件的元素开始,向外层进行事件的冒泡,并触发事件*///分别为三个元素绑定单击响应函数var box1 = document.getElementById('box1');var box2 = document.getElementById('box2');var box3 = document.getElementById('box3');box1.addEventListener('click',function () {alert(1);}, true); //传false 就不会在捕获阶段触发box2.addEventListener('click',function () {alert(2);}, true);box3.addEventListener('click',function () {alert(3);}, true);};</script></head><body><div id="box1"><div id="box2"><div id="box3"></div></div></div></body></html>

3鼠标拖拽div案例:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#box1{width: 100px;height: 100px;background-color: #f00;position: absolute;}#box2{width: 100px;height: 100px;background-color: orange;}#box3{width: 100px;height: 100px;background-color: yellow;}#box4{width: 100px;height: 100px;background-color: tomato;}.drag{position: absolute;}</style><script>window.onload = function () {//获取box1对象var box1 = document.getElementById('box1');// 创建一个变量,记录拖拽的状态//var isDrag = false; // 默认拖拽没有开始var left, top;// 创建一个变量,记录被拖拽的对象var dragEle = null;//为box1绑定鼠标按下的事件document.addEventListener('mousedown',function (ev) {// alert(ev.button);// button用来表示鼠标的按钮 0表示左键 1表示滚轮按下 2表示右键// 判断元素是否是拖拽元素if(ev.target.classLisr.contains('drag') === 'drag' && ev.button === 0){// 开始拖拽 将isDrag设置为true// isDrag = true;// 将ev.target 赋值给dragEledragEle = ev.target;// 取消默认行为ev.preventDefault();// 获取鼠标和元素的距离left = ev.offsetX;top = ev.offsetY;}}, false);// 开始拖拽 , 为document绑定一个鼠标移动的事件document.addEventListener('mousemove',function (ev) {if(dragEle){dragEle.style.left = ev.clientX - left +'px';dragEle.style.top = ev.clientY - top + 'px';}}, false);//设置onmouseup来停止拖拽document.addEventListener('mouseup', function (ev) {// 将 isDrag 设置为false,停止拖拽// isDrag = false;dragEle = null;});};</script></head><body><div id="box1" class=""></div><div id="box2" class="drag"></div><div id="box3" class="drag"></div><div id="box4" class="drag"></div><img src="an.jpg" class="drag"></body></html>

4.js读取元素的class属性:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.box1{width: 100px;height: 100px;background-color: #bfa;}.hello{width: 200px;height: 200px;background-color: #ff0;}</style><script>window.onload = function () {var box1 = document.querySelector('.box1');// 使用className获取的元素的class值,就是原本的class值// 例如:box1.className 是这样的 box1 box2 box3 box4// classList 是一个类数组对象,在它里边将元素的每一个class属性都设置为了数组中的一个元素/*自己实现一组类相关的方法,要求兼容IE8以上的浏览器classList只支持IE10以上的浏览器contains() 用来检查classList是否含有某个类,如果有返回true,没有返回falseadd() 用来向元素中添加一个或多个classremove() 移除元素中的一个或多个classreplace() 使用一个新的class替换元素中的classtoggle() 切换元素中的指定class,如果有则删除,如果没有则添加*/var btn01 = document.getElementById('btn01');btn01.addEventListener('click',function () {// alert(box1.classList.contains('hello'));// box1.classList.add('hello');// box1.classList.remove('box1');// box1.classList.replace('box1', 'hello');box1.classList.toggle('hello');},false)};</script></head><body><button id="btn01">点我一下</button><div class="box1 box2 box3 box4"></div></body></html>

5鼠标右键的事件contextmenu:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>鼠标事件</title><style>*{margin: 0;padding: 0;}.menu{width: 200px;position: absolute;background-color: #bfa;list-style: none;display: none;}.menu li:hover{background-color: #ff0;}</style><script>//contextmenu 表示右键菜单的事件document.addEventListener("contextmenu",function (ev) {// 如果取消了contextmenu的默认行为,将会导致右键菜单不会出现ev.preventDefault();// 将菜单显示出来var menu = document.querySelector('.menu');menu.style.display = 'block';menu.style.left = ev.clientX + 'px';menu.style.top = ev.clientY + 'px';},false);document.addEventListener('click',function () {var menu = document.querySelector('.menu');menu.style.display = 'none';},false)</script></head><body><ul class="menu"><li>菜单一</li><li>菜单二</li><li>菜单三</li><li>菜单四</li><li>菜单五</li><li>菜单六</li><li>菜单七</li></ul></body></html>

6鼠标滚轮的事件wheel:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#box1{width: 100px;height: 100px;background-color: #f00;}</style><script>window.onload = function () {/*box1可以根据鼠标滚轮滚动的方向变长或变短*/// 获取box1var box1 = document.getElementById('box1');box1.addEventListener('wheel',function (ev) {// alert(ev);//wheel 事件会在鼠标滚轮滚动的时候触发// deltaX 获取鼠标滚轮横向滚动方向// 向左拨-3 向右拨3// 左-100 右100(Chrome)// deltaY 获取鼠标滚轮纵向滚动方向// 上-3 下3// 上-100 下100// 如果滚轮向下滚,box1变长if(ev.deltaY > 0){box1.style.height = box1.clientHeight + 10 + 'px';}else{// 如果滚轮向上滚,box1变短box1.style.height = box1.clientHeight - 10 + 'px';}},false)};</script></head><body><div id="box1"></div></body></html>

7 class属性更改替换(兼容IE8):

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.box1{width: 100px;height: 100px;background-color: #bfa;margin-top: 50px;}.yellow{width: 200px;height: 200px;background-color: #ff0;}</style><script>window.onload = function () {var btn = document.getElementById('btn');var box1 = document.querySelector('.box1');btn.addEventListener('click',function () {replaceClass(box1, 'yellowgreen', 'yellow');// alert(hasClass(box1,'box1'));// toggleClass(box1, 'yellow');// addClass(box1, 'yellow');// 修改box1的样式// box1.style.width = '300px';// box1.style.height = '300px';// box1.style.backgroundColor = 'yellowgreen';// 检查className中是否含有yellow,然后在添加// var re = new RegExp("\\byellow\\b")// if(!re.test(box1.className)){// // 将box1的class属性修改为yellow// box1.className += ' '+'yellow';// }// /\byellow\b/// var reg = /\byellow\b/;// 使用构造函数创建一个正则// reg = new RegExp("\\byellow\\b"); // /\byellow\b/// alert(reg);},false)};//定义一个函数,用来为任意的元素添加class// ele 表示要添加样式的元素// className 表示要添加的classfunction addClass(ele, className) {if(!hasClass(ele,className)){// 将box1的class属性修改为yellowele.className += ' '+className;}}// 定义一个函数用来检查类中是否含有某个classfunction hasClass(ele, className) {var re = new RegExp("\\b"+className+"\\b");return re.test(ele.className);}// 删除元素的指定类function removeClass(ele, className) {// 根据className创建一个正则表达式var re = new RegExp('\\s*\\b'+className+'\\b');// 将ele.className中符合正则表达式的内容,替换为空串ele.className = ele.className.replace(re, '');}// 切换class,如果元素中具有该class则删除,如果没有则添加function toggleClass(ele, className) {// 检查元素中是否含有该classif(hasClass(ele, className)){removeClass(ele, className);}else{addClass(ele, className);}}// 替换元素class属性function replaceClass(ele, oldCls, newCls) {// 根据oldCls创建一个正则表达式var re = new RegExp('\\b'+oldCls+'\\b');// 将ele.className中符合re的内容替换为newClsele.className = ele.className.replace(re, newCls);}</script></head><body><button id="btn">点我一下</button><div class="box1 yellowgreen"></div></body></html>

欢迎关注我的原创文章:小伙伴们!我是一名热衷于前端开发的作者,致力于分享我的知识和经验,帮助其他学习前端的小伙伴们。在我的文章中,你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师,还是仅仅对前端开发感兴趣,我的文章将能为你提供宝贵的指导和知识。

在我的文章中,你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

此外,我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展,新的框架和工具层出不穷。通过我的文章,你将会了解到最新的前端技术趋势,并了解如何应对这些变化。

我深知学习前端不易,因此我将尽力以简洁明了的方式解释复杂的概念,并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发,并提升你的技能。

如果你想了解更多关于前端开发的内容,不妨关注我的原创文章。我会不定期更新,为你带来最新的前端技术和知识。感谢你的关注和支持,我们一起探讨交流技术共同进步,期待与你一同探索前端开发的奇妙世界!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/749294.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaSE-----认识异常【详解】

目录 一.异常的概念与体系结构&#xff1a; 1.1异常的概念&#xff1a; 1.2一些常见的异常&#xff1a; 1.3异常的体系结构&#xff1a; 1.4异常的分类&#xff1a; 二.异常的处理机制&#xff1a; 2.1 抛出异常&#xff1a; 2.2异常的捕获&#xff1a; 2.3try-catch-&…

jQuery中的事件

jQuery中的事件 jQuery事件是对JavaScript事件的封装&#xff0c;常用事件分类如下&#xff1a; 基础事件&#xff1a;window事件 鼠标事件 键盘事件 表单事件 复合事件(多个事件的组合)&#xff1a;鼠标光标悬停 鼠标连续点击 1、鼠标事件 鼠标事件是当用户在文档上移…

3月16日ACwing每日一题

562. 壁画 - AcWing题库 #include <bits/stdc.h> using namespace std; const int N 5e6 6; //可以枚举每一种情况 因为都是相连的所以肯定是前缀和 int main() {int t;cin >> t;for (int i 1; i < t; i) {char s[N];int n;cin >> n;int a[N]; // 修改…

某赛通电子文档安全管理系统 DecryptApplication 任意文件读取漏洞复现

0x01 产品简介 某赛通电子文档安全管理系统(简称:CDG)是一款电子文档安全加密软件,该系统利用驱动层透明加密技术,通过对电子文档的加密保护,防止内部员工泄密和外部人员非法窃取企业核心重要数据资产,对电子文档进行全生命周期防护,系统具有透明加密、主动加密、智能…

从零开始学习编程:迈出你的编程之路

标题 《从零开始学习编程&#xff1a;迈出你的编程之路》摘要引言如何开始学习编程&#xff1f;1. **明确学习目标**2. **选择编程语言**3. **学习资源**4. **练习编程**5. **参与社区**6. **持之以恒**7. **探索更多** 总结参考资料 博主 默语带您 Go to New World. ✍ 个人主…

阅读 - 二维码扫码登录原理

在日常生活中&#xff0c;二维码出现在很多场景&#xff0c;比如超市支付、系统登录、应用下载等等。了解二维码的原理&#xff0c;可以为技术人员在技术选型时提供新的思路。对于非技术人员呢&#xff0c;除了解惑&#xff0c;还可以引导他更好地辨别生活中遇到的各种二维码&a…

Ubuntu 14.04:PaddleOCR基于PaddleHub Serving的服务部署(失败)

目录 一、为什么使用一键服务部署 二、安装 paddlehub 1.8 2.1 安装前的环境准备 2.2 安装paddlehub 1.8 2.2.1 安装paddlehub 2.2.2 检测安装是否成功 2.2.3 检查本地与远端PaddleHub-Server的连接状态 2.2.4 测试使用 2.3 其他 2.3.1 如何卸载、pip常用命令、常见…

如何保存缓存和MySQL的双写一致呢?

如何保存缓存和MySQL的双写一致呢&#xff1f; 所谓的双写一致指的是&#xff0c;在同时使用缓存(如Redis)和数据库(如MySQL)的场景下,确保数据在缓存和数据库中的更新操作保持一致。当对数据进行修改的时候&#xff0c;无论是先修改缓存还是先修改数据库&#xff0c;最终都要保…

transformer注意力权重系数绘图

参考绘制tsne图&#xff0c;首先将模型中的注意力权重导出&#xff0c;因为我的模型中L2&#xff0c;所以导出两层 # plot_weight weight_model_layer0 Model(inputsmodel.inputs, outputsmodel.get_layer(transformer_0).output) weight_output_layer0 weight_model_layer0…

C语言内存函数详解

文章目录 前言一、memcpy函数&#xff08;内存拷贝函数&#xff09;二、memmove重叠拷贝函数三.memset内存设置函数四.memcmp内存比较函数总结 前言 我们之前按学习了C语言标准库中提供了一系列的字符和字符串库函数&#xff0c;接下来我们就学习一下关于内存相关的一些函数。…

第十四届蓝桥杯 三国游戏

一开始的思路就是想着暴力&#xff0c;但是呢&#xff0c;如果真的用暴力一个一个列的话&#xff0c;连30%的数据都搞定不了&#xff0c;所以这里需要考虑别的办法。 这道题的思路就是贪心。 我们这样想&#xff1a;既然要满足至少一个国X>YZ&#xff0c;那么我们何不变成…

超实用绿色办公软件介绍

自制的绿色软件办公秘书软件&#xff0c;集成了自动任务、文件工具、PDF工具、OCR图文识别、文字处理、电子表格六大类30多项实用功能&#xff0c; 开发目的是解决常见办公痛点&#xff0c;把机械的操作还给机器&#xff0c;实现轻松、高效办公。 功能介绍如下&#xff1a; 一…

EndeavourOs(arch系)安装sunpinyin输入法(ibus) + 迅雷(xunlei-bin)

输入法 yay -S ibus yay -S ibus-libpinyin yay -S ibus-sunpinyin yay -Q ibus ibus-libpinyin ibus-sunpinyin #验证 # 注销然后打开ibus config... # 在Input Method 添加Chinese->SunPinYin # 使用Ctrl Space, 默认Super Space, 请自行修改 # 再次注销&#xff0c;开…

Linux环境下Minio的安装部署与启动教程(完整版)

1、概述 MinIO是一个开源、分布式的对象存储系统&#xff0c;专为云原生环境设计。它提供了一个基于标准的Amazon S3兼容接口&#xff0c;使得开发者可以使用熟悉的API在私有云或边缘环境中部署和管理大规模非结构化数据&#xff0c;如图片、视频、日志文件等。 MinIO的核心特…

安卓UI面试题 41-45

41. View.inflate和LayoutInflater.inflate的区别? 实际上没有区别,View.inflate实际上是对LayoutInflater.inflate做了一层包装, 在功能上,LayoutInflate功能更加强大。View.inflate实际上最终调用的还是LayoutInflater.inflate (@LayoutRes int resource, @nullable Vie…

ChatGLM:基于ChatGLM-6B使用ptuning进行微调,实现类instruction的效果

由于业务需要&#xff0c;调研下怎么训练一个虚拟角色出来&#xff0c;所以找了一些文档参考&#xff0c;其中有一个基于ChatGLM-6B使用ptuning进行微调&#xff0c;实现类instruction的效果的现成的项目&#xff0c;给大家分享下。 一、介绍 由于ChatGLM-6B 不支持instructio…

2、计划任务不显示UI的问题

计划任务不显示UI的问题 1、原因&#xff1a; 在windows7以上系统&#xff0c;使用system权限启动的进程默认是没有ui界面&#xff0c;这是windows系统出于安全考虑的限制。防止用户在高权限下误删重要的文件。 2、解决方案&#xff1a; 1、降权 解决的办法&#xff1a;降…

Linux内核--基本概念/基本结构和组件

提示&#xff1a;本系列文章重点学习Linux内核 Linux内核--基本概念/基本结构和组件 简介一、基础概念1.六项工作内容2.根文件系统&#xff08;Root File System&#xff09;&#xff1a;3.交叉编译&#xff08;Cross-Compilation&#xff09;&#xff1a;4.设备树&#xff08;…

【矩阵】240. 搜索二维矩阵 II【中等】

搜索二维矩阵 II 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a;每行的元素从左到右升序排列。每列的元素从上到下升序排列。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,4,7,11,15],[2,5,8,12,19],[3,6,9,16,22…

居民健康监测小程序|基于微信小程序的居民健康监测小程序设计与实现(源码+数据库+文档)

居民健康监测小程序目录 目录 基于微信小程序的居民健康监测小程序设计与实现 一、前言 二、系统设计 三、系统功能设计 1、用户信息管理 2、健康科普管理 5.3公告类型管理 3、论坛信息管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推…