对JavaScript事件处理程序/事件监听器的设定的简单介绍
下面是一些对事件处理进行设定的方式。
- 指定为HTML元素的属性（事件处理程序）
- 指定为DOM元素的属性（事件处理程序）
- 通过EventTarget.addEventListener()进行指定（事件监听器）
接下来，将会对各种方式进行简单说明。
一、指定为HTML元素的属性
将事件处理程序指定为HTML元素的属性是一种最为简单的设定事件处理程序的方式。
<a id="test" href="https://www.baidu.com" onclick="alert('bar');alert('baz')">百度一下</a>
如果包含多个事件处理程序则用分号分隔。当然，事先另外定义一个函数之后再执行该函数的方式也不会有问题。
<body id="bo">
<a id="test" href="https://www.baidu.com" onclick="f()">百度一下</a>
<script>
function f() {
window.alert("page transfer");
return true;
}
</script>
如果事件处理程序返回了一个false值，则会取消该事件的默认行为。在下面的例子中，事件指的是超链接的跳转事件。
<body id="bo">
<a id="test" href="https://www.baidu.com" onclick="return f()">百度一下</a> <!--onclick="return f()" 将onclick视为函数-->
<script>
function f() {
window.alert("page transfer");
return false;
}
</script>
二、指定为DOM元素的属性
如果一个页面分别使用了HTML文件和JavaScript文件，则应该尽可能少地在HTML文件中使用JavaScript代码，以提高维护性。因此，最好将事件处理程序的设定全都写在JavaScript内。
事件处理程序可以被指定为节点的属性。
<body id="bo">
<a id="test" href="https://www.baidu.com">百度一下</a>
<script>
var doit = document.getElementById('test');
function f() {
window.alert('stop page transfer');
return false; /*同理，返回false超链接将不会实现跳转*/
}
doit.onclick = f;
</script>
注意事件处理程序的设定，像以下前两种方式都是错误的。
doit.onclick = f(); //得到的是函数的返回值
doit.onclick = "f()"; //单纯的字符串赋值
doit.onclick = f; //正确，得到的是函数的引用
如果将一个已指定为HTML属性中的事件处理程序指定为DOM元素的属性，则会覆盖HTML便签属性中的内容。实现这一多“指定”功能需要使用事件监听器。
三、通过EventTarget.addEventListener()进行指定
如果只能够指定1种处理操作的话，就很难处理复杂的行为。为了弥补这一缺点，在DOM Level2中定义了EventTarget.addEventListener()方法。
<body id="bo">
<a id="test" href="https://www.baidu.com">百度一下</a>
<script>
var doit = document.getElementById('test');
function f() {
window.alert('stop page transfer');
return true;
}
function a(){
window.alert('HelloWorld');
return true;
}
doit.addEventListener('click',f,false); /*第一个参数为注册事件，第二个参数为注册事件处理函数，第三个参数不做介绍*/
doit.addEventListener('click',a,false); /*注册多个监听器*/
</script>
对JavaScript事件处理程序/事件监听器的设定的简单介绍的更多相关文章
- IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素
IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...
- js 事件处理程序 事件对象
事件:用户或浏览器自身执行的动作: 事件处理程序:响应某个事件的函数: 事件流:从页面中接收事件的顺序. 1.DOM事件流 "DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段 ...
- js事件流、事件处理程序/事件侦听器
1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 ...
- DOM事件处理程序-事件对象-键盘事件
事件流: 事件流--描述的是从页面中接受事件的顺序 IE ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...
- JavaScript 事件之event.preventDefault()与event.stopPropagation()简单介绍
event.preventDefault()用法介绍: 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作). 例如,如果 type 属性是 “submit”,在事件传播的任 ...
- javaScript事件（二）事件处理程序
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
- 浅谈JavaScript的事件（事件处理程序）
事件就是用户或者浏览器自身执行的某种动作.诸如click.load和mouseover,都是事件的名字.而响应某个事件的函数就叫事件处理程序.事件处理程序的名字以"on"开头,比如 ...
- Javascript高级编程学习笔记（58）—— 事件（2）事件处理程序
事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...
- 【初窥javascript奥秘之事件机制】论“点透”与“鬼点击”
前言 最近好好的研究了一番移动设备的点击响应速度,期间不断的被自己坑,最后搞得焦头烂额,就是现在可能还有一些问题,但是过程中感觉自己成长不少, 最后居然感觉对javascript事件机制有了更好的认识 ...
随机推荐
- MySQL用户
创建用户 在对 MySQL 的日常管理和实际操作中,为了避免用户恶意冒名使用 root 账号控制数据库,通常需要创建一系列具备适当权限的账号,应该尽可能地不用或少用 root 账号登录系统,以此来确保 ...
- Subarray Sorting （线段树）
题意:给你两个长度为 n 的序列 a 和 b , 可以对 a 进行 操作: 选择一段区间[ l, r ] ,使得序列a 在这段区间里 按升序排序. 可以对a 进行任意多次操作,问 a是否有可能变成b序 ...
- Mockito 2 参数匹配器
Mockito 通过使用 equals() 这种自然的 Java 样式来校验参数值.有时候,当需要有其他一些灵活性的时候,你可能会要求使用参数匹配(argument matchers). 请参考下面的 ...
- shell编程-定时任务（备份数据库）
计划任务定时备份,删除等操作: #crontab -e #注意 会区分用户 默认在root用户登录用的是root权限用户的计划任务, 如果想在postgres备份 应使用postgres用户权限, 设 ...
- leetcode题目4.寻找两个有序数组的中位数（困难）
题目描述: 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 nums1 和 ...
- 移动端隐藏scroll滚动条::-webkit-scrollbar
::-webkit-scrollbar {/*隐藏滚轮*/ display: none; } CSS3自定义滚动条样式 -webkit-scrollbar 前言 webkit支持拥有overflow属 ...
- 【Java面试宝典】正则表达式
文章目录 正则表达式-语法 Pattern.compile方法 ● 请你谈谈Java中是如何支持正则表达式操作的? 考察点:正则表达式 参考回答: Java中的String类提供了支持正则表达式操作的 ...
- node版本如何升级
爬坑后的结论:window系统升级node只能到node官网下载window安装包来覆盖之前的node. 以下为我的爬坑之路: 今天安装了vue cli 3,使用命令时报: You are using ...
- 如何使用Heartbeat，组建一个高可用性的mysql集群
转了好多次帖子,其实就是为了使用heartbeat来搭建mysql集群,网上很多都是用make来生成RPM来安装,我也找了很多资料,mysql 自带的cluster用户不满意,只能再次vmware虚拟 ...
- springboot备忘
1.springboot中有ApplicationRunner类,如果项目中的启动类名称也是ApplicationRunner,单元测试时需要注意:import不要import到springboot的 ...