当前位置:网站首页>DOM操作-事件的绑定与解绑
DOM操作-事件的绑定与解绑
2022-07-31 05:18:00 【春意迟迟、】
首先要明确什么是事件?
元素在某种状态(浏览器实现的也叫事件触发)达成时,要执行的提前设定好的程序 我们称之为事件句柄。(比如:鼠标点击、键盘按键、鼠标轴滚动、鼠标拖拽等)。
事件的三要素:
事件源、事件类型(不同状态不同类型,如点击、鼠标滚动、按键) 、事件处理程序(handler)
事件的绑定:
事件绑定的方式:
1.行内式:绑定的全局的函数、方法等。可以绑定多个函数/handler
2.属性绑定:获取对象,再添加属性(如:box.onclick)。只能绑一个handler/函数,如果想要绑定多个函数,就在绑定的函数里面去调用两个函数
复习:添加属性的两种方式:
(1)例如:box["name"]=xx 就算原型上有这个属性,也会添加
(2)例如:box.name=xx ....不会重复添加
3.给元素添加一个事件监听器(尽量使用这一种方式),可以绑定多个函数,可以重复绑定相同的函数。
语法:addEventListener(事件类型,执行程序,布尔值(有默认值))
以下代码都是用这个页面结构:
<body> <div class="box" onclick="console.log('行内式')"> <span class="text">是否购买这件商品</span> <!-- 直接写myconsole.mylog() 也可以 --> <div class="son" id="son1" onclick="myconsole.mylog(),fn()"> 是 </div> <div class="son" id="son2" onclick="fn()">否</div> </div> <div class="test"> <div class="test1">11111</div> <div class="test2">22222</div> <div class="test3">33333</div> </div> </body>
根据这个演示效果:
行内式绑定方法: 在标签里面绑定事件
<div class="box" onclick="console.log('行内式')"> <span class="text">是否购买这件商品</span> <!-- 直接写myconsole.mylog() 也可以 --> <div class="son" id="son1" onclick="myconsole.mylog(),fn()"> 是 </div> <div class="son" id="son2" onclick="fn()">否</div> </div>
<script> //window.myconsole.mylog() var myconsole = { mylog() { console.log("自己写的") } } //window.fn function fn(){ console.log("自己写的222") } </script>
注意:
1. 事件="javaScript: 自定义内容":一般的标准的写法 前面写触发的事件,后面写事件的处理程序。
2.如果内容是函数:事件="函数":简写形式
3.行内式事件里可以有多个函数:如:οnclick="javaScript:myconsole.mylog(),fn()"。函数与函数之间用逗号隔开。(也不一定是函数,可以是打印或者其他执行程序)。
4.行内式绑定方式可以绑定多个事件:但每个事件只能绑定一次。如:可以在行内绑定一个点击事件和一个滚动事件
属性绑定方式: 获取对象,再添加属性
<script> // 属性绑定 var sure = document.querySelector("#son1") //点击事件:当我点击“是” 控制台返回文字 sure.onclick = function () { console.log("您已购买此商品!") } //.语法:不会重复添加 sure.onclick = function () { console.log("您已购买此商品!") } </script>
结果:
分析:当我点击“是”,控制台给我执行事件处理程序,就返回了“您已购买此商品这句话”。虽然我写了两个一样的事件处理程序,但只执行了一个,说明:属性绑定方式不能重复绑定相同的事件处理程序。可以绑定不同类型的事件。综上,属性绑定方式同一种类型的事件只能绑定一次,可以绑定不同类型的事件。
给元素添加一个事件监听器(尽量使用这一种方式): 可以绑定相同的函数
addEventListener(事件类型,执行程序,布尔值(有默认值))
<script> //给元素添加一个事件监听器 var unsure=document.querySelector("#son2") //"click":监听用户的点击事件;前面有on 一般为属性,没有为事件 unsure.addEventListener("click",function fm(){ console.log("您已取消购买!") }) </script>
结果:
分析:当我点击“否”,就会执行事件处理程序。
<script> var test1=document.querySelector(".test1") test1.addEventListener("click",function relog(){ console.log("第一次打印") }) test1.addEventListener("click",function relog(){ console.log("第二次打印") }) </script>
分析:绑定监听器的方式可以重复绑定相同类型的事件,而不会覆盖。
可以对addEventListener()、attchEvent()做一个兼容:但是现在的IE没有了attchEvent这个功能了,所以运行它会报错
test1.attchEvent("click",function relog(){ console.log("第三次打印") }) //因为IE没有这个功能了,运行会报错。 //attchEvent()只有两个参数,没有最后的那个捕获和冒泡 //对attchEvent()和addEventListener()做一个兼容 //如果前者为真就运行前面的那个,后面就不会运行,否则就运行第二个 test1.adde=test1.addEventListener||test1.attchEvent test1.adde("click",function relog(){ console.log("第三次打印") })
事件解绑:
<script> //属性绑定方式和行内绑定方式的解绑 //但是行内式解绑是直接置空,一般是 void 0 那种 var test2=document.querySelector(".test2") test2.onclick=function unbind(){ test2.onclick=null console.log("解绑test") } //监听器的解绑 var test3=document.querySelector(".test3") test3.addEventListener("click",function unbind2(){ console.log("监听器解绑test1") }) function unbind3(){ console.log("监听器解绑test2") } test3.addEventListener("click",unbind3) //removeEventListener(type:事件类型,需要移除的函数) test3.removeEventListener("click",unbind3) </script>
属性绑定方式的解绑和行内式绑定方式的解绑是将属性的值置空或是返回void 0。
监听器绑定方式的解绑是调用removeEventListener函数,removeEventListener()的两个参数是:事件类型、需要解绑的函数。
边栏推荐
- 哈希表基础
- Fluorescein-PEG-DSPE Phospholipid-Polyethylene Glycol-Fluorescein Fluorescent Phospholipid PEG Derivatives
- C语言静态变量static
- DSPE-PEG-COOH CAS:1403744-37-5 磷脂-聚乙二醇-羧基脂质PEG共轭物
- 十分钟教你玩转分支语句!!!!!小白速进,新手福利!!
- 学习JDBC之获取数据库连接的方式
- VS2019配置配置项目属性自定义输出目录与中间目录
- 【Rhapsody学习笔记】4:Relations
- Tensorflow related list
- Unity软件中UGUI和NGUI的多语言开发
猜你喜欢
DSPE-PEG-Azide DSPE-PED-N3 磷脂-聚乙二醇-叠氮脂质PFG
Cholesterol-PEG-Amine CLS-PEG-NH2 Cholesterol-Polyethylene Glycol-Amino Research Use
【Latex】TexLive+VScode+SumatraPDF 配置LaTex编辑环境
Pytorch study notes 10 - detailed explanation of convolutional neural network and application of multi-classification task of mnist dataset
DSPE-PEG-Biotin, CAS: 385437-57-0, phospholipid-polyethylene glycol-biotin prolongs circulating half-life
力扣151. 颠倒字符串中的单词
堆和栈的区别
IDEA overview and installation and debugging
Getting Started with MySQL: The Case Statement Works Well
变更管理与 DevOps —— 二者同时进行吗?
随机推荐
虚拟机查看端口号进程
力扣.三数之和/四数之和
Introduction to CLS-PEG-FITC Fluorescein-PEG-CLS Cholesterol-PEG-Fluorescein
【Latex】TexLive+VScode+SumatraPDF 配置LaTex编辑环境
The solution to the IDEA console not being able to enter information
【Rhapsody学习笔记】1:Hello World
Where can I find the private files set by myself?
超详细!!!让你通透数组!!!初学复习不迷路!!
ImportError: cannot import name 'Xxxx' from partially initialized module 'xx.xx.xx'
四种常见的POST提交数据方式
Fluorescein-PEG-DSPE Phospholipid-Polyethylene Glycol-Fluorescein Fluorescent Phospholipid PEG Derivatives
Log jar package conflict, and its solution
DSPE-PEG-Azide DSPE-PED-N3 磷脂-聚乙二醇-叠氮脂质PFG
DSPE-PEG-Thiol DSPE-PEG-SH 磷脂-聚乙二醇-巯基脂质体制备用
自己设置的私密文件,在哪找
Evaluating Machine Learning Models - Excerpt
Hyperparameter Optimization - Excerpt
CAS: 1403744-37-5 DSPE-PEG-FA Phospholipid-Polyethylene Glycol-Folic Acid for Scientific Research
Qt TreeView 问题记录
IDEA概述和安装及调试