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 ...
随机推荐
- Win10家庭版设置桌面右键更换桌面壁纸
Win10家庭版设置桌面右键更换桌面壁纸.. ------------------------- 这是设置之前的右键快捷菜单.. ------------------------- 开始设置:右键桌面 ...
- hdu 6171---Admiral(双向搜索)
题目链接 Problem Description Suppose that you are an admiral of a famous naval troop. Our naval forces h ...
- 装饰模式(decorator)
意图: 动态地给一个对象添加一些额外的职责,就增加功能而言,Decorator模式相比生成子类模式更为灵活 动机: 有时我们希望给某个对象而不是整个类添加一些功能.例如,一个图形用户界面工具箱允许你对 ...
- 电源库（Sources）
- jquery 的 each 方法中 return 的坑
jquery 的 each 方法中 return 的坑 Chapter 0 在项目中使用 jquery 的 each 方法时想在 each 的循环中返回一个布尔类型的值于是掉进一个坑中... Chap ...
- 模仿Spring实现注解注入
写这个极其蛋疼,我一直在想我们用SSM写项目时,写Service和Controller的时候,会给Service和Controller私有属性,比如Service需要dao,Controller需要S ...
- LVDS/RGB转EDP稳定方案----NCS8801S
目前山寨平板市场已经进入白热化,同质化的竞争.厂商的利润被压得非常的薄.一味的价格战肯定会带来行业洗牌.差异化是许多厂商的选择,而其中一条重要的路子,就是采用高分辨率的down-grade屏.如苹果的 ...
- 容器在 Weave 中如何通信和隔离？- 每天5分钟玩转 Docker 容器技术（65）
上一节我们分析了 Weave 的网络结构,今天讨论 Weave 的连通和隔离特性. 首先在host2 执行如下命令: weave launch 192.168.56.104 这里必须指定 host1 ...
- java初步—参数的值传递
校招季,本人匆匆忙忙地参加各种宣讲会,几次笔试下来都遇到同一个题目,而且全都错在同一想法上,方知自己的基础实在不太牢固,因此特别写在博客上提醒自己要脚踏实地地学习!不多说了,题目如下: public ...
- LVS之DR模式实战及高可用性
author:JevonWei 版权声明:原创作品 LVS-DR实现同网段调度web模式 拓扑环境 网络环境 RS1 RIP 192.168.198.138/24 VIP 192.168.198.10 ...