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

2024-10-20 18:42:38

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做时间倒数读秒功能的实例

某个试卷在线考试需要读秒.网上找了一会就是没找到我想要的.只好自己改改网上的,这也用用,那也用用. 其他代码不贴了.贴相关的: html页面代码: <a class="btn btn-default" onclick="StartExamine();">开始</a> <div id="TimeClock" class="col-md-4" ><span class="text
js中innerText/textContent和innerHTML与target和currentTarget的区别

一.获取/赋值文本值innerText/textContent.innerHTML <body> <div id="box_text"> <p style="color:hotpink;">muzidigbig</p> <p style="color:pink">lovely</p> </div> <input type="text" i
js中对象和面向对象与Json介绍

ECMA-262 把对象(object)定义为"属性的无序集合,每个属性存放一个原始值.对象或函数".严格来说,这意味着对象是无特定顺序的值的数组. 面向对象语言的要求一种面向对象语言需要向开发者提供四种基本能力: 封装 - 把相关的信息(无论数据或方法)存储在对象中的能力聚集 - 把一个对象存储在另一个对象内的能力继承 - 由另一个类(或多个类)得来类的属性和方法的能力多态 - 编写能以多种方法运行的函数或方法的能力对象的创建和销毁都在 JavaScript 执行过程中发生
JS实现数组去重,显示重复元素及个数的方法示例

本文实例讲述了JS实现数组去重,显示重复元素及个数的方法.分享给大家供大家参考,具体如下: <script> var arr = ['土豆','土豆','茄子','土豆','茄子','土豆','紫红色']; function qc(arr){ var resultObj = {}; var result = []; var result2 = []; for(var i=0; i<arr.length; i++){ if(result.indexOf(arr[i]) == -1){ re
js的对象与函数详解

一.对象就是人们要研究的任何事物,不仅能表示具体事物,还能表示抽象的规则,计划或事件. 属性的无序集合,每个属性可以存一个值(原始值,对象,函数) 对象的特性:封装,尽可能的隐藏对象的部分细节,使其受到保护.只保留有限的接口和外部发生联系. js 中{},[] 来定义数组和对象 1.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数. 2.[ ]中括号,表示一个数组,也可以理解为一个数组对象. 3.{ } 和[ ] 一起使用,我们前面说到,{ } 是一
js变量声明var使用与不使用的区别详解

一.区分显示的声明与隐式声明(var) JS中变量声明分显式声明和隐式声明. var name = 'muzidigbig';//显示声明 name = 'muzidigbig';//隐式声明(为全局变量的一个属性) 在函数中使用var关键字进行显式声明的变量是做为局部变量,在全局范围内声明的变量为全局变量:而没有用var关键字,使用直接赋值方式声明的是全局变量(全局对象属性). // name = 'muzidigbig';//隐式声明(为全局变量的一个属性) console.log(name
JS实现将对象转化为数组的方法分析

本文实例讲述了JS实现将对象转化为数组的方法.分享给大家供大家参考,具体如下: 前言其实这本来应该是一个很基础的问题了,但我之做一想记录一下是因为之前因为对象转数组的时候卡住了后来弄了出来,但最近再遇到这个问题时竟然又卡主了,所以,关于这个问题,如何把一个对象{'未完成':5, '已完成':8, '待确认':4, '已取消':6}转为[{"未完成":5},{"已完成":8},{"待确认":4},{"已取消":6}],你已经知
vue.js的vue-cli脚手架中使用百度地图API的实例

第一步,去百度地图开发者申请密钥. 1.申请密钥(百度地图开放平台-->开发文档-->web开发-->JavaScript API-->立即使用-->创建应用) 2.密钥申请成功后第二步,在项目的需要模板中引入,具体如下: 项目路径其中index.html存放地图链接,代码如下在百度地图开放平台服务介绍中选择我们所需要的地图类型 demo演示可查看选择我们所需哪种百度地图的类型:http://lbsyun.baidu.com/index.php?title=j
javascript json字符串到json对象转义问题

在使用JavaScriptSerializer.Serialize 方法转json对象时,遇到一个问题,后台方法生成的json字符串中有没有转义的特殊字符代码: 而这些特殊的代码在使用javascript的转json对象方法时报错,为了讲这个转义的东西转义过来,折腾了半天.着实对javascript无语: 后台代转的对象是 Dictionary<string,string> DepartmentsExistTaskCounts 前台页面使用的MVC里的razor 写法,直接使用后台方法把数据转
js序列化和反序列化的使用讲解

(1)序列化即js中的Object转化为字符串 1.使用obj.toJSONString() var str=obj.toJSONString(); //将JSON对象转化为JSON字符 2.使用JSON.stringify(obj) var str=JSON.stringify(obj); //将JSON对象转化为JSON字符 (2)反序列化即js中JSON字符串转化为Object 1.使用eval('('+josnStr+')') var obj=eval("("+data+&

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

相关推荐

随机推荐