JavaScript中的事件处理程序主要分为3种:

  • HTML事件处理程序:

    <script type="text/javascript">
// HTML事件处理程序
function showMessage(){
alert("clicked!");
};
</script> <button id="btn" onclick="showMessage()">click me!</button>
  • DOM0级事件处理程序:  

<button id="btn">click me!</button>

    <script type="text/javascript">
var btn = document.getElementById("btn"); // DOM0 级事件处理程序
btn.onclick = function(){
alert("clicked!");
};
</script>
  • DOM2级事件处理程序:

<button id="btn">click me!</button>

    <script type="text/javascript">
var btn = document.getElementById("btn"); // DOM2级事件处理程序, 第三个参数:false表示在冒泡阶段调用事件处理程序
btn.addEventListener("click", function(){
alert("clicked!");
}, false);
</script>

附上兼容性事件绑定函数:

function listenEvent(eventTarget, eventType, eventHandler){
if(eventTarget.addEventListener){
eventTarget.addEventListener(eventType, eventHandler, false);
}
else if(eventTarget.attachEvent){
eventType = 'on' + eventType;
eventTarget.attachEvent(eventType, eventHandler);
}
else{
eventTarget['on' + eventType] = eventHandler;
}
}

JavaScript事件处理程序的更多相关文章

  1. JavaScript事件处理程序 学习笔记

    我一直认为Javascript的特点就是在和用户交互的过程中可以进行一些操作,那么事件作为用户交互的主要部分就显得特别重要,今天先学习了JS事件处理程序的相关内容. 首先,要明白Javascript ...

  2. JavaScript事件处理程序的3种方式

    最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,首先跟大家在马海祥博客上跟大家分享的是JavaScript ...

  3. javascript事件处理程序的3个阶段

    第一阶段:HTML事件处理阶段.就是在元素里面添加onclick之类的属性来调用某个函数. <input type="button" value="单击" ...

  4. 对JavaScript事件处理程序/事件监听器的设定的简单介绍

    下面是一些对事件处理进行设定的方式. 指定为HTML元素的属性(事件处理程序) 指定为DOM元素的属性(事件处理程序) 通过EventTarget.addEventListener()进行指定(事件监 ...

  5. JavaScript事件对象与事件处理程序

    在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然 ...

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

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

  7. JavaScript:关于事件处理程序何时可以直接访问元素的属性

    指定在元素的的事件处理程序中指定 <input type="button" value="click me" onclick="alert(th ...

  8. 探究JavaScript中的五种事件处理程序

    探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...

  9. [转]javascript指定事件处理程序包括三种方式:

    javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...

随机推荐

  1. Cookie无法读取

    问题描述:用谷歌调试可以看到,但是用js去读取的时候,一直提示undefined

  2. Hibernate考试选择题解析

    1.在Hibernate中,以下关于主键生成器说法错误的是(AC). A.increment可以用于类型为long.short或byte的主键(byte类型不可以) B.identity用于如SQL ...

  3. shell脚本仅列出当前目录下的文件及文件夹

    #!/bin/bash function ergodic(){ ` # do # "/"$file ] # then # ergodic $"/"$file # ...

  4. RPM命令用法

    安装一个包 rpm –ivh 升级一个包 rpm -Uvh 移走一个包 rpm -e 4.校验rpm包 rpm -V < rpm package name> 5.查询一个包是否被安装 rp ...

  5. NB-IoT的相关资料整理(基本概念,技术优势,典型案例和当前的进展)

            人与人之间的通讯规模已近天花板,物与物的则刚刚进入增长快车道.随着可穿戴.车联网.智能抄表等新兴市场的开启,工业4.0.智慧城市.智慧农业等理念照进现实,万物互联的时代正加速到来. 一 ...

  6. shell脚本每天自动备份mysql数据库

    一.mysql提供了一个mysqldump的工具可以方便的导出导入数据库信息: 二.使用命令行shell测试执行mysqldump,理解必备的参数,查看生成的sql备份文件是否符合需求: /usr/b ...

  7. 《JavaScript高级程序设计》 - 读书笔记 - 第4章 变量、作用域和内存问题

    4.1 基本类型和引用类型的值 JavaScript变量是松散类型的,它只是保存特定值的一个名字而已. ECMAScript变量包含两种数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据 ...

  8. 几个常用的CV知识点

    刚结束一段实习,图像算法工程师.总结一下图像算法的几个基本的操作,图像操作算子各式各样,各显神通,光是滤波filter这一个专题就可以有很多的技巧和功能. 我从做过的两个小项目入手, 简单介绍一下该项 ...

  9. 软件工程(FZU2015)赛季得分榜,第七回合

    目录 第一回合 第二回合 第三回合 第四回合 第五回合 第6回合 第7回合 第8回合 第9回合 第10回合 第11回合 积分规则 积分制: 作业为10分制,练习为3分制:alpha30分: 团队项目分 ...

  10. 【cocos2d-x + Lua(2) C++和lua数据通讯之间的互调】

    我们主要解决如下几个问题: 转载注明出处:http://www.cnblogs.com/zisou/p/cocos2dx-lua2.html 1,C++如何获取Lua里面的一个变量值? 2,C++如何 ...