javascript --- 事件托付

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>

javascript --- 事件托付相关推荐

javascript事件列表解说
javascript事件列表解说事件浏览器支持解说一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
【探讨】javascript事件机制底层实现原理
前言又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...
javaScript事件（二）事件处理程序
一.事件二.事件流以上内容见:javaScript事件(一)事件流三.事件处理程序前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
onpaste事件不生效_从实际开发中来看JavaScript事件循环的使用场景
前言: 本文是介绍结合DOM事件流和JavaScript事件循环解决一个工作中的实际问题的过程,很多东西不只是面试的时候才会用得到文中涉及到的代码demo地址:drag-and-eventloop ...
javascript 事件对象
btn.onclick = function (event) {// event 就是事件对象var e = event || window.event; // window.event是兼容低版本I ...
JavaScript事件详解-jQuery的事件实现（三）
正文本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
JavaScript 事件入门知识
JavaScript事件是由访问Web页面的用户引起的一系列操作; 例如:用户点击;当用户执行某些操作的时候,再去执行一系列代码; 一事件介绍事件一般是用于浏览器和用户操作进行交互;最早是IE和N ...
JavaScript事件绑定
本文介绍一些JavaScript事件绑定的常用方法及其优缺点,同时在最后展示一个由 Dean Edwards 写的一个比较完美的事件绑定方案. 传统方式 element.onclick = funct ...
我理解的javascript事件循环(一)
javascript事件循环分为2种:一种是浏览器端事件循环,一种是node端事件循环. 此文只是捋一捋我对浏览器端事件循环的理解. 前言我们都知道 JavaScript 是一门单线程语言,这意味着 ...

javascript --- 事件托付

javascript --- 事件托付相关推荐

最新文章

热门文章