javascript --- 事件托付

news/2024/7/5 1:42:29

javascript 之 事件托付

长处1、提高性能(仅仅须要对父级进行操作,子节点相同会拥有其相关属性和方法)

    2、对于新加入的事件。也让其拥有父级事件的属性

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="text/javascript">//事件托付//让父级托付(冒泡事件)//长处:1、提高性能window.οnlοad=function  () {var oUl=document.getElementById('myUl');var aLi=document.getElementsByTagName('li');var oInput=document.getElementById('input1');var iNow=aLi.length;/*for (var i = 0; i < aLi.length; i++) {aLi[i].οnmοuseοver=function  () {this.style.background="red";}aLi[i].οnmοuseοut=function  () {this.style.background="";}};*/oUl.οnmοuseοver=function  () {//找到操作对象,event,对象;事件源:无论在哪个事件中的那个元素就是事件源var event=event||window.event;var target=event.target||event.srcElement;//找元素的标签名NodeName//alert(target.nodeName)if(target.nodeName.toLowerCase()=='li'){//仅仅让指定的子节点拥有某些属性target.style.background="red";}}oUl.οnmοuseοut=function  () {//找到操作对象,event,对象;事件源:无论在哪个事件中的那个元素就是事件源var event=event||window.event;//w3c标准和Ie标准var target=event.target||event.srcElement;if(target.nodeName.toLowerCase()=='li'){target.style.background="";}			}/*	for (var i = 0; i < aLi.length; i++) {aLi[i].οnclick=function(){alert("123");}};*//*	oUl.οnclick=function  () {alert("123");//发生冒泡。!!托付了让ul触发。让父级做托付}*///事件托付的长处2:新加入的元素,还有之前的事件的属性oInput.οnclick=function  () {iNow++;var oLi=document.createElement('li');//自身没有事件,可是其父级有。插入新节点后,其父级的事件会影响到当前事件oLi.innerHTML=1111*iNow;oUl.appendChild(oLi)}}</script>
</head>
<body><input type="button" value="加入" id='input1'><ul id="myUl"><li>1111</li><li>2222</li><li>3333</li><li>4444</li></ul>
</body>
</html>




http://lihuaxi.xjx100.cn/news/286077.html

相关文章

很多程序员编程时都戴耳机?他们在听什么

&#xff08;给视学算法加星标&#xff09;转自&#xff1a;网络听说很多程序员工作时都戴耳机&#xff1f;他们在听什么呢&#xff1f;观点一&#xff1a;非诚勿扰&#xff0c;想静静1、啥也没听&#xff0c;只是带着耳机而已。只是想告诉别人不要打扰我&#xff0c;选择性屏蔽…

线段树 ---- CF452F. Permutation(线段树维护序列Hash)

题目链接 题目大意&#xff1a; 就是给你一个全排列&#xff0c;问你是否存在一个cab2c\frac{ab}{2}c2ab​ 满足ccc的位置在a,ba,ba,b之间 解题思路&#xff1a; 首先我们先按顺序遍历&#xff0c;我们假设遍历到的数是中间那个数就是ccc,那么它要存在的答案的话就是存在一个…

到底是什么特征影响着CNN的性能?

作者 | 刘畅 编辑 | Jane出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09;开门见山。最近阅读了一篇论文&#xff0c;加上看了一些之前的工作。记录一下&#xff0c;CNN 到底学到了什么东西&#xff0c;或者换句话讲。到底是什么样的特征在影响着CNN 的性能&#xff1…

hdu 2896:病毒侵袭

Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)            Total Submission(s): 18206 Accepted Submission(s): 4541 Problem Description当太阳的光辉逐渐被月亮遮蔽&#xff0c;世界失去了光明&#xff0c;大地迎来…

poj1548(最小路径覆盖问题)

题意&#xff1a;相当于给出N个坐标点&#xff0c;因为机器人只能向下或者向右走&#xff0c;所以如果能到达其他点&#xff0c;则连接这两个点&#xff0c;即line[i][j]1 最小路径覆盖数: 对于一个DAG&#xff08;有向无环图&#xff09;&#xff0c;选取最少条路径&#xff0…

Prime Path(bfs)广度优先搜索

题目描述 The ministers of the cabinet were quite upset by the message from the Chief of Security stating that they would all have to change the four-digit room numbers on their offices. — It is a matter of security to change such things every now and the…

一些改进模型速度/精度的工程方法

点击上方“视学算法”&#xff0c;选择加"星标"或“置顶”重磅干货&#xff0c;第一时间送达作者&#xff1a;Captain Jackhttps://zhuanlan.zhihu.com/p/92025012本文已由作者授权&#xff0c;未经允许&#xff0c;不得二次转载一些自己的工作经验总结&#xff0c;用…

HDU4160(最小路径覆盖问题)

题意&#xff1a;当满足条件wi<wj,hi<hl和li<lj时&#xff0c;求解通过优化嵌套给定的娃娃可以获得的最外层洋娃娃的最小数量。 思路&#xff1a;如果嵌套的娃娃越多&#xff0c;则剩下的娃娃就越少&#xff0c;意味着单独出来的娃娃越少&#xff0c;转换为求解最小路…