Javascript防冒泡事件与Event对象
防冒泡
防冒泡用到的就是event的属性和方法
function add2shop(e) {
if (!e) var e = window.event;
e.cancelBubble = true; // IE
if (e.stopPropagation) e.stopPropagation(); // 其他
// todo...
}
Event对象案例
案例一，鼠标点击判断
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
var btnNum = event.button;
if (btnNum==2)
{
alert("您点击了鼠标右键！")
}
else if(btnNum==0)
{
alert("您点击了鼠标左键！")
}
else if(btnNum==1)
{
alert("您点击了鼠标中键！");
}
else
{
alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
</body>
</html>
案例二，光标坐标
<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>
</body>
</html>
案例三，屏幕坐标
<html>
<head>
<script type="text/javascript">
function coordinates(event)
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p>
在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。
</p>
</body>
</html>
案例四，事件类型
<html>
<head>
<script type="text/javascript">
function getEventType(event)
{
alert(event.type);
}
</script>
</head>
<body onmousedown="getEventType(event)">
<p>在文档中点击某个位置。消息框会提示出被触发的事件的类型。</p>
</body>
</html>
Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
事件句柄 (Event Handlers)
| 属性 | 此事件发生在何时... |
|---|---|
| onabort | 图像的加载被中断。 |
| onblur | 元素失去焦点。 |
| onchange | 域的内容被改变。 |
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onerror | 在加载文档或图像时发生错误。 |
| onfocus | 元素获得焦点。 |
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
| onload | 一张页面或一幅图像完成加载。 |
| onmousedown | 鼠标按钮被按下。 |
| onmousemove | 鼠标被移动。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseup | 鼠标按键被松开。 |
| onreset | 重置按钮被点击。 |
| onresize | 窗口或框架被重新调整大小。 |
| onselect | 文本被选中。 |
| onsubmit | 确认按钮被点击。 |
| onunload | 用户退出页面。 |
鼠标 / 键盘属性
| 属性 | 描述 |
|---|---|
| altKey | 返回当事件被触发时，"ALT" 是否被按下。 |
| button | 返回当事件被触发时，哪个鼠标按钮被点击。 |
| clientX | 返回当事件被触发时，鼠标指针的水平坐标。 |
| clientY | 返回当事件被触发时，鼠标指针的垂直坐标。 |
| ctrlKey | 返回当事件被触发时，"CTRL" 键是否被按下。 |
| metaKey | 返回当事件被触发时，"meta" 键是否被按下。 |
| relatedTarget | 返回与事件的目标节点相关的节点。 |
| screenX | 返回当某个事件被触发时，鼠标指针的水平坐标。 |
| screenY | 返回当某个事件被触发时，鼠标指针的垂直坐标。 |
| shiftKey | 返回当事件被触发时，"SHIFT" 键是否被按下。 |
IE 属性
除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：
| 属性 | 描述 |
|---|---|
| cancelBubble | 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。 |
| fromElement | 对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。 |
| keyCode | 对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 |
| offsetX,offsetY | 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。 |
| returnValue | 如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。 |
| srcElement | 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。 |
| toElement | 对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。 |
| x,y | 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。 |
标准 Event 属性
下面列出了 2 级 DOM 事件标准定义的属性。
| 属性 | 描述 |
|---|---|
| bubbles | 返回布尔值，指示事件是否是起泡事件类型。 |
| cancelable | 返回布尔值，指示事件是否可拥可取消的默认动作。 |
| currentTarget | 返回其事件监听器触发该事件的元素。 |
| eventPhase | 返回事件传播的当前阶段。 |
| target | 返回触发此事件的元素（事件的目标节点）。 |
| timeStamp | 返回事件生成的日期和时间。 |
| type | 返回当前 Event 对象表示的事件的名称。 |
标准 Event 方法
下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：
| 方法 | 描述 |
|---|---|
| initEvent() | 初始化新创建的 Event 对象的属性。 |
| preventDefault() | 通知浏览器不要执行与事件关联的默认动作。 |
| stopPropagation() | 不再派发事件。 |
Javascript防冒泡事件与Event对象的更多相关文章
- javascript事件与event对象的属性
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- 初始js闭包&事件的冒泡和捕获&EVENT对象
一.初识闭包 function a(){ var n = 0; this.inc = function () { n++; console.log(n); }; } var ...
- dom事件与event对象总结
1 事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间. tips:js和xhtml的交互是通过当用户或浏览器操作网页时发生的事件来处理的. 1.1 事件流:即事件的顺序. 事件 ...
- 添加事件及Event对象的兼容写法
一.事件流 事件流描述的是从页面中接受事件的顺序. IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流 1.事件冒泡 事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点) ...
- 事件的event对象基本解释
事件流: 描述的是在页面中接受事件的顺序主要分为两种: 事件冒泡.事件捕获 事件event对象:1. type 获取事件类型2. target获取事件目标3. stopPropagation() 阻止 ...
- Javascript技术之详尽解析event对象
描述event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等.event对象只在事件发生的过程中才有效.event的某些属性只对特定的事件有意义.比如,fromEleme ...
- java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）
1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...
- JavaScript阻止冒泡事件
事件兼容 event = event ? event : window.event; js停止冒泡· window.event? window.event.cancelBubble = true : ...
- javascript中的事件Event
一.事件流 1.事件流:描述的是从页面中接受事件的顺序 IE的事件流是事件冒泡流,Netscape的事件流是事件捕获流. 2.事件冒泡 IE的事件流叫做事件冒泡(event bubbing),即事件开 ...
随机推荐
- 2016.03.27,英语,《Vocabulary Builder》Unit 06
equ: from Latin aequus, meaning 'equal', equalize:使相等; equivalent:[ɪ'kwɪvələnt], A is equivalent to ...
- 16.unix网络编程一卷 unp.h
unix网络编程 --ubuntu下建立编译环境 1.安装编译器,安装build-essential sudo apt-get install build-essential 2.下载本书的头文件 下 ...
- Qt-信号和槽-1对1
前言:信号和槽是Qt的核心机制,窗体和控件对象之间的沟通一般都使用信号和槽. 对于部件有哪些信号和槽,可以查看help文档. 一.使用自定义槽 1.1 新建工程 新建工程,新建Widget类(基于QW ...
- POJ 1128 Frame Stacking 拓扑排序+暴搜
这道题输出特别坑.... 题目的意思也不太好理解.. 就解释一下输出吧.. 它让你 从下往上输出. 如果有多种情况,按照字典序从小往大输出... 就是这个多种情况是怎么产生的呢. 下面给一组样例. 很 ...
- Spark的数据存储（十九）
Spark本身是基于内存计算的架构,数据的存储也主要分为内存和磁盘两个路径.Spark本身则根据存储位置.是否可序列化和副本数目这几个要素将数据存储分为多种存储级别.此外还可选择使用Tachyon来管 ...
- Kafka.net使用编程入门
最近研究分布式消息队列,分享下! 首先zookeeper 和 kafka 压缩包 解压 并配置好! 我本机zookeeper环境配置如下: D:\Worksoftware\ApacheZookeep ...
- ASP.NET中各种缓存技术的特点及使用场景
对于一些不经常改变却经常被request的数据,我们喜欢将它们缓存在内存.这样用户请求时先到缓存中去取,如果缓存中没有,再去数据库拿,提高响应速度.缓存一般实现在BLL,这样可以与DAL分离,更换数据 ...
- struts2学习之基础笔记5
第十章 Struts 2的输入校验 1 Struts 2 输入校验原理 a . 分类 validate()方法校验 b . validation框架校验 2 valibate()方法校验实现 步骤 ...
- 一个javascript面试题解析
; function fn(){ console.log(this.length); } var obj = { length: , method: function (fn) { fn(); // ...
- Xml实现图片旋转
1. 需求:不使用Java代码,实现旋转图片动画 2.实现:使用Progressbar控件 3. anim/anim_loading.xml <?xml version="1.0&qu ...