事件原理

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. 王立平--EditPlus激活码

    注冊名:Free User 注冊码:6AC8D-784D8-DDZ95-B8W3A-45TFA

  2. MySql5.5忘记root密码的解决方法

    试了很多方法,下面这种方法是确保可以成功的,呵呵.转载自:http://hi.baidu.com/bjben/item/722bb50b27baf1dcdde5b097. 申明:本文章应该属于转载,但 ...

  3. [MFC]MFC中OnDraw与OnPaint的区别

    问题 问题:我在视图画的图象或者文字,当窗口改变后为什么不见了?OnDraw()和OnPaint()两个都是解决上面的问题,有什么不同? OnDraw()和OnPaint()好象兄弟俩,因为它们的工作 ...

  4. 0c-39-ARC下单对象内存管理

    1.ARC工作原理详述 ARC是Objective-C编译器的特性,而不是运行时特性或者垃圾回收机制,ARC所做的只不过是在代码编译时为你自动在合适的位置插入release或autorelease A ...

  5. lucene合并测试的总结

    1 查询的总时间等于每个segment查询时间的总和 2 合并的步骤     (1)做flush操作的先生成一个新的segment     (2)检查在新segment之前已经存在的segment的数 ...

  6. magic_quotes_gpc（魔术引号开关）

    magic_quotes_gpc函数在php中的作用是判断解析用户提示的数据,如包括有:post.get.cookie过来的数据增加转义字符“\”,以确保这些数据不会引起程序,特别是数据库语句因为特殊 ...

  7. IIS 之 托管管道模式

    IIS 7.0 支持两种管道模式: (1)IIS 7.0 最新提供的集成管道模式(Integrated), (2)经典管道模式(Classic),经典管道模式是由先前版本的IIS提供的. 我们可以通过 ...

  8. D. Powerful array 莫队算法或者说块状数组 其实都是有点优化的暴力

    莫队算法就是优化的暴力算法.莫队算法是要把询问先按左端点属于的块排序,再按右端点排序.只是预先知道了所有的询问.可以合理的组织计算每个询问的顺序以此来降低复杂度. D. Powerful array ...

  9. 共享锁（S锁）和排它锁（X锁）

    1 什么叫数据库共享锁[S]锁和[X]锁 共享锁[S锁]    又称读锁,若事务T对数据对象A加上S锁,则事务T可以读A但不能修改A,其他事务只能再对A加S锁,而不能加X锁,直到T释放A上的S锁.这保 ...

  10. CSS3: border-radius边框圆角详解

    border-radius 基本语法: border-radius : none | <length>{1,4} [/ <length>{1,4} ]? 取值范围: <l ...