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 条评论
登录 后参与评论

相关文章

来自专栏编程坑太多

python--面向对象与模块补充,反射

1534
来自专栏个人分享

JAVA 几种引用类型学习

1、对象的强、软、弱和虚引用     在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象。也就是说,只有对象处于可触及(re...

752
来自专栏hbbliyong

看到他我一下子就悟了-- 泛型(1)

1.泛型概念:       本质上,术语”泛型”指的是”参数化类型(parameterized types)”.参数化类型非常重要,因为它们可以在创建类.结构....

2535
来自专栏Google Dart

Dart语言指南(二) 顶

Dart是一种面向对象的语言 包含类和基于 mixin 的继承两部分。每个对象是一个类的实例, 并且 Object.是所有类的父类。 基于 mixin 的继承指...

361
来自专栏Android学习之路

观察者模式

19710
来自专栏Hongten

JSP 九大内置对象

① out - javax.servlet.jsp.jspWriter    out对象用于把结果输出到网页上。

592
来自专栏iOS 开发杂谈

iOS多线程之三:GCD的使用

一、什么是GCD GCD是Grand Central Dispatch的简称,它是基于C语言的。如果使用GCD,完全由系统管理线程,不需要编写线程代码。只需定...

752
来自专栏项勇

笔记10 | 学习整理静态static 和 终态final

1145
来自专栏老马说编程

(91) Lambda表达式 / 计算机程序的思维逻辑

在之前的章节中,我们的讨论基本都是基于Java 7的,从本节开始,我们探讨Java 8的一些特性,主要内容包括: 传递行为代码 - Lambda表达式 函数式...

1808
来自专栏用户2442861的专栏

轻松搞定面试中的“虚”

http://blog.csdn.net/silangquan/article/details/18322087

752

扫描关注云+社区