JS 事件对象和事件冒泡

1、事件对象

js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源、事件发生时的鼠标位置、事件按键等。

事件对象的获取方法:

IE中可以window.event直接获取,而Firefox中则不可以,可通过如下方法获取:

1)var event = window.event || arguments.callee.caller.arguments[0];

2)通过参数传。function(e) { var event = window.event || e; }

2、事件源

事件源即事件发生所在的元素(是最里层元素),在IE中用event.srcElement获取,在Firefox中用event.target获取。兼容性代码如下:

var event = window.event || arguments.callee.caller.arguments[0];

var targetObj = event.srcElement || event.target;

  

3、事件冒泡

  

在默认情况下,发生在一个子元素上的单击事件(或者其他事件),如果在其父级元素绑定了一个同样的事件,此时点击子元素,click事件会首先被子元素捕获,执行绑定的事件程序,之后会被父级元素捕获,再次激发一段脚本的执行,这就是所谓的“事件冒泡”。

但有的时候,在一个子元素上处理完单击事件后,不想触发其父元素的相同事件,则需要阻止冒泡的发生,阻止冒泡的方法如下:

在IE里使用 window.event.cancelBubble = true;

在Firefox里使用 event.stopPropagation();

兼容性代码如下所示:

var event = window.event || arguments.callee.caller.arguments[0];

if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; }

4、jQuery对DOM的事件触发具有冒泡特性,jQuery.Event对象是符合W3C标准的一个事件对象,同时jQuery.Event免去了检查兼容IE的步骤。jQuery.Event提供了一个非常简单的方法来阻止事件冒泡:event.stopPropagation();示例代码如下:

$("div").click(function(event) { event.stopPropagation(); });

但是上面方法对使用live 绑定的事件没有作用,需要一个更简单的方法阻止事件冒泡:return false;示例代码如下:

$("div").live(function() {

//do something..

return false;

});

注意:event.stopPropagation()和return false两种阻止事件冒泡的方式有一些区别:return false 不仅阻止了事件往上冒泡,而且阻止了事件本身;event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身,比如如下代码将导致单击文件浏览按钮,无法弹出文件浏览对话框。

<div id="panel">

<input type="file" id="fileBtn"/>

</div>

<script type="text/javascript">

$("#panel").click(function() {

return false;     //return false在阻止冒泡的同时也会取消当前事件本身,这将阻止文件浏览对话框弹出

});

</script>

5、阻止事件的默认行为(比如使文本输入框的键盘输入不起作用)

上面说了阻止事件冒泡,但是事件的默认行为还是会发生,只不过事件不会再往上一级节点传递。阻止事件的默认行为的方式如下:

1)原生JS的方式:

  1. //如果提供了事件对象,则这是一个非IE浏览器
  2. if (event && event.preventDefault) {
  3. //阻止默认浏览器动作(W3C)
  4. event.preventDefault();
  5. } else {
  6. //IE中阻止函数器默认动作的方式
  7. window.event.returnValue = false;
  8. }
  9. return false;

2)jQuery的方式

在上面的第4点中已经说过了,直接返回false就行

				
时间: 2024-11-16 12:13:20

JS 事件对象和事件冒泡的相关文章

js跨浏览器事件对象、事件处理程序

项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节点.事件名.事件处理函数 addHanler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false);//这里一个参数为false意为在事件冒

【2017-05-03】winform打印控件、事件对象和事件数据、MDI窗体容器

一.打印控件 第一步先把打印对象搞出来. - printDocument    打印对象(将要打印的内容放到该对象里,从该对象里取内容打印) 设置他的PrintPage事件(对于要打印的每一页触发一次) - pageSetupDialog 打印设置对话框 - printPreviewDialog 打印预览对话框 - printPreviewControl  打印预览控件. 只需要把预览对象给他设置上就好 - printDialog  打印对话框 打印界面里面是否禁用页面范围.打印到文件等从Pri

Vue2学习笔记:事件对象、事件冒泡、默认行为

1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window

JavaScript:事件对象Event和冒泡

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章 DOM操作详解 中已经讲过事件的概念.这里讲一下注册事件的两种方式,我们以onclick事件为例. 方式一:onclick 举例: <body> <button>点我</button> <script> var btn = document.getElementsByTagName("

小程序事件的介绍、事件对象、事件传值、事件冒泡和捕获

小程序在1.5版本以后,支持  bind:tap=“事件名称”  来绑定事件 catch:tap=“事件名称”    也可以用catchtap来绑定事件 还有一些几乎所有组件都有的事件: touchstart:手指开始触摸 touchmove:手指移动 touchcancel:手指触摸被打断,比如说电话来了 touchend:手指停止触摸 tap:手指触摸后马上离开  相当于js中的click点击事件 longpress:长按  且长按事件超过350毫秒 longtap:长按 超过350毫秒再离

事件对象、事件流、关于冒泡、默认行为

事件对象: 在触发事件的时候,会产生一个事件对象event,这个对象中包含了与事件相关的信息. 例如:在触发鼠标双击时,是触发了这几件事  onkeydown+onkeyup+onclick+onkeydown+onkeyup+onclick 事件流: 当HTML元素产生一个事件时,这个事件会在元素节点与根节点之后的路径传播,路径所经过的节点都会接收到这个事件,这个传播过程称为DOM事件流. DOM事件流分为冒泡事件流和捕获事件流. 事件冒泡: 当一个元素的事件被触发时,同样的事件将会在该元素的

事件对象、事件冒泡、事件捕获

事件对象:                    event:描述或者包含事件的更加详细的信息;                    event:不兼容FF;                    ev: 兼容IE9+,FF,Chrome,IE8--报undefined;                    兼容写法:var oEvent=ev||event;                    clientX:X轴的坐标                    clientY:Y轴的坐标

JS事件-对象监视事件,事件触发函数

写在前面: 一句话作为本文的核心思想:对象监视事件,事件触发函数: (一)事件 1.事件分类 (1)鼠标事件 click()                      鼠标单击 dblclick()                   鼠标双击 mouseover()             鼠标移入事件 mouseout()              鼠标移出事件 mousemove()             鼠标移动事件 mousedown()            鼠标按下事件 mous

DOM事件处理程序-事件对象-键盘事件

事件流: 事件流--描述的是从页面中接受事件的顺序 IE  ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netscape  ---事件捕获流:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. 使用事件处理程序: 1. HTML事件处理程序 <input type="button" value="按钮" id="btn" onclick=&q