Javascript Event
事件原理
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的更多相关文章
- javascript event（事件对象）详解
javascript event(事件对象)详解 1. 事件对象 1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...
- JavaScript Event Delegation, and event.target vs. event.currentTarget
原文:https://medium.com/@florenceliang/javascript-event-delegation-and-event-target-vs-event-currentta ...
- javascript event对象操作
js代码: $(".leads_detail").click(function(e){ e = e || event; var t = e.target || e.srcEleme ...
- 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 ...
- JavaScript — event介绍以及兼容处理
JavaScript - event介绍以及兼容处理 1.事件流 浏览器发展到第四代时(IE4及 Netscape Communicator 4),浏览器开发团队遇到一个问题:页面的哪个部分会拥有某个 ...
- 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.c ...
- javascript event兼容性随笔
一.前言 function ConvertEvent(e, element) { var event = e || window.event; var resultEvent = { event: e ...
- 关于 javascript event flow 的一个bug
[1]描述了firefox,safari 有一个bug和DOM 3 规范不一致:在event.currentTarget等于event.target的时候(即event flow处于target ph ...
- javascript event bubbling and capturing (再谈一谈js的事件冒泡和事件补获，看到这篇文章加深了理解)
原文地址:http://javascript.info/tutorial/bubbling-and-capturing 先给出最终的结论: Summary Events first are captu ...
随机推荐
- 【JavaScript】JavaScript的Function与Object浅析
前言: JavaScript的面向对象是基于原形的,所有对象都有一条属于自己的原型链.Object与Function可能很多看Object instanceof Function , Function ...
- [CSS] Introduction to CSS Columns
Learn how to use CSS columns to quickly lay out fluid columns that are responsive, degrade gracefull ...
- c语言全局变量和局部变量问题汇总
.局部变量是否能和全局变量重名? 答:能,局部会屏蔽全局.要用全局变量,须要使用"::" 局部变量能够与全局变量同名,在函数内引用这个变量时,会用到同名的局部变量,而不会用到全局变 ...
- php内核探索
http://www.nowamagic.net/librarys/veda/special/PHP%E5%86%85%E6%A0%B8%E6%8E%A2%E7%B4%A2 关注PHP 源代码 Zen ...
- zookeeper的异常处理(Disconnected, SyncConnected, Expired)
最近系统中使用zookeeper支持三个功能:全量/增量索引的消息通知:搜索活跃节点检查:分布式锁做索引切换同步. 线上服务对稳定性要求较高,包括各种异常情况,如网络中断导致连接断开,系统load过高 ...
- Golang学习 - io/ioutil 包
------------------------------------------------------------ // Discard 是一个 io.Writer 接口,调用它的 Write ...
- poll机制分析
更多文档:http://pan.baidu.com/s/1sjzzlDF linux poll/select用法及在字符驱动中的简单实现 1.poll和select 使用非阻塞I/O 的应用程序常常使 ...
- 企业级搜索引擎Solr 第三章 索引数据（Indexing Data）[3]
转载:http://quweiprotoss.wap.blog.163.com/ Solr Cell是一个针对Tika的简单适配器,它由一个SAX ContentHandler组成,ContentHa ...
- ORA-01034: 、ORA-01078: 和 LRM-00109: 的解决方法
环境:Linux 5.4 Oracle 11.2.0.3 在Linux上连接Oracle时遇到报错: SQL> show parameter sgaORA-01034: ORACLE not a ...
- angularJs中图表功能（有集成框架）－angular-flot
1.柱状图和折线图的数据格式: $scope.Chart.data = [ { label: "离线", data: [[0, 2]] }, { label: "在线&q ...