事件原理

JS的事件原理，先看一段HTML。

  1. <html>
  2. <head>
  3. <title>Example</title>
  4. </head>
  5. <body onclick=”handleClick()”>
  6. <div onclick=”handleClick()”>Click Me</div>
  7. </body>
  8. </html>

点击Click Me，会发生什么事呢？

DOM支持事件捕获(event capturing)及事件冒泡(event bubbling),前者是netscape浏览器的事件处理机制，后者是ie的处理机制。

netscape的事件捕获模型也叫top-down model，从上往下，直到target(div)。 而IE是从target(div)一直往上传递事件，就像一个气泡从水底往上冒。

例子

这是一个事件冒泡的例子，

alert input

修改这一句

// oEvent.cancelBubble = true;

则alert结果为 input body html

  1. <html onclick="alert('html')">
  2. <head>
  3. <title>Stopping Event Propagation Example</title>
  4. <script type="text/javascript">
  5. function handleClick(oEvent) {
  6. 	var ie = !-[1,]; // 检测是否IE
  7. 	alert("input");
  8. 	if (ie) {
  9. 		oEvent.cancelBubble = true; // 取消事件冒泡
  10. 	} else {
  11. 		oEvent.stopPropagation();
  12. 	}
  13. }
  14. </script>
  15. </head>
  16. <body onclick="alert('body')">
  17. <input type="button" value="Click Me" onclick="handleClick(event)" />
  18. </body>
  19. </html>

事件处理

为事件添加处理函数

HTML

  1. <div onclick=”alert(‘I was clicked’)”></div>

JS

  1. var oDiv = document.getElementById(“div1”);
  2. oDiv.onclick = function () {
  3. alert(“I was clicked”);
  4. };

IE，每个元素及WINDOW对象都有2个函数: attachEvent, detachEvent.

  1. [Object].attachEvent(“name_of_event_handler”, fnHandler);
  2. [Object].detachEvent(“name_of_event_handler”, fnHandler);

上面的例子可以写成如下形式

  1. var fnClick = function () {
  2. alert(“Clicked!”);
  3. };
  4. var oDiv = document.getElementById(“div”);
  5. oDiv.attachEvent(“onclick”, fnClick); //add the event handler
  6. //do some other stuff here
  7. oDiv.detachEvent(“onclick”, fnClick); //remove the event handler

也同时可以为一个事件指派多个Handler。

Netscape Dom method

  1. [Object].addEventListener(“name_of_event”, fnHandler, bCapture);
  2. [Object].removeEventListener(“name_of_event”, fnHandler, bCapture);

添加事件处理函数

  1. var fnClick1 = function () {
  2. alert(“Clicked!”);
  3. };
  4. var fnClick2 = function () {
  5. alert(“Also clicked!”);
  6. };
  7. var oDiv = document.getElementById(“div1”);
  8. oDiv.addEventListener(“onclick”, fnClick1);
  9. oDiv.addEventListener(“onclick”, fnClick2);

事件对象

当一个事件发生时，我们需要知道这个事件的一些细节，如

1，那个对象引起的事件

2，事件发生时，鼠标的相关信息

3，事件发生时，键盘的相关信息

这些细节在IE及其他浏览器的获取方式是不同的，

IE

  1. oDiv.onclick = function () {
  2. var oEvent = window.event;
  3. }

Netscape

  1. oDiv.onclick = function () {
  2. var oEvent = arguments[0];
  3. }
  4. oDiv.onclick = function (oEvent) {
  5. }

事件的类型有很多，不同事件类型的属性在不同浏览器也有差异，这些都需要不断的练习，才能熟练掌握，未完待续。

