事件原理

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

<html>

<head>

<title>Example</title>

</head>

<body onclick=”handleClick()”>

<div onclick=”handleClick()”>Click Me</div>

</body>

</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

<html onclick="alert('html')">

<head>

<title>Stopping Event Propagation Example</title>

<script type="text/javascript">

function handleClick(oEvent) {

	var ie = !-[1,]; // 检测是否IE

	alert("input");

	if (ie) {

		oEvent.cancelBubble = true; // 取消事件冒泡

	} else {

		oEvent.stopPropagation();

	}

}

</script>

</head>

<body onclick="alert('body')">

<input type="button" value="Click Me" onclick="handleClick(event)" />

</body>

</html>

事件处理

为事件添加处理函数

HTML

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

JS

var oDiv = document.getElementById(“div1”);

oDiv.onclick = function () {

alert(“I was clicked”);

};

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

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

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

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

var fnClick = function () {

alert(“Clicked!”);

};

var oDiv = document.getElementById(“div”);

oDiv.attachEvent(“onclick”, fnClick); //add the event handler

//do some other stuff here

oDiv.detachEvent(“onclick”, fnClick); //remove the event handler

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

Netscape Dom method

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

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

添加事件处理函数

var fnClick1 = function () {

alert(“Clicked!”);

};

var fnClick2 = function () {

alert(“Also clicked!”);

};

var oDiv = document.getElementById(“div1”);

oDiv.addEventListener(“onclick”, fnClick1);

oDiv.addEventListener(“onclick”, fnClick2);

事件对象

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

1，那个对象引起的事件

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

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

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

IE

oDiv.onclick = function () {

var oEvent = window.event;

}

Netscape

oDiv.onclick = function () {

var oEvent = arguments[0];

}

oDiv.onclick = function (oEvent) {

}

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

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. iOS 2D绘图详解（Quartz 2D）之Bitmap

    什么是Bitmap? Bitmap叫做位图,每一个像素点由1-32bit组成.每个像素点包括多个颜色组件和一个Alpha组件(例如:RGBA). iOS中指出如下格式的图片 JPEG, GIF, PN ...

  2. [转]SQL快速入门

    原文出处:http://blog.csdn.net/xxd851116/article/details/5688263 一.基础 1.说明:创建数据库CREATE DATABASE database- ...

  3. 如何在Windows Server 2003中配置FTP站点服务

    前面写过一篇文章<怎样给你的网站注册一个好域名?> ,讲到“玉米”,笔者有很深的情节,也希望与大家交流“米事”,可以站内私信我或者直接回复文章. 有了好域名只是做网站的开始.我们还要买主机 ...

  4. 基于jQuery标题有打字效果的焦点图

    给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...

  5. 随机 I/O & 顺序 I/O

    在谈这俩概念前.先来说说 大I/O vs. 小I/O     通常.我们把 <=16KB 的I/O认为是小I/O.而 >=32KB 的I/O认为是大I/O     了解I/O的大小.影响到 ...

  6. 添加IFrame导致内存溢出的解决过程（IE浏览器，目前发现了原因，还未解决）

    1.  现象 每次动态添加iframe时,iexplore.exe进程占据的内存都会增加(大概10M左右),不会自动释放,最终导致内存溢出 2.  解决过程 经过网络的一番搜索,基本上给出的解决方案是 ...

  7. jQery无缝滚动效果

    思路: 赋值所有li,添加到ul末尾,重新计算ul宽度 每次移动一个固定的值,当超出一半时,将ul拉回原位 以下代码 <!DOCTYPE html> <html> <he ...

  8. Window环境下配置Redis服务的方法及查看缓存数据的工具介绍

    工具下载位置:http://pan.baidu.com/s/1hqVh1f2,包括服务端配置以及查看缓存的工具. 服务端是以服务的形式运行,将Redis服务端解压到某个目录,然后执行cmd执行命令: ...

  9. Parallel.ForEach() 并行循环

    现在的电脑几乎都是多核的,但在软件中并还没有跟上这个节奏,大多数软件还是采用传统的方式,并没有很好的发挥多核的优势. 微软的并行运算平台(Microsoft’s Parallel Computing ...

  10. [经典算法] 排列组合-N元素集合的所有子集(一)

    题目说明: 给定一组数字或符号,产生所有可能的集合(包括空集合),例如给定1 2 3,则可能的集合为:{}.{1}.{1,2}.{1,2,3}.{1,3}.{2}.{2,3}.{3}. 题目解析: 如 ...