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 句柄的添加和移除的更多相关文章

  1. DOM操作——JavaScript怎样添加、移除、移动、复制、创建和查找节点

    (1). 创建新节点 createDocumentFragment() // 创建一个DOM片段 createElement() // 创建一个具体的元素 createTextNode() // 创建 ...

  2. DOM - EventListener 句柄操作

          <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  3. JavaScript HTML DOM EventListener

    JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById(& ...

  4. 给DOM生成的元素添加事件

    问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...

  5. DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。

    DOM操作 --如何添加.移除.移动.复制.创建和查找节点等. (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个 ...

  6. JS基础速成(三)- DOM(文件对象模型)

    .t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.DOM树的基本结构 DOM节点分为三大类:元素节点(标签节点),属性节 ...

  7. JavaScript(三、DOM文档对象模型)

    一.什么是DOM DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: &q ...

  8. 将HTML字符转换为DOM节点并动态添加到文档中

    将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 ...

  9. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

随机推荐

  1. js获取节点的DOM操作

    一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了. HTML DOM类型 Node类型 Javascript中的所有节点类型都继承自Nod ...

  2. 去除DEDECMS后台预览文章URL地址多余的数字信息

    在使用织梦模板时发现这样一个问题:在后台预览文章的时候,出现的文章网址尽管是静态URL,但是会在网址的尾部出现问号并跟随一个时间戳,在复制URL时就显得很不方便.那么如何解决这一问题呢? 经过查找资料 ...

  3. php判断 !==false

    测试 if($res !== false){ echo "未定义通过<br>"; }else{ echo "未定义不通过<br>"; } ...

  4. 43. studio上的json串解析

    var doc = O_PARAMETER.FJSonStr;(doc为:{"items":[],"nextId":0}) //1.先转为json对象,主要有以 ...

  5. error C2259: 'CException' : cannot instantiate abstract class

    vc6.0编译通过,VS2008则报错 解决方法: 把CException改为CUserException

  6. AX2009按照批次生产日期预留

    AX2009如果想按照批处理号预留,它默认是按照InventBatchId排序的,但并不是InventBatchd小的批次的生产日期就早,所以这个逻辑得改一下,让它按照InventBatch的Prod ...

  7. nodejs 下载,安装,测试(windows环境下)

    1.下载 nodejs英文官网:http://nodejs.org/ nodejs中文官网:http://nodejs.cn/ 两个都可以下载,用户可以根据自己的网络来选择用哪个下载. 进入官网之后版 ...

  8. Docker常用操作

    启动容器并安装package docker run xxx apt-get -y xxx 其中-y要加上避免无法交互 批量删除容器 docker ps -a | awk '{print $1}' |x ...

  9. oracle全文检索

    全文检索 oracle对使用几十万以上的数据进行like模糊查询速度极差,包括 like 'AAA%' ,like '%AAA',like '%AAA%',like '%A%A%'的那些模糊查询.网上 ...

  10. Mac OS 配置PHP + mysql 环境

    PHP:使用mac自带的环境.需要在配置文件中打开php模块. IDE使用的是phpstrom,JetBrain公司的神器. Mysql: 使用的是官网 Server version: 5.7.17. ...