javaScript之事件处理程序
事件就是用户或浏览器自身执行的某个动作,JavaScript与HTML的交互也是通过事件实现的。而相应某个事件的函数就叫做事件处理函数。包括以下几种:
1.HTML事件处理程序
某个元素支持的每种事件,都可以使用一个相应的事件处理程序相同的HTML特性指定。这个特性的值能执行JavaScript代码。
<input type=”button” value=”按钮” onclick=”showMessage()”>
<script>
function showMessage(){
alert(“Hello”)
}
</script>
封装元素属性值的函数有一个局部变量event,也就是事件对象,通过event可以直接访问事件对象。函数内部的this值等于事件的目标元素。该函数可以使用with扩展作用域
function(){
with(document){
//可访问document
with(this){
//可访问该元素本身的属性值
}
}
}
缺点:
(1)存在时差,用户可能在HTML元素刚显示就触发事件,但是当前并不一定具备执行条件,比如JS代码没有下载完成。可以使用try-catch抛出错误。
(2)扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。
(3)HTML代码与JavaScript代码高度耦合。如果需要更换事件处理程序,需要改动两个地方。
2.DOM0级事件处理程序
与HTML事件处理程序相同的是都在元素属性上添加事件处理程序。不同的地方是DOM0级在JavaScript代码中获取元素引用,在引用属性上添加事件处理程序。
<input type=”button” value=”按钮” id="btn">
<script>
var Btn = document.getElementById(“btn”);
Btn.onclick = function(){
alert(“Hello”)
};
</script>
程序中的this引用当前元素的作用域。
删除DOM0级事件
Btn.onclick = null;
3.DOM2级事件处理程序
“DOM2级事件”定义了两个方法,用于指定和删除事件处理程序:addEventListener()和removeEventListener()。它们都接受3个参数:事件名,事件处理程序函数和一个布尔值。最后一个布尔值是true表示在捕获阶段调用事件处理程序,false表示在冒泡阶段调用事件处理程序。第三个参数可选,默认值是false。与DOM0级相同,程序中的this引用当前元素的作用域。
<input type=”button” value=”按钮” id=”btn”>
<script>
var Btn = document.getElementById(“btn”);
Btn.addEventListener(“click”,function(){alert(“Hello”)},false};
</script>
可添加多个事件处理程序,不会被覆盖,从上向下执行。
通过removeEventListener()移除事件处理程序,对于添加的匿名函数无法移除。
4.IE事件处理程序
“IE事件”处理程序用于指定和删除事件处理程序的方法有:attachEvent ()和detachEvent ()。这两个方法接受两个参数:事件处理程序名和事件处理程序函数名。通过attachEvent ()添加的事件默认都会添加到冒泡阶段。
<input type=”button” value=”按钮” id=”btn”>
<script>
var Btn = document.getElementById(“btn”);
Btn.attachEvent(“onclick”,function(){alert(“Hello”)} };
</script>
与DOM0级不同的是,事件处理程序会在全局作用域中运行,即this指向window。
attachEvent ()也可以添加多个事件处理程序,但是执行顺序是自下而上。
5.跨浏览器的事件处理程序
核心视情况的分别处理DOM0级,DOM2级和IE事件处理程序。
Var eventHandler ={
addHandler: function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element. attachEvent (“on”+type, handler);
}else{
element[“on”+type] = handler;
},
removeHandler: function(element, type, handler){
if(element.removeEventListener){
element. removeEventListener(type, handler, false);
}else if(element.detach Event){
element. detach Event (“on”+type, handler);
}else{
element[“on”+type] = null;
}
}
};
eventHandler接受3个参数,分别是要操作元素的引用、事件名和事件处理函数。
调用方法
var Btn = document.getElementById(“btn”);
var handler = function(){
alert(“Hello”)
};
eventHandler. addHandler (Btn, “click”, handler);
removeHandler. addHandler (Btn, “click”, handler);
javaScript之事件处理程序的更多相关文章
- [转]javascript指定事件处理程序包括三种方式:
javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...
- JavaScript事件处理程序
JavaScript中的事件处理程序主要分为3种: HTML事件处理程序: <script type="text/javascript"> // HTML事件处理程序 ...
- JavaScript中的事件处理程序
JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或者浏览器窗口中发生的一些特定的交互瞬间.可以使用事件处理程序来预订事件,以便在事件发生的时候执行响应的代码.这种观察者模式的模 ...
- 浅谈JavaScript的事件(事件处理程序)
事件就是用户或者浏览器自身执行的某种动作.诸如click.load和mouseover,都是事件的名字.而响应某个事件的函数就叫事件处理程序.事件处理程序的名字以"on"开头,比如 ...
- 深入理解DOM事件机制系列第二篇——事件处理程序
× 目录 [1]HTML [2]DOM0级 [3]DOM2级[4]IE[5]总结 前面的话 事件处理程序又叫事件侦听器,实际上就是事件的绑定函数.事件发生时会执行函数中相应代码.事件处理程序有HTML ...
- js 事件处理程序 事件对象
事件:用户或浏览器自身执行的动作: 事件处理程序:响应某个事件的函数: 事件流:从页面中接收事件的顺序. 1.DOM事件流 "DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段 ...
- js事件流、事件处理程序/事件侦听器
1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 ...
- JavaScript系列----事件机制
1.事件流 1.1.标准事件流 所谓的标准事件流指的的:EMCAScript标准规定事件流包含三个阶段,分别为事件捕获阶段,处于目标阶段,事件冒泡阶段. 下面是一段html代码,根据代码来说明标准事件 ...
- javascript中事件总结&通用的事件侦听器函数封装&事件委托
前言: JAVASCRIPT与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口中发生的一些特定交互瞬间.可以使用侦听器( 或处理程序 )来预定事件,以便事件发生时执行相应的代码.这种在 ...
随机推荐
- Java并发之ArrayBlockingQueue
ArrayBlockingQueue是一个由数组支持的有界阻塞队列.此队列按 FIFO(先进先出)原则对元素进行排序.队列的头部是在队列中存在时间最长的元素.队列的尾部是在队列中存在时间最短的元素.新 ...
- Ubuntu中安装jdk环境
1.Installing default JRE/JDK sudo apt-get update sudo apt-get install default-jre sudo apt-get insta ...
- Jmeter使用文档(windows)
1. 安装jdk并配置环境变量 以1.8为例: (1)安装jdk1.8; (2)在系统变量里点击新建,变量名填写JAVA_HOME,变量值填写JDK的安装路径“C:\Program Files\Jav ...
- codeforces 676B 模拟 递推
题意:每秒从最高处的杯子倒一杯酒下来,酒流的方式如图,问t秒装满酒的杯子的数目. 思路:把第一杯的值设为t,glass[i][j]=(glass[i-1][j-1]-1)/2+(glass[i-1][ ...
- python第七篇:Python 列表操作详解
Python列表操作详解 list函数 list() #生成一个空的列表 list(iterable) #用可迭代对象初始化一个列表 列表的 and 运算和 or 运算 列表and运算 > ...
- 带SoapHeader验证的WebServices
一般在项目中,制作的都是基于SOAP协议的webservices,其描述语言是WSDL.但是有时候在项目中,需要保证webservices的安全,需要对其进行进行验证,那么我们就要实现SoapHead ...
- QWidget上下文菜单处理函数
QWidget类是Qt中所有可视化部件的基类,其很多函数都是虚函数,能被子类重写以表现不同形式和功能,今天来学习一下QWdiget的事件处理函数. 事件是鼠标.键盘或系统因其自身某些状态发生改变而引起 ...
- 【Sublime Text 3】编译环境
1.默认编译时总会出现错误 报错: [Finished in 1.3s with exit code 1][cmd: ['gcc', 'V:\\Cynthia\\01.c']][dir: V:\Cyn ...
- 在屏幕中间显示,按ESC键后改变字符的颜色
程序功能:编写程序在屏幕中间显示“a”~“z”,并可以让人看清,这个任务比较好实现. (1)在b800:[ 160*12+40*2]处存入a的ASCII码.(2)在循环中使用一个10000000000 ...
- Marionettejs
Marionette是牵线木偶的意思,这个库是对Backbone的一次更高层次封装.这样的封装有两个目标: 减少重复的工作,提高使用Backbonejs时的生产效率给复杂应用页面提供更多的结构,以支撑 ...