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

  • 指定为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. 用脚本来运行scrapy crawl ...

    启动爬虫的命令为: scrapy crawl spidername(爬虫名) 方案(一)name.py #!/usr/bin/env python # -*- coding:utf-8 -*- fro ...

  2. React组件(组件属性this.state和this.props,css样式修饰组件)

    目录: 1.创建组件的第一种方式 function2.将组件抽离为单独的jsx文件3.省略.jsx后缀, 配置webpack设置根目录4.创建组件的第二种方式--使用class关键字创建组件5.组件私 ...

  3. yii项目连接多个数据库时, MySQL报错No such file or directory

    服务器错误 yii\db\Exception SQLSTATE[HY000] [2002] No such file or directory ###'xxx是项目根目录' #0 xxx/vendor ...

  4. php文件夹上传

    php上传大文件配置 PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_t ...

  5. 交换机配置——单交换机划分VLAN配置

    一.实验目的:实现单交换机划分VLAN,使PC1主机和PC2主机不能通讯 二.拓扑图 三.实验步骤 最开始两台主机都输入的端口f0/1和f0/2都属于vlan 1 可以相互通讯(如下图) 现在需要让P ...

  6. FZU - 2103 Bin & Jing in wonderland

    FZU - 2103 Bin & Jing in wonderland 题目大意:有n个礼物,每次得到第i个礼物的概率是p[i],一个人一共得到了k个礼物,然后按编号排序后挑选出r个编号最大的 ...

  7. sh_16_字符串判断方法

    sh_16_字符串判断方法 # 1. 判断空白字符 space_str = " \t\n\r" print(space_str.isspace()) # 2. 判断字符串中是否只包 ...

  8. 协程系列之Event Loops

    Event Loops 事件循环 事件是由程序的一部分在特定条件下发出的消息,循环是在某种条件下完成并执行某个程序直到它完成的构造,因此,事件循环是一个循环,它允许用户订阅事件传输并注册处理程序/回调 ...

  9. 修复Long类型太长转为JSON格式的时候出错的问题

    这边项目要求ID是自动生成的20位Long型数字 但是实际中应用的时候回发生一种问题就是,查询的时候debug的时候数据都正常,但是返回前端的时候就会发现,数据错误了. 大体就是类似于下面的这种情况. ...

  10. jstack+jdb命令查看线程及死锁堆栈信息

    如果程序挂死,有时使用jstack查看进程中线程信息时,需要添加上-F参数,此时如果有死锁信息,则可能不会打印出死锁堆栈信息,使用jdb则可以查看当前死锁线程的运行堆栈. 如下模拟一个简单的死锁程序 ...