事件：用户或浏览器自身执行的动作；

事件处理程序：响应某个事件的函数；

事件流：从页面中接收事件的顺序。

1、DOM事件流

"DOM2级事件"规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。单击<div>元素会按照下图顺序触发事件。

实际的目标（<div>元素）在捕获阶段不会接收到事件，意味着在捕获阶段事件从document到<html>再到<body>后就停止了。在处于目标阶段，事件在<div>上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回文档。

2、事件处理程序

（1）HTML事件处理程序

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码。

  1. <input type="button" value="click me" onclick="alert(event.type)">//click
  2. <input type="button" value="button1" onclick="alert(this.value)">//button1
  3.  
  4. <input type="button" value="click me" onclick="showMessage()">
  5. <script>
  6. function showMessage(){
  7.     alert('Hello world');
  8. }
  9. </script>

存在问题：存在时差问题；HTML与JavaScript代码紧密耦合。

（2）DOM0级事件处理程序

通过JavaScript制定事件处理程序的传统方式，是将一个函数赋值给一个事件处理程序属性。每个元素（包括window和document）都有自己的事件处理程序属性。这些属性通常全部小写。

  1. var bt = document.getElementById('myButton');
  2. bt.onclick = function(){
  3.     alert(this.id);//DOM0级方法指定的事件处理程序被认为是元素的方法，程序中的this引用当前元素
  4. }
    bt.onclick = null;//删除事件处理程序

（3）DOM2级事件处理程序

addEventListener()和removeEventListener()传入的参数相同，意味着addEventListener()添加的匿名函数将无法移除。

  1. var bt1 = document.getElementById('myButton1');
  2. bt1.addEventListener('click', function(){
  3.     alert(this.id);
  4. }, false);//false表示在冒泡阶段调用事件处理程序，true表示在捕获阶段调用事件处理程序，大多数情况下是用false
  5. var handler = function(){
  6.     alert('hello world');
  7. };
  8. bt1.addEventListener('click', handler, false);
  9. bt1.removeEventListener('click', handler, false);//移除

IE9、Firefox、Chrome、Safari和Opera支持Dom2级事件处理程序。

（4）IE事件处理程序

由于IE8更早版本只支持事件冒泡，attachEvent()添加的事件处理程序会被添加到冒泡阶段。事件处理程序会在全局作用域中运行，这是与Dom0级事件处理程序的主要区别。

  1. var bt1 = document.getElementById('myButton1');
    bt1.attachEvent('onclick', function(){
    　　alert(this == window);//true,事件处理程序会在全局作用域中运行
    });
  2. var handler1 = function(){
  3.     alert('world');
  4. };
  5. bt1.attachEvent('onclick', handler1);//ie
  6. bt1.detachEvent('onclick', handler1);//移除

支持IE事件处理程序的浏览器有IE和Opera。

3、DOM中的事件（event）对象

  1. var btn = document.getElementById('mybtn');
  2. var handler = function(event){
  3.     switch(event.type){
  4.         case 'click':
  5.             alert('clicked');
  6.             event.stopPropagation();//立即停止事件在DOM层次中的传播
  7.             break;
  8.         case 'mouseover':
  9.             event.target.style.backgroundColor = 'red';
  10.             break;
  11.         case 'mouseout':
  12.             event.target.style.backgroundColor = '';
  13.             break;
  14.     }
  15. }
  16.  
  17. btn.onclick = handler;
  18. btn.onmouseover = handler;
  19. btn.onmouseout = handler;
  20.  
  21. document.body.onclick = function(){
  22.     alert('body clicked');
  23. }

js 事件处理程序 事件对象的更多相关文章

  1. IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

    IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...

  2. DOM事件处理程序-事件对象-键盘事件

    事件流: 事件流--描述的是从页面中接受事件的顺序 IE  ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...

  3. js事件流、事件处理程序/事件侦听器

    1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 ...

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

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

  5. JS——事件流与事件处理程序

    1.事件流:从页面中接收事件的顺序 1.1 IE :事件冒泡流1.2 Netscape :事件捕获1.3 DOM事件流 :事件捕获阶段——事件目标阶段——事件冒泡阶段DOM2级事件规定 :捕获阶段不会 ...

  6. JS事件流与DOM事件处理程序

    在Javascript的DOM中,关于事件Event对象的知识是一定要掌握的.Event对象模型主要分为两个部分,一个是Event对象本身具有的属性和方法,这个参照API就可以学得:另一个是在DOM节 ...

  7. javaScript事件（二）事件处理程序

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

  8. 《JS高程》事件学习笔记

    事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. -------------------------------------------------------- ...

  9. Javascript高级编程学习笔记（58）—— 事件（2）事件处理程序

    事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...

随机推荐

  1. html5和css3的常用参考网

    当我们使用HTML5, CSS3,甚至Bootstrap设计网站的时候,有些方面是必须考虑的,比如字体大小,标题大小,行间距,每行字数,字体,颜色,背景图片和文字的搭 配,图标,留白和布局...... ...

  2. linux操作命令等积累

    1,启动服务:两种方式: /etc/init.d/networking start  /etc/init.d/mysql start #:service mysql start  service ne ...

  3. Linux System Calls Hooking Method Summary

    http://www.cnblogs.com/LittleHann/p/3854977.html http://www.cnblogs.com/cozy/articles/3175615.html h ...

  4. Centos压缩与打包

    这个虽然是基础知识,但是有些东西就是这样,久了没用,就会忘记,而且之前有一个坏习惯就是不喜欢做笔记,以后学习了行东西一定要记录在博客,这样以后自己也能时不时的查看一下. 言归正传,在计算机的世界中,数 ...

  5. x8086汇编在显存中显示字符串

    题目:在屏幕中间显示绿色,绿底红色,白底蓝色的字符串‘welcome to masm!’ 80X25彩色字符模式显示缓冲区的结构: 在内存地址结构中,B8000H~BFFFFH共32KB的空间,为80 ...

  6. 2016暑假多校联合---Counting Intersections

    原题链接 Problem Description Given some segments which are paralleled to the coordinate axis. You need t ...

  7. linux下c程序的链接、装载和库(1)

    读完<程序员的自我修养--链接.装载和库>相关章节,想来总结一下,若有错误,请指正,多谢. 1. 什么叫目标文件? 你的工程里有很多xxx.c这样的源文件,这些文件是文本文件,只有人能够认 ...

  8. Java.io.DataInputStream.readInt()

    1. 代码 import java.io.DataInputStream; import java.io.IOException; public class Test { public static ...

  9. 【FOL】第九周

    不知不觉又是三周过去了. 这几周忙了一下,其他时间全都在搞服务端,简直是酸爽的不行...不过还好出了些成果. 目前服务端有: 1.版本服务:游戏版本更新 2.账号服务:用户身份验证,返回各种连接(代理 ...

  10. MYSQL 解锁与锁表

    解锁 第一种 show processlist; 找到锁进程,kill id ; 第二种 mysql>UNLOCK TABLES; 锁表 锁定数据表,避免在备份过程中,表被更新 mysql> ...