JavaScript事件处理程序
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事件处理程序的更多相关文章
- JavaScript事件处理程序 学习笔记
我一直认为Javascript的特点就是在和用户交互的过程中可以进行一些操作,那么事件作为用户交互的主要部分就显得特别重要,今天先学习了JS事件处理程序的相关内容. 首先,要明白Javascript ...
- JavaScript事件处理程序的3种方式
最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,首先跟大家在马海祥博客上跟大家分享的是JavaScript ...
- javascript事件处理程序的3个阶段
第一阶段:HTML事件处理阶段.就是在元素里面添加onclick之类的属性来调用某个函数. <input type="button" value="单击" ...
- 对JavaScript事件处理程序/事件监听器的设定的简单介绍
下面是一些对事件处理进行设定的方式. 指定为HTML元素的属性(事件处理程序) 指定为DOM元素的属性(事件处理程序) 通过EventTarget.addEventListener()进行指定(事件监 ...
- JavaScript事件对象与事件处理程序
在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然 ...
- javaScript事件(二)事件处理程序
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
- JavaScript:关于事件处理程序何时可以直接访问元素的属性
指定在元素的的事件处理程序中指定 <input type="button" value="click me" onclick="alert(th ...
- 探究JavaScript中的五种事件处理程序
探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...
- [转]javascript指定事件处理程序包括三种方式:
javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...
随机推荐
- Jenkins学习九:Jenkins插件之构建MSBuild
Jenkins是Java语言编写的,一直好奇是否可以构建NET语言的项目,目前只了解到有一个插件MSBuild支持构建NET项目. 一.Jenkins安装插件MSBuild 二.VS构建CsharpH ...
- sass入门
SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. SASS 官网介绍: sass is the most mature(成熟的),st ...
- 深入理解Java的接口和抽象类
深入理解Java的接口和抽象类 对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太多不同的地方.很多人在初学的 ...
- java设计模式之外观模式
外观模式概念 外观模式又称为门面模式,为子系统中的一组接口提供一个一致的界面,此模式定义了一个搞层次接口,使得这一个子系统更加容易使用.这一模式完美的体现了依赖倒转原则和迪米特法则的思想,所以是非常常 ...
- 洛谷11月月赛round.2
P3414 SAC#1 - 组合数 题目背景 本题由世界上最蒟蒻最辣鸡最撒比的SOL提供. 寂月城网站是完美信息教室的官网.地址:http://191.101.11.174/mgzd . 题目描述 辣 ...
- hadoop安装
环境 RedHad Linux9.0 java6 hadoop1.2.1 hadoop下载地址:http://mirror.bit.edu.cn/apache/hadoop/common/ 版本 ...
- sqlite常用查询
做的小工具用到了sqlite,在查询上较sqlserver还是稍有差异,将常用操作汇总一下,慢慢收集和整理. --查询版本SELECT sqlite_version() AS 'SQLite Vers ...
- webstrom live templates
javascript: 在live templates底部要选择javascript # $('#$END$') $ $($end$) $bd $(document.body) $d $(docume ...
- C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 区域管理功能增强(电子商务方向)
由于公司是面向全国服务的.全国各地都有分公司,需要管理到覆盖全国的各种业务,各种业务系统信息系统的数据都需要规范化. 公司开展网络订单功能,在全国范围内实现网络下单.提高工作效率,提高各公司之间的数据 ...
- rpc框架之avro 学习 1 - hello world
avro是hadoop的一个子项目,提供的功能与thrift.Protocol Buffer类似,都支持二进制高效序列化,也自带RPC机制,但是avro使用起来更简单,无需象thrift那样生成目标语 ...