第三天:DOM EventListener 句柄的添加和移除
1.事件句柄的包含如下两个方法:
ps:使用句柄的好处是,修改方法的名称时,不需要改变多处
1.添加一个句柄,
2.添加多个句柄不会覆盖,运行结果:点击“按钮”,弹出框hello,确定后,自动弹出框world
3.句柄的移除:运行结果:点击按钮,只会弹出world对话框
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">按钮</button>
<script>
var x=document.getElementById("btn");
x.addEventListener("click",demo1); //添加句柄
x.addEventListener("click",demo2); //添加句柄
x.removeEventListener("click",demo1); //移除句柄
function demo1(){
alert("hello");
}
function demo2(){
alert("world");
}
</script>
</body>
</html> 问题:添加句柄函数括号内究竟该怎么写呢,看帮助看不出来
方式1:
x.addEventListener("click",demo2) 方式1demo2为方法名
方式2:
第三天:DOM EventListener 句柄的添加和移除的更多相关文章
- DOM操作——JavaScript怎样添加、移除、移动、复制、创建和查找节点
(1). 创建新节点 createDocumentFragment() // 创建一个DOM片段 createElement() // 创建一个具体的元素 createTextNode() // 创建 ...
- DOM - EventListener 句柄操作
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById(& ...
- 给DOM生成的元素添加事件
问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...
- DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
DOM操作 --如何添加.移除.移动.复制.创建和查找节点等. (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个 ...
- JS基础速成(三)- DOM(文件对象模型)
.t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.DOM树的基本结构 DOM节点分为三大类:元素节点(标签节点),属性节 ...
- JavaScript(三、DOM文档对象模型)
一.什么是DOM DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: &q ...
- 将HTML字符转换为DOM节点并动态添加到文档中
将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 ...
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
随机推荐
- DataSet读取XML
string file = File.ReadAllText("c://123.xml", Encoding.Default); using (DataSet ds = new D ...
- 基于boa服务器的web控制mini2440的GPIO口
win7 系统 虚拟机:ubuntu12.04 开发板:mini2440 上一篇已经详细的讲解了如何配置boa服务器,在这里我们就要利用boa服务器带来的便利,利用web控制开发板上的GIPO口,这 ...
- 通过微信分享链接,后面会被加上from=singlemessage&isappinstalled=1可能导致网页打不开
微信分享会根据分享的不同,为原始链接拼接如下参数: 朋友圈 from=timeline&isappinstalled=0 微信群 from=groupmessage&isapp ...
- 开发《基于Arcgis Online的家政管理服务信息系统》随笔1
1.在webservice中写的方法参数里面含有数组,如:public DataTable AdvSearch1(int ServiceArea, params string[] nas), 在发布之 ...
- java并发编程-读写锁
最近项目中需要用到读写锁 读写锁适用于读操作多,写操作少的场景,假设你的程序中涉及到对一些共享资源的读和写操作,且写操作没有读操作那么频繁.在没有写操作的时候,两个线程同时读一个资源没有任何问题,所以 ...
- arpg网页游戏之地图(三)
地图分块加载类MapEngine,主要包含以下属性: g 地图层graphics,地图将画在上面 buffPixelRange 地图加载范围矩形 viewPort 屏幕视窗 currZoneArr 已 ...
- easyui1.32 各种问题汇总
问题一 场景:tab切换,每个tab里用div放一个dataGrid,默认display:none隐藏,当display:'block'的时候,dataGrid会显示不全,仅显示一条线. 解决方法:切 ...
- CSS()方法设置元素样式
使用CSS()方法可以直接设置元素的样式,方法为:css(name,value) $(p).css("font-weight", "bold"); // ...
- udp通信的原理---makefile文件
由于UDP通信不需要事先建立连接,因此不需要TCP中的connect函数. 服务器端的步骤如下: 1. socket: 建立一个socket 2. bind: 将这个soc ...
- MCS-51系列特殊功能寄存器(摘抄)
1. P0 (80H) P0.7 P0.6 P0.5 P0.4 P0.3 P0.2 P0.1 P0.0 2.SP 栈指针(81H) 3.DPTR 数据指针(由DPH和DPL组成) DPL 数据指针低八 ...