事件对象（示例、封装函数EventUtil()）
事件对象
什么是事件对象？
在触发DOM上的事件时都会产生一个对象。
事件对象event
1.DOM中的事件对象
(1)\type属性用于获取事件类型
(2)\target属性用于获取事件目标
(3)\stopPropagation()方法用于阻止事件冒泡
(4)\preventDefault()方法用于阻止事件的默认行为
2.IE中的事件对象
(1)\type属性用于获取事件类型
(2)\srcElement属性 用于获取事件目标
(3)\cancelBubble属性 true阻止事件冒泡
(4)\returnValue属性 false阻止事件的默认行为
封装函数eventUtil():
var eventUtil = {
getEvent:function (event) {
return event?event:window.event;
},
getType: function (event) {
return event.type;
},
getTarget:function (event) {
return event.target||event.srcElement;
},
//阻止冒泡
stopPropagation:function (event) {
if(event.stopPropagation){
event.stopPropagation();
}else {
event.cancelBubble=true;
}
},
//阻止事件默认行为；
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else {
event.returnValue = false;
}
},
//添加具柄；
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;
}
}
};
示例：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="eventUtil.js"></script>
<script src="test1.js"></script>
</head>
<body>
<div id="div">
<input type="button" value="click1" id="btn1">
<a href="https://www.baidu.com" id="a">百度</a>
</div>
</body>
</html>
js：
window.onload = function () {
var btn1 = document.getElementById("btn1");
var a = document.getElementById("a");
var div = document.getElementById("div");
function show() {
alert("btn clicked");
}
eventUtil.addHandler(div,"click",function () {
alert("我是父盒子");
});
eventUtil.addHandler(btn1,"click",show);
eventUtil.addHandler(a,"click",function (e) {
e = eventUtil.getEvent(e);
alert(eventUtil.getTarget(e));
eventUtil.stopPropagation(e);
eventUtil.preventDefault(e);
});
eventUtil.removeHandler(btn1,"click",show);
};
事件对象（示例、封装函数EventUtil()）的更多相关文章
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
- jQuery入门（3）事件与事件对象
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- JS中的事件(对象，冒泡，委托，绑定)
- 事件,是文档或浏览器窗口中发生的一些特定的交互瞬间,JS与HTML之间的交互是通过事件实现的 对于web应用来说,有下面这些代表性事件:点击事件,鼠标移动,按下键盘等等 - 事件,是用户和浏览器之 ...
- javascript跨浏览器事件对象类库
一.前言 学习了javascript事件后,个人总结归纳了跨浏览器事件对象类库,方便以后使用,现分享给大家. 二.事件对象封装 将对浏览器事件对象的操作封装成eventObject.js方便调用 // ...
- 第一百七十节，jQuery，事件对象，event 对象，默认行为，冒泡
jQuery,事件对象,event 对象,默认行为,冒泡 学习要点: 1.事件对象 2.冒泡和默认行为 JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器 ...
- JavaScript DOM事件对象的两个小练习 | 学习内容分享
Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 本文用于记录个人学习过程 ...
- JavaScript的事件对象中的特殊属性和方法（鼠标，键盘）
鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...
- JavaScript基础回顾知识点记录6-操作元素样式和事件对象（介绍基本使用）
js 中 操作元素样式 通过js修改元素内联样式(设置和读取的都是内联样式) 获取当前元素显示的样式 <html> <head> <meta charset=" ...
- javascript中事件总结&通用的事件侦听器函数封装&事件委托
前言: JAVASCRIPT与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口中发生的一些特定交互瞬间.可以使用侦听器( 或处理程序 )来预定事件,以便事件发生时执行相应的代码.这种在 ...
随机推荐
- Bootloader与Kernel间参数传递机制 taglist【转】
本文转载自:http://blog.csdn.net/tommy_wxie/article/details/9187821 Tag list被用来在bootloader和Linux kernel 之间 ...
- DedeCms如何调用Discuz论坛主题等数据方法总结
DedeCms如何调用Discuz论坛主题等数据方法总结 同时使用Dedecms和Discuz论坛的朋友,难免要在网站内调用论坛的内容.使用Discuz论坛的JS调用方式,对搜索引擎不够友好,下面我们 ...
- 执行sql语句异常...需要的参数与提供的值个数不匹配
执行mysql语句时,出现以下错误时. 看错误提示,提示说你的sql语句只需要5个参数,而你提供了8个值value,你确定你确实需要8个参数,而你的sql语句却提示说只需要5个参数 这时,请仔细检查一 ...
- BestCoder5 1001 Poor Hanamichi(hdu 4956) 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4956(它放在题库后面的格式有一点点问题啦,所以就把它粘下来,方便读者观看) 题目意思:给出一个范围 [ ...
- hdu 4544 湫湫系列故事——消灭兔子（优先队列）
题意:n只兔子(有血量),m只箭(有伤害.花费),每只兔子只能被射一次,求射死所有兔子的最少花费. 思路:贪心,2重循环,兔子从血量高到低,箭从伤害高到低,用能射死兔子的箭中花费最小的箭射. #inc ...
- [Selenium] 如何绕过 IE 的安全模式
自从 IE7 引入 Protected Mode 以来, IE 浏览器的安全性的确得到了一定程度的提高.其原理从本质来讲,在浏览某些需要启用保护模式的页面时,会开启一个新的浏览器会话以完成任务,而此时 ...
- 「LuoguP4047」 [JSOI2010]部落划分
Description 聪聪研究发现,荒岛野人总是过着群居的生活,但是,并不是整个荒岛上的所有野人都属于同一个部落,野人们总是拉帮结派形成属于自己的部落,不同的部落之间则经常发生争斗.只是,这一切都成 ...
- bzoj 3073 Journeys —— 线段树优化连边
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3073 建两棵线段树,一棵从下往上连边,一棵从上往下连边,叶子节点之间也有连边: 区间向区间连 ...
- node.js适合游戏后台开发吗？
网站服务器和游戏服务器是怎么样联系到一起的? 百牛信息技术bainiu.ltd整理发布于博客园 1. 游戏分很多种,咱们先来看看MMORPG. 再怎么简单的RPG服务器都免不了处理多人交互的情形,上百 ...
- Cocos2dx+lua合适还是Cocos2dx+js合适?
问题: 开发cocos2dx手游Cocos2dx+lua合适还是Cocos2dx+js合适 百牛信息技术bainiu.ltd整理发布于博客园 回答: 作者:廖宇雷链接:https://www.zhih ...