JavaScript事件对象与事件的委托

事件对象

包含事件相关的信息,如鼠标、时间、触发的DOM对象等

 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下:

document.getElementsByTagName("div")[0].onclick = function(e){
  e = window.event || e; //兼容IE低版本(事件对象绑定在window的event上)
  console.log(e);//这里e就是事件对象
}

事件的属性和方法

type:获取事件类型(click、mouseover等等)

target:获取发生的所在元素(在低版本IE下用srcElement属性)

stopPropagation() 阻止事件冒泡(IE用cancelBubble属性为false阻止冒泡)

preventDefault() 阻止事件默认行为(IE用returnValue属性为false阻止默认行为)

事件委托

利用target属性,获取时间发生的所在对象,避免全体子元素加事件,对比如下: 

var tbs=document.getElementsByTagName("td");
    for(var i=0;i<tbs.length;i++){//循环给每个子元素添加事件
        tbs[i].onclick=function(){
            this.style.background="red";
        }
    }
document.getElementsByTagName("table")[0].onclick=function(e){
        e.target.style.background="red";//只绑定父元素事件,用target获取子元素
    }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏mySoul

C++入坑

给变量设置一个集合,该变量的值只能从该集合中取为枚举类型。且,转为int类型的初始值为0~6,可以设置其int值

693
来自专栏web前端

JavaScript基础学习--12 日期对象、时钟倒计时

Demos:   https://github.com/jiangheyan/JavaScriptBase 一、时间 var date = new Date...

18510
来自专栏来自地球男人的部落格

Python常见用法汇总

此篇主要记录写python遇到的一些常见用法。 1. 正则表达式匹配中文 当我们使用正则表达式匹配字符串中的中文中文时会发现字符串明明有目标串却不能匹配的情况 ...

2235
来自专栏极客编程

ECMAScript 6教程 (三) Class和Module(类和模块)

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出 原文连接,博客地址为 http://www.cnblogs.co...

693
来自专栏用户2442861的专栏

剑指offer 36 数组中的逆序对

转载请注明出处:http://blog.csdn.net/ns_code/article/details/27520535

701
来自专栏小樱的经验随笔

C++STL中map容器的说明和使用技巧(杂谈)

1、map简介 map是一类关联式容器。它的特点是增加和删除节点对迭代器的影响很小,除了那个操作节点,对其他的节点都没有什么影响。对于迭代器来说,可以修改实值,...

3045
来自专栏C语言及其他语言

结构体与共用体

1、结构体的定义和使用 前面我们已经讨论过字符数组与字符串,字符指针也可以指向一个字符串,可以用字符串常量对字符 指针进行初始化。例如: char *str...

3127
来自专栏乐百川的学习频道

Python学习笔记 输入输出

str和repr内置函数 在介绍Python的输入输出之前,我们先来介绍两个内置函数,str()和repr(),它们都用来输出对象的字符串形式。不过它们之间有一...

1828
来自专栏IT派

SQL Server 与 MySQL 中排序规则与字符集相关知识的一点总结

字符集是针对不同语言的字符编码的集合,比如UTF-8字符集,GBK字符集,GB2312字符集等等,不同的字符集使用不同的规则给字符进行编码。排序规则则是在特定字...

665
来自专栏landv

C语言-字符串文本串联

1203

扫码关注云+社区