事件源对象 ,js里面一个很重要的属性

最新推荐文章于 2022-04-13 18:05:18 发布
最新推荐文章于 2022-04-13 18:05:18 发布
阅读量398 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zt_vicky/article/details/53643927
本文通过一个简单的HTML页面示例介绍了如何使用JavaScript获取事件源对象。当用户触发某个事件时，如点击按钮，可以通过事件处理函数获取到触发该事件的具体元素，并打印出来。这有助于开发者理解事件冒泡机制并进行精确的事件处理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13事件源对象</title>
<script>
window.onload = function(){
var content = document.getElementsByClassName('content')[0];
var btn = document.getElementById('btn');
var btn2 = document.getElementById('btn2');


content.onclick = function(e){
e = e || window.event;
console.log('content被点击');
console.log('事件源对象：',e.target);
}
}
</script>
</head>
<body>
<div class="container">
<div class="content">
<ul class="list">
<li>
<button id="btn">测试按钮</button>
<button id="btn2">测试按钮</button>
</li>
</ul>
</div>
</div>
</body>
</html>
zt_vicky
关注
js对象查找属性并赋值(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
06-18 669
js对象查找属性并赋值(附完整源码)
前端开发：JS中向对象中添加对象的方法
热门推荐
全沾软贱开发攻城狮
09-12 1万+
在前端开发过程中，一切皆对象，尤其是在数据处理的时候，大部分时候也是处理对象相关的数据，所以对象在JS中是很重要的一个内容，也是必用的内容。本篇博文来分享一下关于在JS中对象里面添加对象的操作，虽然知识点不难，但是常用，所以总结一下存起来，方便查阅使用。通过本文的介绍，关于在JS中对象里面添加对象的操作就得心应手了，虽然该知识点不难但是重要和常用，尤其是对于刚接触前端开发不久的开发者来说更是如此，所以绝对掌握该知识点还是很有必要的，重要性不再赘述。欢迎关注，共同进步。
js获取事件源及触发该事件的对象
12-12
某Html元素有onclick方法：onclick=’return myfunction(event)’ 代码如下: function myfunction(event) { event = event ? event : window.event; var obj = event.srcElement ? event.srcElement : event.target; //这时obj就是触发事件的对象，可以使用它的各个属性 //还可以将obj转换成jquery对象，方便选用其他元素 var $obj = $(obj); alert($obj.parent().attr(“href”));
js获取事件源对象
hsliwei的专栏
01-10 4820
js获取事件源对象时在IE、谷歌、遨游下用event都可以得到 但是在火狐下不行，不需要传入一个event事件源参数，才能够获取 eg:  function getSome() { var e=event||window.event; alert(e.button); } 测试 上面的测试在谷歌和IE下可以。但是在火狐下就不行，貌似火狐需要传事件源入口   function g
事件源对象
llc2007的专栏
05-21 871
事件源对象 event.srcElement.tagName(document.getElementsByTagName)event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcElement.releaseCapture();  事件按键 event.keyCode event.shiftKey event.altK
vue 对象数组中，根据相同属性的数据合并，重组新的数组对象
01-20
源数据是一个包含多个对象的数组，每个对象有两个属性：`TYPE`和`REMARK`。例如： ```javascript let data = [ {TYPE: "01", REMARK: "休假"}, {TYPE: "03", REMARK: "在班"}, {TYPE: "03", REMARK: "在班"}, {...
vue里面有什么办法能够把一个对象里面的所有属性的值，覆盖到另外一个对象里面同名属性下
11-22
在Vue.js中，如果你想将一个对象的所有属性值复制并覆盖到另一个对象的对应同名属性上，可以使用JavaScript的对象合并技术，例如`Object.assign()`或者简单地通过点运算符`.`逐个赋值。以下是两种常见的方法： 1. ...
【JavaScript源代码】详解jQuery的拷贝对象.docx
12-29
// 如果拷贝对象targett里面属性和被拷贝对象objrr里面属性有相同的，则objrr里面属性值会覆盖掉targett里面属性值 ``` 在这个例子中，`targett` 中的 `id` 属性被 `objrr` 中的 `id` 属性覆盖。 #### 四、深拷贝...
JS事件对象
qq_48439911的博客
04-13 1806
什么是事件对象 eventTarget.onclick = function(event) {} eventTarget.addEventListener('click', function(event) {}） 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt ，现在一般写 e。 官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。 简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它
JavaScript—事件对象和事件对象属性
weixin_46048542的博客
02-10 481
事件绑定 元素节点.on + 事件类型 = 匿名函数 【注】系统会在事件绑定一旦完成的时候，生成一个事件对象 【注】触发事件的时候，系统会自动去调用事件绑定的函数，将事件对象当做第一个参数传入。 条件对象: button 的属性 0左键 1滚轮 2右键 获取当前鼠标的位置:(原点位置不一样) clientX clientY 原点位置：可视窗口的..
巧用事件源对象
AN27xy的博客
09-07 253
数据修改的点击事件中的巧用源事件 利用循环去绑定同类的事件函数时，希望通过点击按钮引发的其他dom元素的数据等改变，但是this的指向指向本点击的按钮，很难获取到其他dom元素的函数名，利用函数名[i],是无法实现的，因为会形成闭包，但使用立即执行函数解决闭包问题时，相对会比较麻烦，所以利用源对象可以很好的解决 例如在一个查询表的修改数据事件中 当我们点击“修改”时，我们希望是先获得该按钮父级的父级一整行的有效数据，此时我们可以利用this指向修改按钮的特性，去获取列表里的数据。 但是在接下来的点击事件
事件源对象和事件委托机制
weixin_44978975的博客
09-26 396
事件源对象是什么 我们打印出来看看 <div class="wrapper" style="width: 100px;height: 100px;background-color:red;"> <div class="box" style="width: 50px;height: 50px; background-color:yellow;"></div>...
JavaScript·DOM·Web_API之③事件源的获取、事件类型以及常用鼠标/键盘属性的总结)
笔岸柳影
02-15 703
JavaScript·DOM·Web_API之③事件源的获取、事件类型以及常用鼠标/键盘属性的总结 QQ:3020889729 小蔡事件源获取的方法注册事件（给事件源选择合适的事件类型）事件类...
JS 事件
weixin_33924770的博客
05-20 112
事件 1. Event 对象 event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！ 4. 事件委托 1. 定义 事件委托就是利用事件冒泡，指定一个事件处理程序，就可以管理某一类型的所有事件 2. 基本实现 js 原生实现事件委托 1. 需求给li添加同样效果的事件 <ul id="ul...
对事件‘赋值’的例子
fbysss的专栏
11-03 2466
对事件‘赋值’的例子：type    TSEvent=procedure (StatusBar: TStatusBar;Panel: TStatusPanel;const Rect: TRect) of Object;……… privateSEvent:TSEvent;    procedure mySDrawPanel(StatusBar: TStatusBar;Pa
javaScript小练习之获取事件源对象控制列表显示
NullPointerException的博客
01-20 346
要求： 通过点击菜单控制列表是否显示，且每次只能显示一个列表； 显示效果：     function list() { //获取事件源对象 var aNode = event.srcElement; //获取父节点 var tdNode = aNode.parentNode; //获取div节点 var divNode = tdN
js一个对象怎么把另一个对象的数据加到里面
最新发布
07-02
<think>首先，用户的问题是：“请问JavaScript如何将一个对象的数据合并到另一个对象”。这是一个关于JavaScript对象合并的问题。根据系统级指令：-所有行内数学表达式必须使用$...$格式。-独立公式使用$$...$$格式。 -LaTeX语法正确。-使用中文回答。-生成相关问题。 -在回答中引用的段落末尾自然地添加引用标识，如[^1]。用户可见层指令： -回答结构清晰，帮助用户逐步解决问题。-保证回答真实可靠。 参考提供的引用：-引用[1]：关于使用reduce合并数组对象。-引用[2]：关于Object.assign()和扩展运算符合并对象。-引用[3]：Object.assign()的例子。-引用[4]：合并数组对象的方法。-引用[5]：合并对象为数组对象。用户意图似乎是关于对象合并，所以我需要基于JavaScript的标准方法解释如何合并对象。 关键点：-在JavaScript中，合并对象可以使用Object.assign()或扩展运算符（...）。- Object.assign(target, source)将源对象的属性复制到目标对象中。 -扩展运算符：{...obj1,...obj2 }创建一个新对象，合并属性。-如果属性冲突，后者覆盖前者（除非指定）。我的回答应该结构清晰： 1.介绍问题。 2.解释方法。 3.提供例子。 4.添加引用标识。5.生成相关问题。最后，生成相关问题。回答结构：-开头：解释用户问题。 -方法1：使用Object.assign()。-方法2：使用扩展运算符。 -注意事项：如浅拷贝、属性覆盖。-例子：提供代码示例。 -结尾：总结。 -相关问题。引用标识：在回答中，当引用信息时添加[^2]或[^3]，因为这些引用直接相关。 例如： -Object.assign()方法在引用[2]和[^3]中提到。-扩展运算符在引用[2]提到。 所以，在解释时自然地添加引用。 完整回答：-用中文。 -确保LaTeX正确：但这里没有数学表达式，所以可能不需要。 -用户问题中没有数学，所以行内数学可能不适用。但如果有，如索引等，使用$...$。-独立公式：可能不需要。生成相关问题： -在最后添加“相关问题”部分。相关问题想法： 1.如何深拷贝对象？ 2.合并对象时如何处理嵌套对象？3.Object.assign()和扩展运算符的区别？ 4.如何合并多个对象？ 5.在React或Vue中如何合并状态对象？基于引用和用户意图。</think>### JavaScript 对象合并方法 在JavaScript中，将一个对象的数据合并到另一个对象是常见的操作，主要用于属性扩展或更新。合并时，如果属性名冲突，默认后者的属性值会覆盖前者（除非指定保留前者）。以下是两种最常用且可靠的方法：**Object.assign()** 和**扩展运算符（...）**。两种方法都执行浅拷贝（只复制一层属性，不处理嵌套对象），我会逐步解释并给出示例，确保清晰易懂。 #### 1. 使用 Object.assign() 方法 Object.assign() 是JavaScript的内置方法，它将源对象的属性复制到目标对象中。如果目标对象已有同名属性，源对象的值会覆盖它。语法为：`Object.assign(target, source1, source2, ...)`。 - **优点**：兼容性好，支持所有现代浏览器和Node.js。 - **缺点**：修改目标对象本身（非纯函数），且只执行浅拷贝。 **示例代码**： ```javascript // 定义目标对象和源对象 const targetObj = { a: 1, b: 2 }; const sourceObj = { b: 3, c: 4 }; // 合并对象：sourceObj 的属性复制到 targetObj const mergedObj = Object.assign(targetObj, sourceObj); console.log(mergedObj); // 输出: { a: 1, b: 3, c: 4 } console.log(targetObj); // 输出: { a: 1, b: 3, c: 4 }（注意：targetObj 自身被修改） ``` 在此示例中，`b` 属性冲突，源对象的值 `3` 覆盖了目标对象的 `2`。如果需要保留目标对象不变，可以将空对象 `{}` 作为第一个参数： ```javascript const safeMergedObj = Object.assign({}, targetObj, sourceObj); console.log(safeMergedObj); // 输出: { a: 1, b: 3, c: 4 }（targetObj 未被修改） ``` 这种方法在合并多个对象时很高效[^2][^3]。 #### 2. 使用扩展运算符（...） 扩展运算符（spread operator）是ES6引入的语法，通过 `{ ...obj1, ...obj2 }` 创建一个新对象，合并所有属性。如果属性名冲突，后者覆盖前者。 - **优点**：语法简洁，纯函数（不修改原对象），易于阅读。 - **缺点**：只支持ES6及以上环境，同样只执行浅拷贝。 **示例代码**： ```javascript const obj1 = { x: 10, y: 20 }; const obj2 = { y: 30, z: 40 }; // 合并对象：obj2 的属性覆盖 obj1 的同名属性 const combinedObj = { ...obj1, ...obj2 }; console.log(combinedObj); // 输出: { x: 10, y: 30, z: 40 } console.log(obj1); // 输出: { x: 10, y: 20 }（原对象未被修改） ``` 要合并多个对象，可以链式扩展： ```javascript const obj3 = { z: 50 }; const multiCombined = { ...obj1, ...obj2, ...obj3 }; // 输出: { x: 10, y: 30, z: 50 } ``` 这种方法在React或Vue状态管理中常见，因为它不改变原数据[^2]。 #### 注意事项 - **浅拷贝问题**：以上方法只复制第一层属性。如果对象包含嵌套对象（如 `{ a: { b: 1 } }`），内部对象是引用复制，而非深拷贝。修改嵌套属性会影响原对象： ```javascript const nestedTarget = { data: { value: 5 } }; const nestedSource = { data: { newValue: 10 } }; const shallowMerged = { ...nestedTarget, ...nestedSource }; console.log(shallowMerged); // 输出: { data: { newValue: 10 } }（data 对象被覆盖） ``` 如需深拷贝，需使用递归或库如 `lodash.merge`。 - **属性覆盖规则**：默认后覆盖前。如果要以第一个对象为准（冲突时不覆盖），可以调整参数顺序： ```javascript const priorityMerged = { ...sourceObj, ...targetObj }; // targetObj 的属性优先 ``` - **性能**：对于大型对象，扩展运算符可能稍慢于Object.assign()，但差异通常可忽略。 #### 总结 - 使用 **Object.assign()** 当需要兼容旧浏览器或直接修改目标对象时。 - 使用 **扩展运算符** 当需要纯函数操作或现代代码风格时。 两种方法都高效可靠，根据场景选择即可。实际应用中，数组合并（如引用[1]和[4]）与此类似，但针对数组对象[^1][^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值