js中事件对象和事件委托的介绍


Posted in Javascript onJanuary 21, 2019

js中事件对象和事件委托的介绍

Ie9以下浏览器中的事件对象是放在全局中的window.event;

解决兼容性:event = event || window.event

事件委托(就是将事件绑定到父级/爷爷级对象上,通过事件对象的target属性来控制子级对象的改变):

event.target(点击的目标对象)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    td{
      width: 100px;
      height: 100px;
      border:2px solid red;
    }
  </style>
</head>
<body>
<table >
  <tr>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
</table>
</body>
<script>
  var tab = document.getElementsByTagName("table")[0];
  tab.onclick = function (event) {
    //点击子级对象改变颜色
    event.target.style.backgroundColor = "black";
  }
</script>
</html>

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
JavaScript 三种创建对象的方法
Oct 16 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
JavaScript流程控制(分支)
Dec 06 Javascript
JavaScript作用域链实例详解
Jan 21 #Javascript
Jquery的Ajax技术使用方法
Jan 21 #jQuery
js变量声明var使用与不使用的区别详解
Jan 21 #Javascript
Vue中Axios从远程/后台读取数据
Jan 21 #Javascript
vue项目中实现的微信分享功能示例
Jan 21 #Javascript
在vue项目中引入highcharts图表的方法
Jan 21 #Javascript
js的对象与函数详解
Jan 21 #Javascript
You might like
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
php服务器的系统详解
2019/10/12 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
下载糗事百科的内容_python版
2008/12/07 Python
Python import与from import使用及区别介绍
2018/09/06 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
在python中使用nohup命令说明
2020/04/16 Python
python获取linux系统信息的三种方法
2020/10/14 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
.NET是怎么支持多种语言的
2015/02/24 面试题
教育学习自我评价
2014/02/03 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
mysql如何能有效防止删库跑路
2021/10/05 MySQL
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS