对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事件机制有了更好的认识 ...
随机推荐
- pycharm pro版server激活
从网上搜集了一些 License server 地址(有钱的一定要支持正版哦) http://idea.iteblog.com/key.php http://intellij.mandroid.cn ...
- Linux/Ubantu 安装 idea
wget 使用 wget url (这里的url就是你要下载idea的网站) 在idea官网中 找到 direct link 右键复制链接 在 linux 中 打开 终端命令窗口 (Ctrl +Alt ...
- Python模拟浏览器前进后退操作
# 模拟浏览器前进后退操作 # 代码中引入selenium版本为:3.4.3 # 通过Chrom浏览器访问发起请求 # Chrom版本:59 ,chromdriver:2.3 # 需要对应版本的Chr ...
- BZOJ 4278: [ONTAK2015]Tasowanie (后缀数组 / 二分+hash)
直接归并,然后如果哪边的后缀字典序比较小就去哪边,然后就可以后缀数组 博客传送门- 但是本蒟蒻不会后缀数组 Upd:Upd:Upd:现在会了233.一道差不多的题:BZOJ 1692: [Usaco2 ...
- Acwing-201-可见的点(数学, 欧拉函数)
链接: https://www.acwing.com/problem/content/description/203/ 题意: 在一个平面直角坐标系的第一象限内,如果一个点(x,y)与原点(0,0)的 ...
- java批量下载
最近做了一些有关批量压缩下载的功能,网上也找了一些资源,但都不是太全面,所以自己整理一份,已备不时之需. 直接上代码: // 获取项目路径 private static String WEBC ...
- 关于博主&&联系博主
关于我自己 天朝一名普通理科男高中生,现正读高二. 一位正在求学之路上奋斗的蒟蒻.很爱听歌,欧美为主,霉霉死粉.交际方面比较弱. 常用编辑器为DEV-C++,编译器为gcc,常用OJ是洛谷 基本熟练使 ...
- 20190716NOIP模拟赛T1 礼物（概率dp+状压）
题目描述 夏川的生日就要到了.作为夏川形式上的男朋友,季堂打算给夏川买一些生 日礼物. 商店里一共有种礼物.夏川每得到一种礼物,就会获得相应喜悦值Wi(每种 礼物的喜悦值不能重复获得). 每次,店员会 ...
- Jmeter（十二）常用插件
一.下载及安装 下载地址:https://jmeter-plugins.org/install/Install/ 下载后文件为一个jar包,将其放入jmeter安装目录下的lib/ext目录,然后重启 ...
- ERROR 1130 (HY000): Host 'test177' is not allowed to connect to this MySQL server
异常 在测试环境新搭建的MySQL服务端,启动后登陆MySQL如下异常: [root@test177 ~]# mysql -u root -po2jSLWw0ni -h test177 mysql: ...