下面是一些对事件处理进行设定的方式。

  • 指定为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事件处理程序/事件监听器的设定的简单介绍的更多相关文章

  1. IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

    IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...

  2. js 事件处理程序 事件对象

    事件:用户或浏览器自身执行的动作: 事件处理程序:响应某个事件的函数: 事件流:从页面中接收事件的顺序. 1.DOM事件流 "DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段 ...

  3. js事件流、事件处理程序/事件侦听器

    1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 ...

  4. DOM事件处理程序-事件对象-键盘事件

    事件流: 事件流--描述的是从页面中接受事件的顺序 IE  ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...

  5. JavaScript 事件之event.preventDefault()与event.stopPropagation()简单介绍

    event.preventDefault()用法介绍: 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作). 例如,如果 type 属性是 “submit”,在事件传播的任 ...

  6. javaScript事件(二)事件处理程序

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...

  7. 浅谈JavaScript的事件(事件处理程序)

    事件就是用户或者浏览器自身执行的某种动作.诸如click.load和mouseover,都是事件的名字.而响应某个事件的函数就叫事件处理程序.事件处理程序的名字以"on"开头,比如 ...

  8. Javascript高级编程学习笔记(58)—— 事件(2)事件处理程序

    事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...

  9. 【初窥javascript奥秘之事件机制】论“点透”与“鬼点击”

    前言 最近好好的研究了一番移动设备的点击响应速度,期间不断的被自己坑,最后搞得焦头烂额,就是现在可能还有一些问题,但是过程中感觉自己成长不少, 最后居然感觉对javascript事件机制有了更好的认识 ...

随机推荐

  1. 洛谷-P3805-Manacher模板

    链接: https://www.luogu.org/problem/P3805 题意: 给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度. 字符串长度为n 思路: ...

  2. Acwing-196-质数距离(素数区间筛法)

    链接: https://www.acwing.com/problem/content/198/ 题意: 给定两个整数L和U,你需要在闭区间[L,U]内找到距离最接近的两个相邻质数C1和C2(即C2-C ...

  3. apache nginx 配置

    <VirtualHost *:80> ServerAdmin test@biuuu.com DocumentRoot E:\web\OTHER\test ServerName zjh.co ...

  4. poj 3050 Hopscotch DFS+暴力搜索+set容器

    Hopscotch Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2774 Accepted: 1940 Description ...

  5. 包管理神器-pipenv

    一:前言 介绍一个包管理神器-pipenv,这个工具可以让我们在写代码.创建Python运行环境.package依赖关系以及项目合作的时候更有效率. 在pycon2018上,Kenneth Reitz ...

  6. [笔记]nginx配置反向代理和负载均衡

    1.nginx配置文件:源码安装情况下,nginx.conf在解压后的安装包内.yum安装,一般情况下,一部分在/etc/nginx/nginx.conf中,一部分在/etc/nginx/conf.d ...

  7. Git与Repo 的使用

    一.Linux常用命令 pwd           用于显示工作目录,执行pwd指令可立刻得知您目前所在的工作目录的绝对路径名称. chmod      用来变更文件或目录的权限. >      ...

  8. JETSON TK1 ~ 安装Cuda和OpenCV3

    一:安装Cuda6.5 1:下载安装包 Cuda6.5 2.在TK1上安装软件包: cd ~/Downloads sudo dpkg -i cuda-repo-l4t-r21.3-6-5-prod_6 ...

  9. JS 浏览器地址栏传递参数,参数加密/解密(编码/解码)

    我们有时候在JS里进行页面跳转,并且传递了参数(AppName),如下: window.location = "../../views/form/edit.html?AppName=新增&q ...

  10. C++入门经典-例8.3-子类显示调用父类构造函数

    1:当父类含有带参数的构造函数时,创建子类的时候会调用它吗?答案是通过显示方式才可以调用. 无论创建子类对象时调用的是那种子类构造函数,都会自动调用父类默认构造函数.若想使用父类带参数的构造函数,则需 ...