DOM0事件模型:

所有浏览器都支持,只能注册一种事件

1.绑定:

document.getElementById("id").onclick = function(e){};

解除绑定:

document.getElementById("id").onclick=null;

2.绑定:

<div id="test" class="test" onclick="func();" ></div>

DOM2事件模型:

支持同一个dom注册多种事件,增加了捕获和冒泡的概念

捕获:某个元素触发了某个事件,最先得到通知的是window,然后是document,依次而入,直到真正触发事件的那个元素(目标元素)为止

冒泡:事件会从目标元素开始起泡,再依次而出,直到window对象为止

绑定:

addEventListener(事件名称,事件回调,捕获/冒泡);false为冒泡,true为捕获

var x=document.getElementById("id");
if(x.addEventListener){
addEventListener("click",function(e){},false);//IE8及IE8以下版本不支持
}else if(x.attachEvent){
x.attachEvent("onclick",function(e){}); //IE8及IE8以下版本支持
}

取消绑定:

e.removeEventListener(event_type,event_name,捕获/冒泡);
e.detachEvent(event_type,event_name);

 阻止事件冒泡:

    假如外层div和内层div都是注册的冒泡事件,点击内层div时,一定是内层div事件先执行,原理相同。

细心的读者会发现,对于div嵌套的情况,如果点击内层的div,外层的div也会触发事件,这貌似会有问题!

点击的明明是内层div,但是外层div的事件也触发了,这的确是个问题。

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

 阻止默认事件:

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

return false:

javascript的return false只会阻止默认行为,而是用jQuery的话则既阻止默认行为又防止对象冒泡。

JavaScript中原生事件的更多相关文章

  1. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax

    基本介绍 XmlHttpRequest XmlHttpRequest是JavaScript中原生的,历史悠久的一种发送网络请求的方案. 基本上所有前端框架对于网络请求的部分都是基于它来完成的. 在本章 ...

  2. javascript 中的事件机制

    1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...

  3. JavaScript中的事件对象

    JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...

  4. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

  5. 了解javascript中的事件(二)

    本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...

  6. javascript中onclick事件能调用多个方法吗

    Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了

  7. 深入理解javascript中的事件循环event-loop

    前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...

  8. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  9. java基础66 JavaScript中的事件、localtion对象、screen对象(网页知识)

    1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...

随机推荐

  1. hdu 4786 最小生成树与最大生成树

    /* 题意 :有一些边权值为1和0,判断是否存在一个生成树使得他的总权值为一个斐波那契数. 解法:建立一个最小生成树向里面加权值为1的边替换为0的边,保证原来的联通.因为权值为1,可直接求出最大生成树 ...

  2. 从SQL Server到MySQL,近百亿数据量迁移实战

    从SQL Server到MySQL,近百亿数据量迁移实战 狄敬超(3D) 2018-05-29 10:52:48 212 沪江成立于 2001 年,作为较早期的教育学习网站,当时技术选型范围并不大:J ...

  3. nyoj_212_K尾相等数_210402272239

    K尾相等数 时间限制:3000 ms  |  内存限制:65535 KB 难度:1   描述 输入一个自然数K(K>1),如果存在自然数M和N(M>N),使得K^M和K^N均大于等于100 ...

  4. Monitor和Lock以及区别

    1.Monitor.Enter(object)方法是获取锁,Monitor.Exit(object)方法是释放锁,这就是Monitor最常用的两个方法,当然在使用过程中为了避免获取锁之后因为异常,致锁 ...

  5. ZooKeeper的配置文件优化性能(转)

    一.前言 ZooKeeper的功能特性通过ZooKeeper配置文件来进行控制管理( zoo.cfg配置文件). ZooKeeper这样的设计其实是有它自身的原因的.通过前面对ZooKeeper的配置 ...

  6. Javascript如何实现继承?

    前言 我这篇文章会误人子弟,我把继承跟构造函数实例化搞混了,汗!要想搞清楚JS的继承机制,看下大牛写的文章:http://www.cnblogs.com/dolphinX/p/3307903.html ...

  7. shell EOF注意点

    当sqlplus与shell交互的时候我们这么用 su - oracle -c "sqlplus / as sysdba<<EOF select * from gv($insta ...

  8. hdu 1874 畅通project续

    最短路问题,尽管a!=b,可是同一条路測评数据会给你非常多个.因此在读入的时候要去最短的那条路存起来.........见了鬼了.坑爹 #include<iostream> #include ...

  9. MyBatis -- 对表进行增删改查(基于注解的实现)

    1.MyBatis对数据库表进行增/删/改/查 前一篇使用基于XML的方式实现对数据库的增/删/改/查 以下我们来看怎么使用注解的方式实现对数据库表的增/删/改/查 1.1  首先须要定义映射sql的 ...

  10. hdu 4768 异或运算

    http://acm.hdu.edu.cn/showproblem.php?pid=4768 貌似非常多人是用的二分 可是更好的做法貌似还是异或 对于第k个人.假设他接到偶数个传单.那么异或的结果还是 ...