JS中的事件
事件中的几种实现方式
Dom0时代
1、直接在html的属性中写JS代码
<div onclick="alert(4);">Div1 Element</div>
2、定义一个函数，赋值给html元素的onXXX属性
<div onclick="clk()">Div Element</div>
<script type="text/javascript">
function clk(){
//....
}
</script>
3、使用element.onXXX方式
<div id="d3">Div Element</div>
<script type="text/javascript">
var d3 = document.getElementById('d3');
d3.onclick = function(){
//...
}
</script>
Dom2时代
4、添加事件方式，使用addEventListener或IE专有的attachEvent
事件流
官方的定义：事件按照从最特定的事件目标到最不特定的事件目标(document对象或者body)的顺序触发。
也可说，从页面中接收事件的顺序。也就是说当一个事件产生时，这个事件的传播过程，就是事件流。
事件不是单一的，比如：点击某个按钮，其实也点击了包含按钮的DIV、文档bod、document.
<body onclick="alert(3)">
<div onclick="alert(2)">
<button onclick="alert(1)">测试按钮</button>
</div>
</body>
在IE中，冒泡，会按这个顺序输出:1,2,3;
但在Netscape Navigator 4.0中则是‘反的’，它所支持的是捕获：输出3,2,1;
而DOM标准中事件流将这两种方式结合
window -> document -> body -> div -> button -> button -> div -> body -> document -> window;
这某些情况下，我们可能就需要去阻止事件流的传播：
function stopEvent (evt) {
var e = (evt != null) ? evt : window.event;
if (window.event) {
e.cancelBubble=true; // ie
} else {
e.stopPropagation(); // 标准组织
}
}
绑定、解绑、参数、事件对象在IE与W3C中的区别
Evt.extend({
// 添加事件
on : function(ele,type, fn){
if(document.addEventListener){
ele.addEventListener(type, fn, false);
}else if(document.attachEvent){
ele.attachEvent('on' + type, fn);
}else{
ele['on' + type] = fn;
}
},
// 解除事件
un : function(ele,type, fn){
if(document.removeEventListener){
ele.removeEventListener(type, fn);
}else if(document.detachEvent){
ele.detachEvent(type, fn);
}else{
ele['on' + type] = null;
}
},
/*点击*/
click : function(ele,fn){
this.on(ele,'click',fn);
},
// ...
});
Event接口(IE低版本浏览器不做专门的讨论)
JS里并没有严格的接口概念，只是为程序提供了某个对象拥有某些属性或者方法的描述
Event对象实现Event接口或子接口，声明了该种事件类型的详细信息。
其中Event是基础接口，UIEvent 和 MutationEvent是他的子接口。而MouseEvent又是UIEvent的子接口
Event 接口具有如下属性和方法：
Type 指明事件的类型
Target 发生事件的节点 // srcElement
currentTarget 事件当前传播到达的节点。
eventPhase 当前所处的事件传播阶段（捕获、目标、冒泡）
timeStamp 事件发生的时间点（时间戳）
cancelable 声明事件是否取消默认动作
bubbles 声明事件时候在文档中起泡
stopPorpagation() 阻止冒泡 // cancelBubble
preventDefault 阻止默认动作的执行
...
UIEvent接口属性
Event的子接口，在其基础上定义了两个新的属性：
view 发生事件的window对象
detail 提供事件的额外信息
MouseEvent 接口属性
是UIEvent的子接口，在UIEvent基础上定义了下列属性
button mousedown click 等事件中，鼠标键的状态（0鼠标左键2鼠标右键）
altKey ctrlKey metaKay shiftKey 在鼠标事件发生时。是否按下了该键
clientX \Y 事件发生时，鼠标指针相对于浏览器左上角的坐标
screenX\Y 相对于显示器左上角的坐标
...
事件的代理与委托
通过事件的冒泡机制来实现的
优点：
1、是可以节省大量的内存占用，减少事件注册，比如在table上可以代理所有td的click事件
2、对新增的子对象不需要再次绑定事件，适于动态内容部分
缺点：
不能所有的事件都用代理，不应该触发的元素也被绑上了事件。
function delegate(pid, eventType, selector, fn) {
var parent = $$.$id(pid);
function handle(e){
var target = $$.GetTarget(e);
console.log(target.nodeName)
if(target.nodeName.toLowerCase()=== selector || target.id === selector || target.className.indexOf(selector) != -1){
fn.call(target);
}
}
parent[eventType]=handle;
}
delegate('table','onclick','td',function(){
this.style.color='white'
this.style.background='red'
})
自定义事件
//将有参数的函数封装为无参数的函数
function createFunction(obj, strFunc) {
var args = []; //定义args 用于存储传递给事件处理程序的参数
if (!obj) obj = window; //如果是全局函数则obj=window;
//得到传递给事件处理程序的参数
for (var i = 2; i < arguments.length; i++){
// alert(arguments[i]);
args.push(arguments[i]);
}
//用无参数函数封装事件处理程序的调用
return function() {
obj[strFunc].apply(obj, args); //将参数传递给指定的事件处理程序
}
}
function class1() {
}
class1.prototype = {
show: function() {
this.onShow();
},
onShow: function() { }
}
function objOnShow(userName) {
alert("hello," + userName);
}
function test() {
var obj = new class1();
var userName = "test";
obj.onShow = createFunction(null, "objOnShow", userName);
console.log(obj.onShow)
obj.show();
}
test()
JS中的事件的更多相关文章
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- js中冒泡事件和捕获事件
js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...
- 看懂此文，不再困惑于 JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...
- js中冒泡事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- DOM 以及JS中的事件
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- js中的事件，内置对象，正则表达式
[JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按 ...
- JS中的事件以及DOM 操作
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
- JS中的事件&对象
一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...
- JS学习五(js中的事件)
[JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/ ...
随机推荐
- 微信开发中遇到“当前页面的url未注册”问题
在公众号后台设置支付授权目录,完全按照规则去设定的,但是在实际测试中会出现“当前页面的url未注册”的问题,反复确认后发现目录并没有问题,唯一的区别就是大小写不同. 但是一般url不都是不区分大小写的 ...
- 介绍开源的.net通信框架NetworkComms框架 源码分析（二）ConnectionInfo
原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架 作者是英国人 以前是收费的 目前作者已经开源 许可是 ...
- iOS阶段学习第19天笔记（协议-Protocol）
iOS学习(OC语言)知识点整理 一.关于协议(Protocol)的介绍 1)概念:协议指多个对象之间协商的一个接口对象,协议提供了一些方法用在协议的实现者和代理者 之间通讯的一种方式 2) ...
- 第三讲：WCF介绍（3）
代码 https://yunpan.cn/cPns5DkGnRGNs 密码:3913 前面我们通过一个小的例子,大概了解的WCF. 这里我们补充下 EndPoint 配置 A,B,C 中 ...
- Eclipse导入Java项目时“No projects are found to import”错误的处理
用Eclipse导入Java项目时,经常会出现“No projects are found to import”错误(尤其是导入网上下载的项目时),这是因为文件夹里面没有.project和.class ...
- 利用Yii框架中的collections体验PHP类型化编程
注:20150514 看过 惠新宸 关于PHP7的PPT后,看到了这一特性将被支持. Scalar Type Declarations function foo(int num) function ...
- Scala确实是门好语言
看完了一本Scala的书,整体感觉很不错,语法很简洁,对用惯了脚本语言的人来说语言特性稍微有点复杂,不过对Java用户应该没有压力. 最牛叉的有两点:并发.面向领域编程
- Windows台的FailOver群集简介
首先,您需要有一些服务器硬件方面知识. 我们介绍Windows平台的FailOver群集,以多个站点场景为例,如下图示: 八个结点NODE,Windows的FailOver群集,依赖SAN存储同步各个 ...
- GJM : Protobuf -NET 相比Json 传输速度只需要1/3 解析只需要1/10
在序列化速度的跑分中,Protobuf一骑绝尘,序列化速度快,性能强,体积小,所以打算了解下这个利器 1:安装篇 谷歌官方没有提供.net的实现,所以在nuget上找了一个移植的 Nuget里搜索Pr ...
- 点击div全选中再点击取消全选div里面的文字
想做一个就是点击一个div然后实现的功能是div里面的文字都成选中状态,然后就可以利用浏览器的自带的复制功能,任意复制在哪里去了 在网上百度了一下 然后网上的答案感觉很大的范围 然后一些搜索 然后就锁 ...