javascript DOM事件总结
1 <html>
2 <title>事件</title>
3 <meta charset="utf-8"/>
4 <body>
5 <div id="box">
6 <input type="button" value="按钮" id="btn" onclick="showMes()"/>
7 <input type="button" value="按钮2" id="btn2"/>
8 <input type="button" value="按钮3" id="btn3"/>
9 <a href="event.html" id="go" target="_blank">跳转</a>
10 </div>
11 </body>
12 </html>
13 <script>
14 /**
15 * 非IE
16 * event.type 获取事件的类型
17 * event.target属性 获取事件的目标
18 * event.stopPropagation()方法;//阻止事件冒泡
19 * event.preventDefault()方法;//阻止事件默认行为
20 *
21 * IE
22 * event.type 获取事件的类型
23 * event.srcElement
24 * event.cancelBubble属性阻止事件冒泡
25 * 设置为true为阻止冒泡，设置为false不阻止冒泡
26 * returnValue=false 阻止事件默认行为
27 *
28 */
29 function showMes(event){
30 event = event || window.event;
31 var ele = event.target || event.srcElement;
32 alert(ele.nodeName);
33 }
34
35 function showbox(){
36 alert('这里放盒子');
37 }
38
39 function stopGoto(event){
40 //event.type 获取事件的类型
41 //event.target属性 获取事件的目标
42 event.stopPropagation();//阻止事件冒泡
43 event.preventDefault();//阻止事件默认行为
44 }
45
46 var btn2 = document.getElementById("btn2");
47 var btn3 = document.getElementById("btn3");
48 var go = document.getElementById("go");
49 btn2.onclick = function(){
50 alert('通过DOM0级添加事件');
51 }
52 btn2.onclick = null;
53
54 //DOM2级事件
55 var eventUtil = {
56
57 //添加句柄
58 addHandler:function(element,type,handler){
59 if(element.addEventListener){
60 element.addEventListener(type,handler,false);
61 }else if(element.attachEvent){
62 element.attachEvent('on'+type,handler);
63 }else{
64 element['on'+type] = handler;
65 }
66 },
67 //删除句柄
68 removeHandler:function(element,type,handler){
69 if(element.removeEventListener){
70 element.removeEventListener(type,handler,false);
71 }else if(element.detachEvent){
72 element.detachEvent('on'+type,handler);
73 }else{
74 element['on'+type] = null;
75 }
76 },
77
78 getEvent:function(event){
79 return event ? event : window.event;
80 },
81
82 getElement:function(event){
83 return event.target || event.srcElement;
84 },
85
86 preventDefault:function(event){
87 if(event.preventDefault){
88 event.preventDefault();
89 }else{
90 event.returnValue = false;
91 }
92 },
93
94 stopPropagation:function(event){
95 if(event.stopPropagation){
96 event.stopPropagation();
97 }else{
98 event.cancelBubble = true;
99 }
100 }
101 };
102
103 eventUtil.addHandler(btn3,"click",showMes);
104 //eventUtil.removeHandler(btn3,"click",showMes);
105 eventUtil.addHandler(box,"click",showbox);
106 eventUtil.addHandler(go,"click",stopGoto);
107 </script>
javascript DOM事件总结的更多相关文章
- 走进javascript——DOM事件
DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...
- JavaScript Dom 事件
JavaScript Dom 事件 对于事件需要注意的要点: // this标签当前正在操作的标签. this // event封装了当前事件的内容. even 常用事件 // 鼠标单击.触发事件 ...
- JavaScript DOM 事件模型
JavaScript DOM 事件模型 JavaScript 是基于面向对象和事件驱动的一门语言,事件模型是 DOM 中至关重要的内容,理解事件驱动机制.事件反馈.事件冒泡.事件捕获以及事件委托能帮助 ...
- JavaScript DOM事件模型
早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...
- JavaScript DOM–事件操作
事件 注册事件 给元素添加事件,为注册事件或者绑定事件 注册事件两种方式 传统方式 监听事件方式 事件监听 addEventListener() 事件监听 (IE9以上) eventTarget.ad ...
- JavaScript -- DOM事件
什么是事件 事件就是文档或浏览器窗口中发生的一些特定的交互瞬间.比如你在网页上见到的鼠标点击一个按钮,按钮的颜色发生了变化,就是因为这个标签绑定了点击事件 鼠标事件 onload:页面加载时触发 on ...
- JavaScript DOM事件对象的两个小练习 | 学习内容分享
Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 本文用于记录个人学习过程 ...
- 从八道面试题看JavaScript DOM事件机制
As we all know,事件机制其实很简单,无非冒泡和捕获这两点,笔者不再赘述,网上相关文章一大堆,下面让我们直接看面试题 题目一到七,统一设置css .test2 { height: 50px ...
- DOM事件机制进一步理解
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- RedHat 7 常用命令总结
Linux RedHat 7常用命令总结... ----------------------- 征服Linux从终端开始 ------------------------------------- 在 ...
- 程序员的自我修养五Windows PE/COFF
5.1 Windows的二进制文件格式PE/COFF PE文件格式事实上与ELF同根同源,它们都是由COFF格式发展而来. 5.2 PE前身——COFF 在win下,Command Prompt fo ...
- WeQuant交易策略—NATR
策略名称:NATR策略关键词:规范真实波幅.价格突破. NATR,是对ATR指标进行了标准化.主要应用于了解价格的震荡幅度和节奏,在窄幅整理行情中用于寻找突破时机.本策略在当前价格高于之前价格一定倍数 ...
- SpringMVC基础-@RequestMapping
@RequestMapping @RequestMapping是一个用来处理请求地址映射的注解 可用于类或方法上. 类定义处:提供初步的请求映射信息.相当于当前 WEB 应用的根目录 方法处: ...
- TCON板新选择--NCS8807 LVDS转mLVDS芯片
NCS8807 LVDS-to-mLVDS w/ Scaler (4K TCON w/ Scaler) General Description NCS8807 is an LVDS 4K TCON w ...
- 将位图导入为ArcGIS面要素
本文根据笔者经验,介绍一种从位图图像导入ArcGIS称为要素的方法.这种方法适用于从现有出版物图片中获取地理信息的情况. 首先要说明的是,从位图导入要素是非常非常不精确的方式,如果有其它数据来源,那么 ...
- Windows环境下最新OpenCV和Contribute代码的联合编译
解决这个问题,目的在于获得并使用最新的完全版本的代码,主要方法是对CMake能够熟练使用,并且对编译等基础支持有所了解. 一.工具的准备 1 tortoisegit www.tortoisegit.o ...
- Java虚拟机的内存结构
我们都知道虚拟机的内存划分了多个区域,并不是一张大饼.那么为什么要划分为多块区域呢,直接搞一块区域,所有用到内存的地方都往这块区域里扔不就行了,岂不痛快.是的,如果不进行区域划分,扔的时候确实痛快,可 ...
- mysql中int(10)与int(11)有什么区别吗？
先来看下面的图片 声明字段是int类型的那一刻起,int就是占四个字节,一个字节8位,也就是4*8=32,可以表示的数字个数是2的32次方(2^32 = 4 294 967 296个数字). 4 29 ...
- 跨浏览器tab页的通信解决方案尝试
目标 当前页面需要与当前浏览器已打开的的某个tab页通信,完成某些交互.其中,与当前页面待通信的tab页可以是与当前页面同域(相同的协议.域名和端口),也可以是跨域的. 要实现这个特殊的功能,单单使用 ...