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

相关文章

来自专栏个人随笔

初识CSS3

1.CSS规则由两部分构成,即选择器和声明器    声明必须放在{}中并且声明可以是一条或者多条    每条声明由一个属性和值构成,属性和值用冒号分开,每条语句...

3418
来自专栏前端笔记

【 前端相关 网页样式 】总结CSS3中“伪类”与“伪元素”

熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用...

3437
来自专栏闻道于事

JavaScript对象之document对象

DOM对象之document对象 DOM对象:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM ...

3037
来自专栏程序员的知识天地

H5学习从0到1-H5列表(8)

1.无序列表:使用标签 ul,li 属性:disc(默认实心圆) circle (空心圆)square (方块)

1123
来自专栏lonelydawn的前端猿区

css选择器

下面是一张取自w3cschool的css选择器表 链接地址:http://www.w3school.com.cn/cssref/css_selectors.as...

1956
来自专栏极客慕白的成长之路

JavaScript实现计算器方法拓展

除特别注明外,本站所有文章均为慕白博客原创,转载请注明出处来自https://geekmubai.com/programming/757.html

2441
来自专栏柠檬先生

css3弹性盒子模型——回顾。

1.box-flex属性规定框的子元素是否可伸缩其尺寸。 父元素必须要声明display:box;子元素才可以用box-flex。     语法:box-...

2248
来自专栏java达人

jquery常用选择器

在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用...

2166
来自专栏SeanCheney的专栏

Scrapy CSS选择器

官方文档的CSS选择器太简短,整理了一个比较全的。 * 选择所有节点 #...

3599
来自专栏weixuqin 的专栏

Scrapy选择器的用法

36312

扫码关注云+社区

领取腾讯云代金券