浅谈JavaScript的事件_javascript技巧

1、事件流

    事件流描述的是从页面中接收事件的顺序。但是IE提出的是冒泡流,而Netscape Communicator提出的是捕获流。
JavaScript事件流

2、事件冒泡(event bubbling)

    事件开始由最具体的元素(嵌套层次最深的那个节点)接收,然后逐级向上传播为较不为具体的节点(文档)。如下:

复制代码 代码如下:

<html>
    <head>
        <title>事件冒泡</title>
    </head>
    <body>
        <div id="myDiv">点击我</div>
    </body>
</html>
window.onload = function(){
    var obj = document.getElementById("test");
    obj.onclick = function(){
        alert(this.tagName);
    };
    document.body.onclick = function(){
        alert(this.tagName);
    };
    document.documentElement.onclick = function(){
        alert(this.tagName);
    };
    document.onclick = function(){
        alert("document");
    };
    window.onclick = function(){
        alert("window");
    }
};

事件传播顺序:div——>body——>html——>document

注意:
    现代所有浏览器都支持冒泡事件,但实现还有一些差别。IE5.5及更早版本中的事件冒泡会直接从body跳到document(不执行html)。Firefox、Chrome和Safari则将事件一直冒泡到window对象。

3、停止事件冒泡和取消默认事件

 a. 获取事件对象

复制代码 代码如下:

function getEvent(event) {
// window.event IE
// event 非IE
return event || window.event;
}

 b 功能:停止事件冒泡 

复制代码 代码如下:

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

 c. 阻止浏览器的默认行为

复制代码 代码如下:

function stopDefault( e ) {
     // 阻止默认浏览器动作(W3C)
     if ( e && e.preventDefault ) {
         e.preventDefault();
     } else {
        // IE中阻止函数器默认动作的方式
        window.event.returnValue = false;
    }
    return false;
}

时间: 2024-11-10 01:13:28

浅谈JavaScript的事件_javascript技巧的相关文章

浅谈JavaScript 浏览器对象_javascript技巧

window window对象不但充当全局作用域,而且表示浏览器窗口. window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度.内部宽高是指除去菜单栏.工具栏.边框等占位元素后,用于显示网页的净宽高.还有一个outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高. 补充: 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:

浅谈Javascript数组(推荐)_javascript技巧

在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. 首先,大概说说数组的基本用法. 数组,即Array类型,是开发中最常用的类型之一,javascript中的数组和其他语言最大的区别就是每

浅谈javascript函数式编程_javascript技巧

函数式编程,属于编程范式的一种 1 函数是第一公民,可以返回值,也可以作为其他函数的参数 //console是一个函数 function con(v){ console.log(v) } // execute 也是一个函数 function execute(fn){ fn(1) } //将con函数作为参数传进execute函数 execute(con) // 1 2 接近自然语言的写法   晓池吃完饭然后就去洗澡 可以表现为eat().bathe() // 吃饭函数 function eat(

浅谈JavaScript字符串拼接_javascript技巧

在JavaScript中会经常遇到字符串拼接,但是如果要拼接的字符串过长就比较麻烦了. 如果在一行的话,可读性太差:如果换行的话,会直接报错. 现在就来介绍几个JavaScript拼接字符串的几个小技巧(主要针对字符串过长的情况). 1. 字符串相加(+) var empList = ' <li data-view-section="details">'+ '<span>Hello world</span>'+ '</li>'; 2.利用

浅谈JavaScript异常处理语句_javascript技巧

程序运行过程中难免会出错,出错后的运行结果往往是不正确的,因此运行时出错的程序通常被强制中止.运行时的错误统称为异常,为了能在错误发生时得到一个处理的机会,JavaScript提供了异常处理语句.包含try-catch.try-catch-finally和throw. try-catch语句 try{ tryStatements } catch(exception){ catchStatements } 参数说明: tryStatements:必选项.可能发生错误的语句序列. exception

浅谈Javascript数组索引_javascript技巧

从题目说起,之所以是不完全,是因为有些东西比如数组的方法怎么用这个我都不打算讲,因为那个看一下都会,下面讲的都是我觉得重要的,只关于数组对象本身.另外,由于我的Javascript实战经验不多,所以可能有些东西没涉及到,有些内容说的有误,请发现问题的同学不吝指教. 首先,Javascript(下称js)的数组定义,这不是重点,简单说下,下面两句都是创建一个空的数组: var arr = []; var arr2 = new Array(); // 不写new也可以. 在创建之后,你就可以随时往数

浅谈JavaScript之事件绑定_javascript技巧

其实没有什么新的知识点,只是为了方便其他有需要的朋友们翻阅,对自己而言也算是一个积累,所以只能算是闲谈 JavaScript,老鸟们可以尽情飘过.在进入正题之前,先提个问题热热身吧.现在有如下 HTML 结构: 复制代码 代码如下: <div id="wrap"> <input type="button" value="按钮一" /> <input type="button" value=&quo

浅谈js原生拖放_javascript技巧

可拖动 网页中的图像.链接和文本是浏览器默认可以被拖动的,HTML5 为所有的HTML元素都提供了一个draggable属性,当这个属性的值为true的时候,元素被视为可以拖动. 拖动图像或者链接时,将鼠标放在图像或者链接上,按住鼠标不放就可以拖动它.拖动文本时,要先选中文本,然后可以像拖动图像一样拖动选中的文本. 被拖动的元素事件 拖动图片时依次触发:drapstart,drag,dragend事件.这三个事件的目标都是被拖动的元素. 按下鼠标键并开始移动鼠标时,会在被拖放元素上触发drags

浅谈JavaScript之事件绑定

关于 JavaScript 的事件绑定在网上已经有不少相关的资料了,今天这篇文章也是在被同事问及的时候才顺便把它记录下来,算是 JavaScript 事件绑定中的一个小技巧,如果能在工作中善加利用,会有出其不意的效果   其实没有什么新的知识点,只是为了方便其他有需要的朋友们翻阅,对自己而言也算是一个积累,所以只能算是闲谈 JavaScript,老鸟们可以尽情飘过. 在进入正题之前,先提个问题热热身吧.现在有如下 HTML 结构: 复制代码 代码如下: <div id="wrap"