事件冒泡和事件默认行为

1.原生态事件

取得原生态的事件对象:

<button onclick="get(event)" type="button">tijiao</button>

阻止事件冒泡:

1         //如果提供了事件对象,则这是一个非IE浏览器
2         if ( e && e.stopPropagation )
3                //因此它支持W3C的stopPropagation()方法
4                e.stopPropagation();
5         else
6             //否则,我们需要使用IE的方式来取消事件冒泡
7             e.cancelBubble = true;

阻止默认行为:

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

事件目标对象:

1         var target = null;
2         if(e && e.srcElement) {
3            //ie支持,ie10也包含属性target了。
4            target =  e.srcElement;
5         } else {
6             target = e.target;
7         }

2.Jquery事件

jquery对事件进行了封装,需要区分原生态event事件和jquery事件。jquery事件可以直接调用jquery api方法。

阻止默认行为:

 $("a").click(function(event) {
               event.preventDefault();
               $(‘<div/>‘).append(‘default ‘ + event.type + ‘ prevented‘).appendTo(‘#log‘);
             });

阻止事件冒泡:

1 $("p").click(function(event){
2     event.stopPropagation();    // do something
3   });  

事件冒泡和事件默认行为

时间: 2024-08-01 12:12:43

事件冒泡和事件默认行为的相关文章

JS事件——禁止事件冒泡和禁止默认事件

Event 对象Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.事件通常与函数结合使用,函数不会在事件发生前被执行! 一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,即事件由子元素向祖先元素传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达

javascript事件之: 事件冒泡, 事件捕获 ,阻止默认事件

谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 冒泡篇: 先来看一段实例: js: var $input = document.getElementsByTagName("input")[0]; var $div = document.getElementsByTagName("div")[0]; var $body = document.getElementsByTagName("

这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念--事件和事件流 事件指的是用户或浏览器自身执行的某种动作,又称为原始事件模型,例如onclick等 事件流指的是 从页面中接收事件的顺序,也就是说当一个事件产生时,这个事件的传播过程就叫做事件流. 事件冒泡: 从事件目标开始 一级级向上冒泡,到document为止--从里到外 IE 5:div--body--document; I

JS事件(事件冒泡和事件捕获)

事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener().他们都接收三个参数:要处理的事件名.作为事件处理程序的函数和布尔值(事件处理的时候)[true:事件捕获时;false:事件冒泡时] DOM中的事件对象: type属性 用于获取事件类

看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序

最近一个项目基于3维skyline平台,进行javascript二次开发.对skyline事件的设计真是无语至极,不堪折磨啊!抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素

JavaScript中的事件冒泡?事件传播的解释

注:本文来源  可译网 事件冒泡是你在学习javaScript旅途中遇到的一个术语,它涉及到当一个元素被另一个元素嵌套时调用事件处理的顺序,并且两个元素注册了同一个事件(例如,点击事件). 但是事件冒泡仅仅是难题的一部分.它经常和事件捕获和事件传播一起被提及,并且对这三个概念有着很深的了解是学习javaScript事件必不可少的,例如,假如你想实现事件委托. 在这篇文章中,我会解释这些术语,并展示它们如何组合在一起.我还将向您展示如何对JavaScript事件流的基本了解可以让您对应用程序进行细

javascript中的事件冒泡、事件捕获和事件执行顺序

谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响.这两种事件流分别是捕获和冒泡.和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选择实现了捕获事件流,微软则实现了冒泡事件流.幸运的是,W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式. 1事件传播--冒泡与捕

事件冒泡和事件捕获

1.什么是事件冒泡 在页面上可以有多个事件,也可以多个元素响应同一个事件.假设页面上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时<body>元素也绑定了click事件,完整代码如下: <script> $(function(){ //为span元素绑定click事件 $("span").bind("click",function(){ var txt=$("#msg").html()+&q

js 事件冒泡与事件捕获

一.事件冒泡 事件冒泡是指在事件发生过程中先从目标节点开始执行,并一层一层的相父节点依次查询直到document,并执行相同事件的过程. btn1.addEventListener('click',function(e){ //true 为事件捕获,false 为事件冒泡 //false为默认方式,冒泡方式执行 //点击btn1时,如果是事件冒泡,则先执行btn1上的click事件,然后执行父元素div1上的click事件 //如果是事件捕获,则先执行父元素上的click事件,然后执行btn1上