基本event封装：阻止冒泡、默认事件等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="box">
<input type="button" value="按钮3" id="btn3">
<a href="http://www.sogou.com/sie?hdq=AQxRG-7004&query=addEventListener%20of%20undefined&p=99350103&oq=&ri=-2" id="go">跳转</a>
</div>
<script type="text/javascript">
var btn3 = document.getElementById('btn3');
var box = document.getElementById('box');
var id = document.getElementById('id');
function showMes(event) {
event = event || window.event; //在IE8之前要用的是window.event;
var ele = event.target || event.srcElement; //在IE8之前用的不是target而是srcElement
alert(ele.nodeName);
event.stopPropagation();
}
function showM() {
alert("RGE");
}
function stopGo(event) {
event.stopPropagation();
event.preventDefault();
}
var eventUtil = {
//给元素添加事件
addHandler: function(element, type, handler) {
if(element.addEventListener) {
element.addEventListener(type,handler,false);
} else if(element.attachEvent) {
element.attachEvent('on'+type, handler);
} else {
element['on'+type] = handler;
}
},
//给元素删除事件
removeHandler: function(element, type, handler) {
if(element.removeEventListener) {
element.removeEventListener(type,handler,false);
} else if(element.detachEvent) {
element.detachEvent('on'+type, handler);
} else {
element['on'+type] = null;
}
},
//获得兼容浏览器的事件对象
getEvent: function(event) {
return event?event:window.event;
},
//获取事件类型
getType: function(event) {
return event.type;
},
//获取时间来自哪个元素
getElement: function(event) {
return event.target || event.srcElement;
},
//阻止取消事件的默认行为
preventDefault:function(event) {
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
//阻止时间冒泡
stopPropagation: function(event) {
if(event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}
eventUtil.addHandler(btn3, 'click', showMes);
eventUtil.addHandler(box, 'click', showM);
eventUtil.addHandler(go, 'click', stopGo);
</script>
</body>
</html>
把每一个事件封装在对象里面，把每一个功能封装在方法里面
基本event封装：阻止冒泡、默认事件等的更多相关文章
- 理解阻止浏览器默认事件和事件冒泡cancelBubble
一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先 ...
- jQuery event,冒泡,默认事件用法
jQuery event,冒泡,默认事件用法 <%@ page language="java" import="java.util.*" pageEnco ...
- 在javascript中的浏览器兼容问题以及兼容浏览器汇总（默认事件，阻止冒泡，事件监听。。。）以及解决方式详解
在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级 渐进增强(progressive enhancement): 针对低版本浏览器进 ...
- js /jquery停止事件冒泡和阻止浏览器默认事件
1>js阻止冒泡事件 var el = window.document.getElementById("a"); el.onclick = function (e) { // ...
- 如何阻止浏览器的默认事件，你是否也遇到过无法阻止Google默认事件的情况( 原生JS )
如题,话不多话,我们先看怎么解决 根据不同的绑定事件的方法,我们有不同的阻止默认事件的方法 如果你不知到如何绑定事件,请查看我的上一篇文章 关于浏览器滚动的兼容性问题以及事件绑定 1.句柄绑定 只需要 ...
- js阻止浏览器默认事件
1.阻止浏览器的默认行为 function stopDefault(e) { //如果提供了事件对象,则这是一个非IE浏览器 if(e && e.preventDefault) { / ...
- javascript --- 事件冒泡与事件捕获
事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题.考虑下面这段代码,就不写html->head,body之类的代码了,自行 ...
- JQuery 阻止js事件冒泡 阻止浏览器默认操作
//阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡: <a h ...
- js之阻止事件冒泡(待修改)和阻止默认事件
阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- js阻止冒泡和默认事件（默认行为）详解- jquery DefaultPrevented 函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
随机推荐
- 写个脚本列出neutron的ovs的topology。
运行结果如下: $ ./nova-ifinfo a7026868-407c-4c54-bb8f-a68623d7e13fvm name is: instance-00000035 # 查找VM ...
- 通过crash了解linux页表
目的: 通过一个c语言实例,了解linux页表的组织结果和mmu的工作原理. 通过页表找到一个物理地址, 对比物理地址与虚拟地址的内容是否一致. 运行环境: $ uname -r3.15.6-200. ...
- oracle定时执行计划任务
show parameter job_queue_processes; alter system set job_queue_processes=10; 1,创建测试表 create table jo ...
- #include <iostream>
1 static_assert 2 std::nothrow 3 std::ref() 4 std::string 1 static_assert 执行编译时断言检查 语法 static_assert ...
- Java反射-简单应用
为了程序更好的维护和扩展,在面向对象思维的世界里,首先是面向接口编程,然后我们应该把做什么和怎么做进行分离. 以下我将用一个开晚会的样例来演示一下,终于达到的效果是:工厂+反射+配置文件实现程序的灵活 ...
- 许士彦：创业不走寻常路 APP最好时间已过
从用户体验服务设计公司eico design到拥有两千多万用户的独立微博客户端Weico,再到备受欢迎的影像APP(微可拍,Weico Gif),Weico团队走过了一条不寻常的创业之路. 作为一家新 ...
- 回收进程用户空间资源 exit()函数 _exit()函数 atexit()函数 on_exit()函数
摘要:本文主要讲述进程的终止方式,以及怎样使用exit()函数来终止进程.回收进程用户空间资源:分析了exit()函数与_exit()函数,returnkeyword的差异.同一时候具体解读了怎样使用 ...
- Java面试题之五
二十一.super()与this()的区别? (1)用this的情况: 1.在构造方法中,通过this调用另一个构造方法,用法:this(参数列表). 2.在函数参数或函数的局部变量与成员变量同名,即 ...
- 用ssh建立机器之间的信任机制
继续整理以前的博客,第二弹:用ssh建立机器之间的信任机制 #!/bin/bash #需要远程添加信任机制的机器 REMOTE[]=db-XXX-XXX1.db01 REMOTE[]=db-XXX-X ...
- android入门——UI(5)
最近时间实在匆忙,博客的代码基本没有解释. 介绍ExpandableListView <?xml version="1.0" encoding="utf-8&quo ...