JavaScript中原生事件
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中原生事件的更多相关文章
- 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
基本介绍 XmlHttpRequest XmlHttpRequest是JavaScript中原生的,历史悠久的一种发送网络请求的方案. 基本上所有前端框架对于网络请求的部分都是基于它来完成的. 在本章 ...
- javascript 中的事件机制
1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...
- JavaScript中的事件对象
JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...
- JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获
先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...
- 了解javascript中的事件(二)
本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...
- javascript中onclick事件能调用多个方法吗
Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了
- 深入理解javascript中的事件循环event-loop
前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- java基础66 JavaScript中的事件、localtion对象、screen对象(网页知识)
1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...
随机推荐
- FORTIFY_SOURCE
In recent years Linux distributions started treating security more seriously. Out of many security f ...
- [bzoj2599][IOI2011]Race_树上点分治
Race bzoj-2599 题目大意:询问一颗树上最短的.长度为k的链,边有边权,n个节点. 注释:$1\le n \le 2\cdot 10^5$,$1\le k \le 10^6$. 想法:树上 ...
- Spring MVC 入门(二)
前言 上一篇讲到了 Spring MVC 的基本请求处理流程,本篇主要说一说如何使用 Spring MVC 来构建一个简单例子. 大致步骤如下 1.新建项目 2.导入相应 jar 包 (Spring ...
- N天学习一个Linux命令之ln
前言有时候同一个文件想创建多个别名,这个时候可以使用链接文件代替 用途对文件或者目录创建链接,默认创建的是硬链接 硬链接Linux底层文件系统由超级数据块,目录树对象,inode索引节点对象,文件对象 ...
- N天学习一个Linux命令之帮助命令:man
前言 工作中每天都在使用常用的命令和非常用的命令,忘记了用法或者参数,都会bing一下,然后如此循环.一直没有真正的系统的深入的去了解命令的用法,我决定打破它.以前看到有人,每天学习一个linux命令 ...
- Clojure:日期操作方法
;; 日期格式转换 (def df (java.text.SimpleDateFormat. "yyyy-MM-dd hh:mm:ss")) ;; 字符串转换到日期 (defn s ...
- 启动VIP报CRS-1028/CRS-0223致使VIP状态为UNKNOWN故障分析与解决
CRS版本号为10.2.0.4 1.VIP State为UNKNOWN [root@XXdb1 ~]# crs_stat -t Name Type Target ...
- 每日总结-05-19(AC自己主动机结束)
今天下午讨论了一下校赛的题,最终最终拍板,把校赛的题目定下来了. 然后今天A掉了4个AC自己主动机的题目.最终完毕了AC自己主动机专辑里面的15个题.至此AC自己主动机全然结束. 明天开启线段树专题. ...
- Spring+Mybatis之登录功能demo
其实工作之后就没有用过Spring+Mybatis的框架了,因为公司有一个自己开发的框架,讲道理,其实这个与Spring+Mybatis整合很是神似.当然性能上还是比不上Spring+Mybatis所 ...
- SQL Source Control for teams
You'll use SQL Source Control differently depending on which development model you're using: 不同的模式有不 ...