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 ...
随机推荐
- yii2 Rbac使用yii命令一键建表
首先在web.php和console.php配置authmanager组件,web.php是应用配置文件,console.php是yii命令配置文件,都需要配置. 在components加入如下配置: ...
- Jquery $(this).attr和$(this).val用法示例
以下是个人心得整理,有兴趣朋友可以参考参考 $(this).attr(key); 获取节点属性名为key的值,相当于getAttribute(key)方法 $(this).attr(key,value ...
- JavaSE二次学习之标识符和编程命名相关的内容
前段时间阿里开源了<阿里巴巴 JAVA 开发手册>,里面详细叙述了有关编程命名.sql规约.工程规约等内容,作为一个初学者,只讨论一下-编程规约-的部分. 这几天又重新回去看了看JavaS ...
- Eclipse常用快捷键和调试方法
原文链接:http://my.oschina.net/u/1054538/blog/741561 常用快捷键 Eclipse最全快捷键,熟悉快捷键可以帮助开发事半功倍,节省更多的时间来用于做有意义的事 ...
- JavaScript入门（四）
一.数组 1.数组的基本概念 数组是在内存空间中连续存储的一组有序数据的集合.元素在数组中的顺序,称为下标.可以使用下标访问数组的每个元素. 2.如何声明一个数组 ①使用字面量声明:var arr = ...
- ASP.NET 给Web中的网页添加Loading进度条形式
前段时间客户提了一个需求,要求给网站中某些功能添加进度条形式,因为某些功能查询的数据量太大,经常会出现点击Search按钮,但是没有任何反应的情况,会让用户以为网站挂掉了,导致投诉的事情发生,所以客户 ...
- 利用jmeter+JAVA对RPC的单接口（dubbo接口等）进行性能测试
建立JAVA项目 建立maven项目,加入Jmeter所需要的JAR包依赖. POM.xml 加入如下: <dependency> <groupId>org.apache.j ...
- java通过freemarker导出包含富文本图片的word文档
废话不多说,进入正题! 本文重点在于:对富文本图片的导出(基础的freemarker+word模板导出这里不做详细解说哈) 参考文章:http://www.cnblogs.com/liaofeifig ...
- HDU 6185 Covering 矩阵快速幂
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6185 题意:用 1 * 2 的小长方形完全覆盖 4 * n的矩形有多少方案. 解法:小范围是一个经典题 ...
- Tomcat会话保持之session server
author:JevonWei 版权声明:原创作品 Tomcat会话保持之session server 拓扑图 环境 tomcatA 172.16.253.108 tomcatB 172.16.253 ...