js事件小记
参考javascript编程全解 javascript高级程序设计 javascript经典实例
对事件的处理方式称为事件处理程序或事件侦听器 ，对于一个元素或事件，只能设定1个事件处理程序，却可以同时设定多个事件监听器
1）设定为HTML元素的属性
<!DOCTYPE html>
<meta charset="UTF-8" />
<head></head>
<body>
<a href="http://www.baidu.com" onclick="console.log('haha');return false;">百度</a> </body>
上面将事件处理程序设定为html元素的属性，能在元素在载入的时候被设定
2)为了在页面在中使javascript代码与html分离，可以在在javascript中将事件处理程序设定为DOM元素的属性
<a href="http://www.baidu.com" id="btn">百度</a> <script type="text/javascript">
var button = document.getElementById("btn");
function test() {
console.log('haha');
return false;
} btn.onclick = test; </script> //上面这两种方案 通过将事件处理函数设为html元素的属性 和 element.onXXX = handler 的方式 都是默认冒泡的
2016 5 9 DOM0 级别的事件处理程序只能绑定一个
3）上面的两种方式中，对一个事件只能指定一种操作（覆盖），为了实现在一个事件响应多种操作，可以使用addEventListener（）方法
addEventListener(1,2,3)
参数1 事件
参数2 处理函数
参数3 true/false 指定是在捕获阶段还是冒泡阶段执行 省略第三个参数默认冒泡阶段执行（false冒泡阶段执行 true捕获阶段执行）
<button id="btn">big button</button> <script type="text/javascript">
var button = document.getElementById("btn"); button.addEventListener('click',function(){console.log('haha');},false);
button.addEventListener('click',function(){console.log('hello')},false); </script>
这里为button的click事件注册了两个事件侦听器，并且事件侦听器的触发顺序和注册的顺序相同
还可以将含有handleEvent()方法的对象指定为事件监听器
var button = document.getElementById("btn");
var listener = {
message: 'hello world',
handleEvent:function(e) {
console.log(this.message);
}
};
button.addEventListener('click',listener,false);
事件的触发
上面的图是DOM的事件流 其实它是融合了两种事件流 IE的事件冒泡和事件捕获
事件冒泡：事件开始由最具体的元素接收，逐级的向上传递到父节点
事件捕获：由不具体的节点（父节点）接收事件，具体的节点最后接收事件
一个完成的DOM事件流是这样的：在捕获阶段事件由父元素向目标元素传播事件，此时目标元素没有接收到事件，在目标阶段元素接收到事件然后在冒泡阶段事件逐级的向上传递
<body id='haha'>
<button id="btn">big button</button>
<script type="text/javascript">
var btn = document.getElementById('btn'); btn.onclick = function(event) {
console.log(event.eventPhase);
};//2 目标阶段 document.body.addEventListener('click',function(event){console.log(event.eventPhase,event.target.id,event.currentTarget.id);},true);
//1 btn haha 捕获阶段 event.target指向实际发生事件的目标 event.currentTarget指向实际处理事件的目标 document.body.onclick = function(event) {console.log(event.eventPhase)}; // 3 冒泡阶段 </script>
</body>
上面的例子详细的说明的DOM事件流的执行过程（event的eventPhase属性能显示出事件处于事件流的哪个阶段 1代表捕获阶段2目标阶段 3 冒泡阶段） 先是捕获阶段处理 显示1 btn haha 接着是目标阶段处理 显示2 接着是冒泡阶段 显示3
<body id='haha'>
<button id="btn">big button</button>
<script type="text/javascript">
var btn = document.getElementById('btn'); btn.onclick = function(event) {
console.log(event.eventPhase);
event.stopPropagation();
}; document.body.addEventListener('click',function(event){console.log(event.eventPhase,event.target.id,event.currentTarget.id);},true); document.body.onclick = function(event) {console.log(event.eventPhase)}; </script>
我在上面相同的代码中在目标阶段的处理函数中加了句event.stopPropagation() 它能立即停止事件在DOM中的传播，取消进一步的捕获或者冒泡
上面的输出是 1 btn hah 2 应为它阻止了事件在冒泡阶段的传播，所以在冒泡阶段的处理函数没有执行
在DOM level3中还引入了另一个方法 stopImmediatePropagation()
它还能阻止当前侦听器的其他侦听器的执行
<body id='haha'>
<button id="btn">big button</button>
<script type="text/javascript">
var btn = document.getElementById('btn'); function hello(event) {
console.log('hello');
event.stopImmediatePropagation(); }
function world(event) {
console.log('world');
} document.body.onclick = function() {
console.log('body');
} btn.addEventListener('click',hello,false);
btn.addEventListener('click',world,false); </script>
在上面的例子中你将两个事件侦听器的注册顺序改变会发现输出不同的结果，上面的例子中只输出了hello 并且在冒泡阶段body上的处理函数也没有执行
合理的利用冒泡，可以实现事件委托 如下
<body>
<ul id="container">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</body>
这样的页面结构中我们想单击li时获得li的内容，如果为每一个li都绑定事件侦听器的话，会增加对内存的占用，这时候我们就可以利用冒泡，来实现我们的功能
<ul id="container">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul> <script type="text/javascript">
var container = document.getElementById('container');
container.addEventListener('click',function(event){console.log(event.target.innerHTML);},false);
</script>
跨浏览器的通用的事件处理函数
function listenEvent(eventTarget,eventType,eventHandler) {
if(eventTarget.addEventListener) {//DOM level 2
eventTarget.addEventListener(eventType,eventHandler,false);
} else if(eventTarget.attachEvent) {//IE
eventType = "on" + eventType;
eventTarget.attachEvent(eventType,eventHandler);
} else {//DOM level 0
eventTarget["on" + eventType] = eventHandler;
}
}
跨浏览器的通用的停止事件监听函数
function removeListenEvent(eventTarget,eventType,eventHandler) {
if(eventTarget.removeEventListener) {//DOM level 2
eventTarget.removeEventListener(eventType,eventHandler,false);
} else if(eventTarget.detachEvent) {//IE /2016 3 23 改/
eventType = "on" + eventType;
eventTarget.detachEvent(eventType,eventHandler);
} else {//DOM level 0
eventTarget["on" + eventType] = null;
}
}
2016 5 9 封装更好的事件处理程序模块
var EventUtil = {
addHanler:function(element,type,handler){
if(element.addEventListener) {
element.addEventListener(type,handler,false);
} else if(element.attachEvent) {
element.attachEvent("on"+type,handler);
} else {
element["on"+type] = handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener) {
element.removeEventListener(type,handler,false);
} else if(element.detachEvent) {
element.detachEvent("on"+type,handler);
} else {
element["on"+type] = null;
}
},
/*兼容IE 在IE中DOM0方式绑定事件的时候 获取event对象是window的一个属性 通过attachEvent绑定事件的时候,既可以通过event直接获取事件对象
又可以通过window.event获取事件对象*/
getEvent:function(event) {
return event ? event : window.event;
},
/*当在DOM2的时候 event.target一定指向事件发生的对象 但是在DOM0的绑定事件的时候 window.event.srcElement是this*/
getTarget:function(event){
return event.target || event.srcElement;
},
/*returnValue属性相当于preventDefault()方法*/
preventDefault:function(event) {
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation:function(event){
if(event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelEvent = true;
}
}
}
js事件小记的更多相关文章
- js事件相关面试题
说是面试题,其实也相当于是对js事件部分知识点的一个总结.简单内容一笔带过,了解详情我都给出了参考链接,都是之前写的一些相关文章.JavaScript本身没有事件模型,但是环境可以有. DOM:add ...
- dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- 什么是JS事件冒泡？
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...
- js事件浅析
js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...
- js 事件大全
Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- JS事件
JS事件: 声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event; 所以在下面用到 event 的地方都用 oEvent 代替 1)doucument的 ...
- 原生js事件和jquery事件的执行顺序问题
场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...
随机推荐
- Python--类-例子
class Base: def __init__(self): self.data = [] def add(self, x): self.data.append(x) def addtwice(se ...
- Shooting Algorithm
Shooting算法是Wenjiang提出的一种优化Lasso(L1 Regularization)和Bridge Regression的算法, 本文以Lasso为例. 对于线性回归问题$\mathb ...
- shell来start、stop、restart应用程序模板
这里使用shell中的case语法: case分支语句格式如下: case $变量名 in 模式1) 命令列表 ;; 模式2) 命令列表 ;; *) ;; esac case行尾必须为单词“in”,每 ...
- 安卓开发笔记——深入Activity
在上一篇文章<安卓开发笔记——重识Activity >中,我们了解了Activity生命周期的执行顺序和一些基本的数据保存操作,但如果只知道这些是对于我们的开发需求来说是远远不够的,今天我 ...
- matlab processing for video
[filename,pathname,fileindex]=uigetfile('*.avi','请选择一个Avi文件'); video_info=aviinfo([pathname filename ...
- Win10系统下编译GDAL1.9.2版本
环境说明: 1.Win10企业版.64位: 2.VS2012旗舰版: 3.GDAL1.9.2 GADL编译 1.解压GDAL压缩包至F:\GDAL\gdal-1.9.2: 2.设置GDAL编译后安装目 ...
- 2014 网选 广州赛区 hdu 5025 Saving Tang Monk（bfs+四维数组记录状态）
/* 这是我做过的一道新类型的搜索题!从来没想过用四维数组记录状态! 以前做过的都是用二维的!自己的四维还是太狭隘了..... 题意:悟空救师傅 ! 在救师父之前要先把所有的钥匙找到! 每种钥匙有 k ...
- 【原创】C#搭建足球赛事资料库与预测平台(3) 基础数据表设计
本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html 开源C#彩票数据资料库系列文章总目录:http://www.cn ...
- 左倾堆(二)之 C++的实现
概要 上一章介绍了左倾堆的基本概念,并通过C语言实现了左倾堆.本章是左倾堆的C++实现. 目录1. 左倾堆的介绍2. 左倾堆的图文解析3. 左倾堆的C++实现(完整源码)4. 左倾堆的C++测试程序 ...
- Awk by Example--转载
原文地址: http://www.funtoo.org/Awk_by_Example,_Part_1?ref=dzone http://www.funtoo.org/Awk_by_Example,_P ...