Javascript Event的更多相关文章

  1. javascript event（事件对象）详解

    javascript event(事件对象)详解   1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...

  2. JavaScript Event Delegation, and event.target vs. event.currentTarget

    原文:https://medium.com/@florenceliang/javascript-event-delegation-and-event-target-vs-event-currentta ...

  3. javascript event对象操作

    js代码: $(".leads_detail").click(function(e){ e = e || event; var t = e.target || e.srcEleme ...

  4. What are the benefits to using anonymous functions instead of named functions for callbacks and parameters in JavaScript event code?

     What are the benefits to using anonymous functions instead of named functions for callbacks and par ...

  5. JavaScript — event介绍以及兼容处理

    JavaScript - event介绍以及兼容处理 1.事件流 浏览器发展到第四代时(IE4及 Netscape Communicator 4),浏览器开发团队遇到一个问题:页面的哪个部分会拥有某个 ...

  6. 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

    总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.c ...

  7. javascript event兼容性随笔

    一.前言 function ConvertEvent(e, element) { var event = e || window.event; var resultEvent = { event: e ...

  8. 关于 javascript event flow 的一个bug

    [1]描述了firefox,safari 有一个bug和DOM 3 规范不一致:在event.currentTarget等于event.target的时候(即event flow处于target ph ...

  9. javascript event bubbling and capturing (再谈一谈js的事件冒泡和事件补获，看到这篇文章加深了理解)

    原文地址:http://javascript.info/tutorial/bubbling-and-capturing 先给出最终的结论: Summary Events first are captu ...

随机推荐

  1. 安装linux系统并配置那点事

    安装完成后,将看到如下控制台: 输入以上安装信息中所填写的用户名(user),随后输入密码(user),即可登录 Ubuntu. 随时可使用 Ctrl + Alt 快捷键可离开虚拟机. 3 配置 Ub ...

  2. 浏览器使用ActiveX控件

    在IE中使用ActiveX控件,需要使用HTML中的标志是<OBJECT>,该标记几个重要的参数特性有:1．ID:为控件提供一个标识名称,为HTML代码提供一种访问该控件的入口.2．CLA ...

  3. CHECKPOINT

    http://blog.csdn.net/chenlvzhou/article/details/41518979

  4. gamework的使用方法

    翻译来源地址:https://github.com/Kadoba/gamework gamework是控制LOVE2D游戏进程流的一个项目. ↑ 这个是按原文译的, 当初乍看完全不懂, 接下来我来用图 ...

  5. Socket 之 API函数介绍

    1.创建套接字──socket() 应用程序在使用套接字前,首先必须拥有一个套接字,系统调用socket()向应用程序提供创建套接字的手段,其调用格式如下: SOCKET PASCAL FAR soc ...

  6. 美国H1B基本情况及相关数据

    H-1B是外国人在美国工作的签证,从美国学校毕业之后会有12个月的OPT实习期,在OPT结束之前必须申请到H1B签证才能在实习期结束后继续工作. H1B需要由雇佣你的公司帮你申请,也就是说必须先找到工 ...

  7. [SQLServer]学习总结笔记（基本涵盖Sql的所有操作）

    --################################################################################### /* 缩写: DDL(Dat ...

  8. 3. Android框架和工具之 xUtils（HttpUtils）

    1. HttpUtils 作用: 支持同步,异步方式的请求: 支持大文件上传,上传大文件不会oom: 支持GET,POST,PUT,MOVE,COPY,DELETE,HEAD请求: 下载支持301/3 ...

  9. 【Android 界面效果29】研究一下Android滑屏的功能的原理，及scrollTo和scrollBy两个方法

    Android中的滑屏功能的原理是很值得我们去研究的,在知道这两个原理之前,有必要先说说View的两个重要方法,它们就是scrollTo 和scrollBy. Android View视图是没有边界的 ...

  10. 重构25-Introduce Design By Contract checks（契约式设计）

    契约式设计(DBC,Design By Contract)定义了方法应该包含输入和输出验证.因此,可以确保所有的工作都是基于可用的数据,并且所有的行为都是可预料的.否则,将返回异常或错误并在方法中进行 ...