JS事件对象与事件委托
2024-10-18 20:19:41
事件对象
包含事件相关的信息,如鼠标、时间、触发的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获取子元素
}
最新文章
- Git Bash的一些命令和配置
- hive --service metastore 出现的问题
- 在WebBrowser中截获弹出对话框内容并将其屏蔽
- 把内容生成txt文件
- Python成长笔记 - 基础篇 (十一)
- js中的相等与不等运算
- 对背包问题(Knapsack Problem)的算法探究
- vi代码智能提示功能及相关配置
- Day 5内存管理,定义变量
- Ceph Luminous版本创建OSD无法激活问题
- python初认识、基础数据类型以及 if 流程控制
- $(function() {....}) ,(function($){...})(jQuery)
- 关于APP,原生和H5开发技术的争论 APP开发技术选型判断依据
- git ssh 22 端口不可用时通过https 443 端口配置git ssh
- android 开发 View _8_ 动态图片自定义View
- scikit-learn全局图
- Codeforces 781B. Innokenty and a Football League
- [py]flask蓝图的使用
- UVa 1631 密码锁
- bzoj1485 有趣的数列
热门文章
- python的历史
- enumerate用法
- Grumpy: Go 上运行 Python!
- 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
- 详解 Android Activity 生命周期
- Jquery自定义插件之$.extend()、$.fn和$.fn.extend()
- Css--深入学习之切角
- XUtils框架之初步探索
- ubuntu14.04 python3.*连接mysql
- jQuery 教程