JS事件对象与事件委托
事件对象
包含事件相关的信息,如鼠标、时间、触发的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获取子元素
}
JS事件对象与事件委托的更多相关文章
- JS事件流、事件监听、事件对象、事件委托
JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...
- js跨浏览器事件对象、事件处理程序
项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节 ...
- JavaScript事件对象与事件的委托
事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...
- 【2017-05-03】winform打印控件、事件对象和事件数据、MDI窗体容器
一.打印控件 第一步先把打印对象搞出来. - printDocument 打印对象(将要打印的内容放到该对象里,从该对象里取内容打印) 设置他的PrintPage事件(对于要打印的每一页触发一次 ...
- js:事件(注册、解绑、DOM事件流、事件对象、事件委托)
1.注册事件 (1)传统方式注册事件 <body> <button id="b1">请点击</button> <script> va ...
- python全栈开发day49-jquery的位置信息、事件流、事件对象,事件委托,事件绑定和解绑
一.昨日内容回顾 1. jQuery的属性操作 1) html属性操作:attr 2) DOM属性操作:prop 3) 类样式操作:addClass.removeClass.toggleClas ...
- JS 事件对象和事件冒泡
1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox ...
- JS事件-对象监视事件,事件触发函数
写在前面: 一句话作为本文的核心思想:对象监视事件,事件触发函数: (一)事件 1.事件分类 (1)鼠标事件 click() 鼠标单击 dblclick() ...
- jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件
一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...
随机推荐
- VC++/MFC(VC6)开发技术精品学习资料下载汇总
工欲善其事,必先利其器,VC开发MFC Windows程序,Visual C++或Visual Studio是必须的,恩,这里都给你总结好了,拿去吧:VC/MFC开发必备Visual C++.Visu ...
- VS一直停留在“正在还原nuget程序包”
VS一直停留在“正在还原nuget程序包” 在开发何问起收藏夹的时候,准备在WinFrom中加入网页浏览器,于是下载了一个CEFSharp的源码,生成解决方案的时候,一直提示“正在还原nuget程序包 ...
- Spring源码分析——BeanFactory体系之接口详细分析
Spring的BeanFactory的继承体系堪称经典.这是众所周知的!作为Java程序员,不能错过! 前面的博文分析了Spring的Resource资源类Resouce.今天开始分析Spring的I ...
- .NET跨平台之旅:借助ASP.NET 5 Beta5的新特性显示CLR与操作系统信息
今天在 MSDN 博客上看到了 ASP.NET 5 Beta5 的发布消息(详见 ASP.NET 5 Beta5 Now Available),从中知道了 2 个新特性: 1. DNX: New IR ...
- JavaScript模板引擎artTemplate.js——如何引入模板引擎?
artTeamplate.js在github上的地址:artTemplate性能卓越的js模板引擎 引入模板引擎,就是引入外部javascript啦,并且artTemplate.js不依赖其他第三方库 ...
- 移动web开发—页面头部 META 总结
meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. ...
- DB&SQL备忘
DB2最佳分页语句 SELECT * FROM ( SELECT inner2_.*, ROWNUMBER() OVER(ORDER BY ORDER OF inner2_) AS rownumber ...
- Map工具系列-04-SQL合并执行工具
所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...
- gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
- CodeForces 165E Compatible Numbers(位运算 + 好题)
wo integers x and y are compatible, if the result of their bitwise "AND" equals zero, that ...