js 事件处理程序 事件对象
事件：用户或浏览器自身执行的动作；
事件处理程序：响应某个事件的函数；
事件流：从页面中接收事件的顺序。
1、DOM事件流
"DOM2级事件"规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。单击<div>元素会按照下图顺序触发事件。
实际的目标（<div>元素）在捕获阶段不会接收到事件，意味着在捕获阶段事件从document到<html>再到<body>后就停止了。在处于目标阶段，事件在<div>上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回文档。
2、事件处理程序
（1）HTML事件处理程序
某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码。
<input type="button" value="click me" onclick="alert(event.type)">//click
<input type="button" value="button1" onclick="alert(this.value)">//button1 <input type="button" value="click me" onclick="showMessage()">
<script>
function showMessage(){
alert('Hello world');
}
</script>
存在问题：存在时差问题；HTML与JavaScript代码紧密耦合。
（2）DOM0级事件处理程序
通过JavaScript制定事件处理程序的传统方式，是将一个函数赋值给一个事件处理程序属性。每个元素（包括window和document）都有自己的事件处理程序属性。这些属性通常全部小写。
var bt = document.getElementById('myButton');
bt.onclick = function(){
alert(this.id);//DOM0级方法指定的事件处理程序被认为是元素的方法，程序中的this引用当前元素
}
bt.onclick = null;//删除事件处理程序
（3）DOM2级事件处理程序
addEventListener()和removeEventListener()传入的参数相同，意味着addEventListener()添加的匿名函数将无法移除。
var bt1 = document.getElementById('myButton1');
bt1.addEventListener('click', function(){
alert(this.id);
}, false);//false表示在冒泡阶段调用事件处理程序，true表示在捕获阶段调用事件处理程序，大多数情况下是用false
var handler = function(){
alert('hello world');
};
bt1.addEventListener('click', handler, false);
bt1.removeEventListener('click', handler, false);//移除
IE9、Firefox、Chrome、Safari和Opera支持Dom2级事件处理程序。
（4）IE事件处理程序
由于IE8更早版本只支持事件冒泡，attachEvent()添加的事件处理程序会被添加到冒泡阶段。事件处理程序会在全局作用域中运行，这是与Dom0级事件处理程序的主要区别。
var bt1 = document.getElementById('myButton1');
bt1.attachEvent('onclick', function(){
alert(this == window);//true,事件处理程序会在全局作用域中运行
});
var handler1 = function(){
alert('world');
};
bt1.attachEvent('onclick', handler1);//ie
bt1.detachEvent('onclick', handler1);//移除
支持IE事件处理程序的浏览器有IE和Opera。
3、DOM中的事件（event）对象
var btn = document.getElementById('mybtn');
var handler = function(event){
switch(event.type){
case 'click':
alert('clicked');
event.stopPropagation();//立即停止事件在DOM层次中的传播
break;
case 'mouseover':
event.target.style.backgroundColor = 'red';
break;
case 'mouseout':
event.target.style.backgroundColor = '';
break;
}
}
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;
document.body.onclick = function(){
alert('body clicked');
}
js 事件处理程序 事件对象的更多相关文章
- IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素
IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...
- DOM事件处理程序-事件对象-键盘事件
事件流: 事件流--描述的是从页面中接受事件的顺序 IE ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...
- js事件流、事件处理程序/事件侦听器
1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 ...
- 对JavaScript事件处理程序/事件监听器的设定的简单介绍
下面是一些对事件处理进行设定的方式. 指定为HTML元素的属性(事件处理程序) 指定为DOM元素的属性(事件处理程序) 通过EventTarget.addEventListener()进行指定(事件监 ...
- JS——事件流与事件处理程序
1.事件流:从页面中接收事件的顺序 1.1 IE :事件冒泡流1.2 Netscape :事件捕获1.3 DOM事件流 :事件捕获阶段——事件目标阶段——事件冒泡阶段DOM2级事件规定 :捕获阶段不会 ...
- JS事件流与DOM事件处理程序
在Javascript的DOM中,关于事件Event对象的知识是一定要掌握的.Event对象模型主要分为两个部分,一个是Event对象本身具有的属性和方法,这个参照API就可以学得:另一个是在DOM节 ...
- javaScript事件（二）事件处理程序
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
- 《JS高程》事件学习笔记
事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. -------------------------------------------------------- ...
- Javascript高级编程学习笔记（58）—— 事件（2）事件处理程序
事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...
随机推荐
- 从C#到Objective-C，循序渐进学习苹果开发(5)--利用XCode来进行IOS的程序开发
本随笔系列主要介绍从一个Windows平台从事C#开发到Mac平台苹果开发的一系列感想和体验历程,本系列文章是在起步阶段逐步积累的,希望带给大家更好,更真实的转换历程体验.前面几篇随笔主要介绍C#和O ...
- 关于js性能
1,声明变量要赋初值2,尽量避免声明全局变量,可以减少与系统的重名3,当编写大量js代码时,难免会遇到命名冲突,这是可以通过模拟命名空间方式 来避免冲突4,尽量避免使用全局变量,搜索全局变量是 ...
- javascript定时器，取消定时器，及js定时器优化方法
通常用的方法: 启动定时器: window.setInterval(Method,Time) Method是定时调用的js方法 Time是间隔时间,单位是毫秒 取消定时器: clearInterval ...
- CodeSmith连接Oracle
Win7上仅安装了Oracle32位客户端,此时CodeSmith无法连接Oracle数据库. 解决方法一:如果同一台电脑安装了Oracle64位数据库,这样CodeSmith可以连接数据库. 解决方 ...
- onblur鼠标失去焦点事件
- DevExpress Ribbongallerybaritem选择性皮肤重组
void InitSkinGallery() () { SkinHelper skinHelper = new SkinHelper(); RibbonControl masterRibbonCont ...
- 从零开始学Python第0周：Python基本介绍（部分内容来源于网络）
Python入门介绍 一,Python的基本介绍 (1)概要 Python是一种解释型,面向对象,动态数据类型的高级程序设计语言.常被广泛用于处理系统管理任务和web编程.现如今Python已经成为了 ...
- linux下使用forever进行管理
何为forever:forever可以看做是一个nodejs的守护进程,能够启动,停止,重启我们的app应用.官方的说明是说:A simple CLI tool for ensuring that a ...
- CentOS6.5下安装PostgreSQL
一.配置 YUM 仓库 修改原始的 yum 仓库配置: vim /etc/yum.repos.d/CentOS-Base.repo 在[base]和[updates] 节(section)部分的尾部插 ...
- C#实现通过Gzip来对数据进行压缩和解压
C#实现通过Gzip来对数据进行压缩和解压 internal static byte[] Compress(byte[] data) { using (var compressedStream = n ...