事件对象

什么是事件对象？

在触发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()）的更多相关文章

  1. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  2. jQuery入门（3）事件与事件对象

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  3. JS中的事件(对象，冒泡，委托，绑定)

    - 事件,是文档或浏览器窗口中发生的一些特定的交互瞬间,JS与HTML之间的交互是通过事件实现的 对于web应用来说,有下面这些代表性事件:点击事件,鼠标移动,按下键盘等等 - 事件,是用户和浏览器之 ...

  4. javascript跨浏览器事件对象类库

    一.前言 学习了javascript事件后,个人总结归纳了跨浏览器事件对象类库,方便以后使用,现分享给大家. 二.事件对象封装 将对浏览器事件对象的操作封装成eventObject.js方便调用 // ...

  5. 第一百七十节，jQuery，事件对象，event 对象，默认行为，冒泡

    jQuery,事件对象,event 对象,默认行为,冒泡 学习要点: 1.事件对象 2.冒泡和默认行为 JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器 ...

  6. JavaScript DOM事件对象的两个小练习 | 学习内容分享

    Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 本文用于记录个人学习过程 ...

  7. JavaScript的事件对象中的特殊属性和方法（鼠标，键盘）

    鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...

  8. JavaScript基础回顾知识点记录6-操作元素样式和事件对象（介绍基本使用）

    js 中 操作元素样式 通过js修改元素内联样式(设置和读取的都是内联样式) 获取当前元素显示的样式 <html> <head> <meta charset=" ...

  9. javascript中事件总结&通用的事件侦听器函数封装&事件委托

    前言: JAVASCRIPT与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口中发生的一些特定交互瞬间.可以使用侦听器( 或处理程序 )来预定事件,以便事件发生时执行相应的代码.这种在 ...

随机推荐

  1. Codeforces Round #346 (Div. 2) E. New Reform

    E. New Reform time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  2. Vue源码探究-源码文件组织

    Vue源码探究-源码文件组织 源码探究基于最新开发分支,当前发布版本为v2.5.17-beta.0 Vue 2.0版本的大整改不仅在于使用功能上的优化和调整,整个代码库也发生了天翻地覆的重组.可见随着 ...

  3. UVA11270 Tiling Dominoes —— 插头DP

    题目链接:https://vjudge.net/problem/UVA-11270 题意: 用2*1的骨牌填满n*m大小的棋盘,问有多少种放置方式. 题解: 骨牌类的插头DP. 1.由于只需要记录轮廓 ...

  4. download file by python in google colab

    https://stackoverflow.com/questions/15352668/download-and-decompress-gzipped-file-in-memory You need ...

  5. Java类成员访问控制权限

    类成员访问控制权限 在JAVA中有四种访问控制权限,分别为:private, default, protected, public 1.Private 如果一个成员方法或变量名前使用了private, ...

  6. BZOJ_1264_[AHOI2006]基因匹配Match_树状数组

    BZOJ_1264_[AHOI2006]基因匹配Match_树状数组 Description 基因匹配(match) 卡卡昨天晚上做梦梦见他和可可来到了另外一个星球,这个星球上生物的DNA序列由无数种 ...

  7. Prime Cryptarithm

    链接 分析:对于三位数我们限定为[100,999],两位数我们限定为[10,99],然后我们依次判断是否满足乘法式且各个数位是否在数列中,若都满足+1 /* PROB:crypt1 ID:wangha ...

  8. mac下载模块时报错OSError: [Errno 13] Permission denied: '/Library/Python/2.7/site-packages/chardet'

    原文地址:https://www.cnblogs.com/liangyan-1989/p/8143129.html 安装完pip后,使用pip install selenium报以下错 OSError ...

  9. java利用Aspose.words.jar将本地word文档转化成pdf（完美破解版 无水印 无中文乱码）

    package doc; import java.io.*; import junit.framework.Test; import com.aspose.words.*; public class ...

  10. Asp.net MVC 使用PagedList（新的已更名 为X.PagedList.Mvc） 分页

    在asp.net mvc 中,可以bootstrap来作为界面,自己来写分页程序.也可以使用PagedList(作者已更名为 X.PagedList.Mvc)来分页. 1.首先,在NuGet程序包管理 ...