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. Java中的static关键字解析

    Java中的static关键字解析 static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键 ...

  2. Appium学习实践(五)遇到的坑(记录自己工作中遇到的坑以及解决方案,不定时更新)

    1.错误截图,有时候测试用例执行错误的话,相对于复杂的log,一张错误截图也许能更明确哪里出的问题(当然有时,截图+log还是最好了) 坑:本来是想测试用例fail的时候捕获异常来执行截图操作,但是由 ...

  3. java线程池(newSingleThreadExecutor())小应用

    创建单个线程,用来操作一个无界的队列任务,不会使用额外的线程.如果线程崩溃会重新创建一个,直到任务完成. 代码: import java.util.concurrent.ExecutorService ...

  4. python BeautifulSoup模块的简要介绍

    常用介绍: pip install beautifulsoup4 # 安装模块 from bs4 import BeautifulSoup # 导入模块 soup = BeautifulSoup(ht ...

  5. Log4j的ConversionPattern参数的格式含义

    Log4j建议只使用四个级别,优先级从高到低分别是ERROR.WARN.INFO.DEBUG#这里定义能显示到的最低级别,若定义到INFO级别,则看不到DEBUG级别的信息了~!log4j.rootL ...

  6. <转>打工与乘公交

    打工与乘公交 去一个公司打工就如同上了一辆公交车.在上车之前,你应该清楚自己打算去哪里,打算在哪里下车. 有的公交车很豪华,有的很破烂,但是这并不是重点,所有能开到目的地的车都是好车. 上了车之后,也 ...

  7. LeetCode:LRU Cache

    题目大意:设计一个用于LRU cache算法的数据结构. 题目链接.关于LRU的基本知识可参考here 分析:为了保持cache的性能,使查找,插入,删除都有较高的性能,我们使用双向链表(std::l ...

  8. Sqoop2搭建及使用

    1. 下载并安装配置Sqoop [需要的环境:Hadoop,Java] 首先  Hadoop版本2.7.2 20161013 找了篇Sqoop的文章就开撸  结果发现什么1.3,1.9,又有什么Sqo ...

  9. asp.net mvc ajax 异步刷新例子

    这几天在asp.net中使用ajax来做异步刷新,这里整理一下 1.首先看前台页面点击的时候调用函数 function shuxin() { $.ajax( { url: "GetValue ...

  10. Windows操作系统组策略应用全攻略

    作者:佚名出处:IT专家网论坛2007-07-23 13:31 一.什么是组策略 (一)组策略有什么用? 说到组策略,就不得不提注册表.注册表是Windows系统中保存系统.应用软件配置的数据库,随着 ...