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 ...
随机推荐
- java 面试,如何提升自己的实力，摘自 java web轻量级开发面试教程
本内容摘自 java web轻量级开发面试教程 其中有一段讲述到了实习经验对找工作的帮助 1.2.2大学阶段的实习经验能帮到你 一般公司在筛选简历时,一个非常重要考察的要点是相关经验的工作年限,说一个 ...
- 使用Dev中的GridView进行数据增删操作
使用OracleHelper(一个C#操作Oracle数据库的工具类),连接的打开关闭全部交给OracleHelper去做. 进行增加数据信息时,新开增加数据信息的窗口,并且接受窗口的返回值,如果 ...
- 关于transient和static的序列化和反序列化
做java开发有段时间了,最近没那么忙了,抽了点时间看了下java的源码 . 在读源码的时候看到了一个 transient 修饰的变量 ,字面意思是瞬变的.在以前的开发过程中也没用到过这个修饰语,查了 ...
- 专业运维配的vsftpd.conf
需要另外写userlist,下面的配置文件可以参考,这是使用云镜像市场的全能java环境装的机. [root@VM_1_202_centos vsftpd]# cat vsftpd.conf # Ex ...
- GUI与UI的区别
GUI 图形用户界面(**Graphical User Interface**,简称 GUI,又称图形用户接口)是指采用图形方式显示的计算机操作用户界面. 与早期计算机使用的命令行界面相比,图形界面对 ...
- python pip升级失败
接上篇,使用命令:python -m pip install --upgrade pip 发现pip升级时报错,无法升级 解决方法: 1.使用如下命令,查看具体失败原因: pip install -- ...
- Python金融行业必备工具
有些国外的平台.社区.博客如果连接无法打开,那说明可能需要"科学"上网 量化交易平台 国内在线量化平台: BigQuant - 你的人工智能量化平台 - 可以无门槛地使用机器学习. ...
- python appium 操作app
下面是一些Python脚本中操作app的用法: 检查app安装情况(返回true/false), driver.is_app_installed(package_name) 安装app driver. ...
- eclipse创建的maven项目无法部署到tomcat
今天在eclipse中创建了个maven项目,想运行起来看看,发现代码开发完成后无法发布到tomcat. 解决办法如下: 第一种: 选中项目-右键属性-Project Facets 勾选上面三项并选择 ...
- ROS学习记录（一）————创建简单的机器人模型smartcar
这是我在古月居上找的(http://www.guyuehome.com/243),但直接运行的话,没办法跑起来,我也是查了好多博客和日志,才实现最后的功能的,所以,记录下来,以备后用吧,也欢迎其他和我 ...