文档章节

js 事件委托

appleZ
 appleZ
发布于 2015/04/13 10:32
字数 189
阅读 30
收藏 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
码字总数 9774
作品 0
深圳
Javascript的事件模型和Promise实现

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

远方无风
07/12
0
0
腾讯web前端开发工程师笔试题及答案

腾讯web前端开发工程师笔试题及答案 1、 如何实现事件委托? 首先要知道什么是事件委托。 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但...

至简6
2014/07/29
0
0
《高性能javascript》 领悟随笔之-------DOM编程篇(二)

《高性能javascript》 领悟随笔之-------DOM编程篇二   序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整个页面文档。DOM编程性能一直以来都...

grootzhang
2016/05/10
0
0
JS和JQ的event对象对比和应用

currentTarget 事件冒泡阶段所在的DOM target, originalTarget原始的DOM 代码测试: 结果分析: 总结: js的event参数中,不管是, , 都是指向第一个触发事件的元素(还没冒泡),而在click事...

前端届的科比
2014/08/11
0
0
JS和JQ的event对象对比和应用

摘要 js和jq的event对象大同小异,本文简单对比下它们的'click'事件下的不同和应用 js jquery jq event 代码测试: ? 结果分析: ? 总结: js的event参数中,不管是, , 都是指向第一个触发事...

波利beryl
2014/11/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

centos7安装redis及开机启动

配置编译环境: sudo yum install gcc-c++ 下载源码: wget http://download.redis.io/releases/redis-3.2.8.tar.gz 解压源码: tar -zxvf redis-3.2.8.tar.gz 进入到解压目录: cd redis-3......

hotsmile
37分钟前
0
0
Confluence 6 数据库和临时目录

数据库 所有的其他数据库,包括有页面,内容都存储在数据库中。如果你安装的 Confluence 是用于评估或者你选择使用的是 Embedded H2 Database 数据库。数据库有关的文件将会存储在 database...

honeymose
51分钟前
1
0
day62-20180820-流利阅读笔记

1.今日导读 2.带着问题听讲解 3.新闻正文(中英文对照) 4.重点词汇 5.拓展内容

aibinxiao
今天
0
0
分布式锁实现及对比

一、问题介绍 日常工作中很多场景下需要用到分布式锁,例如:任务运行(多个节点同一时刻同一个任务只能在一个节点上运行(分片任务除外)),交易接受(前端交易请求发送时,可能由于两次提...

yangjianzhou
今天
6
0
【AI实战】快速掌握TensorFlow(二):计算图、会话

在前面的文章中,我们已经完成了AI基础环境的搭建(见文章:Ubuntu + Anaconda + TensorFlow + GPU + PyCharm搭建AI基础环境),以及初步了解了TensorFlow的特点和基本操作(见文章:快速掌握...

雪饼
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部