文档章节

js 事件委托

appleZ
 appleZ
发布于 2015/04/13 10:32
字数 189
阅读 43
收藏 0

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

js事件流分为冒泡捕捉两种方向,记录一个事件委托片段,注意兼容性:

html

<html>
<style>
ul{
	list-style:none;
}
</style>
<body>
	<ul id="ulele"><li>d</li><li>d</li><li>d</li><li>d</li><li>d</li><li>d</li><li>d</li><li>d</li><li>d</li><li>d</li><li>d</li></ul>
</body>
</html>

js

var target = document.getElementById("ulele");
EventListener = {
	add:function(target, type, handler){
		if(document.addEventListener){
			target.addEventListener(type, handler, false);
		}else if(document.attachEvent){
			target.attachEvent("on" + type, handler);
		}else{
			target["on" + type] = handler;
		}
	},
	remove:function(target, type, handler){
		if(document.removeEventListener){
			target.removeEventListener(type, handler, false);
		}else if(document.detachEvent){
			target.detachEvent("on" + type, handler);
		}else{
			target["on" + type] = null;
		}
	}
}
EventListener.add(target, "click", clickHandler);
//EventListener.removeListener(target, "click", clickHandler);
function clickHandler(e){
	var e = e || event, target = e.target || e.srcElement;
	
	/* if (e.preventDefault) { e.preventDefault();//IE以外 } else { e.returnValue = false;} return false 只能取消元素 stopPropagation() cancelBubble()*/
	
	if(target.nodeName.toLowerCase() == "li"){
		alert("pageX:"+ (e.pageX || e.x)  + ";pageY:" + (e.pageY || e.y));
	}
}

 

© 著作权归作者所有

appleZ
粉丝 1
博文 38
码字总数 9781
作品 0
深圳
私信 提问
加载中

评论(0)

【JS】JS事件绑定、事件监听、事件委托

在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等。这些名词是什么意思呢,有什么作用呢? (1)事件绑定 要想让 JavaScript...

osc_meg7rtm9
2019/02/27
3
0
JS 中的事件绑定、事件监听、事件委托是什么?

JS 中的事件绑定、事件监听、事件委托是什么? 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等。这些名词是什么意思呢,有什...

osc_yiec7bem
2018/06/29
45
0
javascript事件委托和jquery事件委托

元旦过后,新年第一篇。初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供...

osc_gepa6v61
2019/01/02
2
0
JS事件冒泡、事件捕获及事件委托

js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象。 并不是所有的事件都...

osc_ibhs3ho3
2019/10/16
1
0
Javascript的事件模型和Promise实现

1. Javascript的运行时模型——事件循环 JS的运行时是个单线程的运行时,它不像其他编程语言,比如C++,Java,C#这些可以进行多线程操作的语言。当它执行一个函数时,它只会一条路走到黑,不...

远方无风
2018/07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

垃圾收集器与内存分配策略

对象已死? 垃圾标记算法 1.引用计数算法 C++智能指针、Python 2.可达性分析算法 JavaGC Roots的根对象作为起始节点,通过引用链到某个对象不可达时,证明此对象不可能再被使用。 强引用:...

LoSingSang
昨天
27
0
Python--从集合中随机取出一个元素

Python--从集合中随机取出一个元素 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 有时候有一个这样的需求...

归子莫
昨天
27
0
iptables-F 后 SSH 连接断开

最近回收利用一台被征用做邮件服务的服务器,重新部署新的业务。 清理了所有的安装软件和目录文件后,调整了网络安全组规则,仅开放所需端口。 看了下防火墙的配置: # iptables -LChain I...

DEPAKIN
昨天
27
0
IDEA通过Maven打包JavaFX工程(OpenJFX11)

1 概述 最近研究JFX,写出来了但是打包不了,这。。。尴尬。。。 IDEA的文档说只支持Java8打成jar包: 尝试过直接使用Maven插件的package,不行,也尝试过Build Artifacts,也不行,各种奇奇...

氷泠
昨天
19
0
《一天一模式》— 命令模式

一、命令模式的概念 将“请求”封装成对象,以便使用不同的请求、队列或者日志来参数化其他对象。命令模式也支持可撤销的操作。 二、什么时候使用命令模式 调用者与实现者通常是一种紧耦合的...

XuePeng77
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部