初步理解JS的事件机制
一、事件流(捕获,冒泡)

1 var btn5 = document.getElementById('btn5');
2 btn5.onclick=function(){
3 console.log(this.id);//btn5
4 };

1 var btn2 = document.getElementById('btn2');
2 var handlers = function () {
3 console.log(this.id);
4 };
5
6 btn2.addEventListener('click',handlers,false);
7
8 btn2.removeEventListener('click',handlers.false);

//IE用了attachEvent(),detachEvent(),接收两个参数,事件名称和事件处理程序,通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段,所以平时为了兼容更多的浏览器最好将事件添加到事件冒泡阶段,IE8及以前只支持事件冒泡;
1 var btn3 = document.getElementById('btn3');
2 var handlers2=function(){
3 console.log(this===window);//true,注意attachEvent()添加的事件处理程序运行在全局作用域中;
4 };
5 btn3.attachEvent('onclick',handlers2);

1 //创建的方法是addHandlers(),removeHandlers(),这两个方法属于一个叫EventUtil的对象;但是这个没有考虑到IE中作用域的问题,不过就添加和移除事件还是足够的。
2
3 var EventUtil = {
4 addHandlers: function (element, type, handlers) {
5 if (element.addEventListener) {
6 element.addEventListener(type, handlers, false);
7 } else if (element.attachEvent) {
8 element.attachEvent(on + type, handlers);
9 } else {
10 element['on' + type] = handlers;
11 }
12 },
13 removeHandlers: function (element, type, handlers) {
14 if (element.removeEventListener) {
15 element.removeEventListener(type, handlers, false);
16 } else if (element.detachEvent) {
17 element.detachEvent(on + type, handlers);
18 } else {
19 element['on' + type] = null;
20 }
21 }
22 };


1 var btn4=document.getElementById('btn4');
2 var handlers3=function(){
3 console.log('123')
4 };
5 EventUtil.addHandlers(btn4,'click',handlers3);
6 //……
7 EventUtil.removeHandlers(btn4,'click',handlers3);


1 //this,target,currentTarget,this===currentTarget
2 $('#outer').on('click','#center',function(e){
3 console.log(this.id);//on()中间的参数是个过滤器,相当于将事件绑定到了#center上;此时点击#center将不会触发事件
4 console.log(e.target.id);
5 console.log(e.currentTarget.id);
6 });
7
8 $('#outer').on('click',function(e){
9 console.log(this.id);
10 console.log(e.target.id);
11 console.log(e.currentTarget.id);
12 });
13
14 event.stopPropagation()不能简单说阻止了事件的冒泡,其实也阻止了事件的继续捕获,确切的说应该是阻止事件的进一步传播
15
16 var d1 = document.getElementById('d1');
17 d1.addEventListener('click', function (evt) {
18 console.log('d1');
19 evt.stopPropagation();
20 }, true);
21 var d2 = document.getElementById('d2');
22 d2.addEventListener('click', function () {
23 console.log('d2');
24 }, true);


1 var d1 = document.getElementById('d1');
2 d1.addEventListener('click', function (evt) {
3 console.log('d1');
4 evt.stopImmediatePropagation();
5 }, true);
6 d1.addEventListener('click', function (evt) {
7 console.log('d1+1');
8 }, true);
9 var d2 = document.getElementById('d2');
10 d2.addEventListener('click', function () {
11 console.log('d2');
12 }, true);



1 var EventUtil = {
2 addHandler: function (element, type, handler) {
3 if (element.addEventListener) {
4 element.addEventListener(type, handler, false);
5 } else if (element.attachEvent) {
6 element.attachEvent(on + type, handler);
7 } else {
8 element['on' + type] = handler;
9 }
10 },
11
12 getEvent: function (event) {
13 return event ? event : window.event;
14
15 },
16
17 getTarget: function (event) {
18 return event.target || event.srcElement;
19 },
20
21 preventDefault: function (event) {
22 if (event.preventDefault) {
23 event.preventDefault();
24 } else {
25 event.returnValue = false;
26 }
27 },
28
29 stopPropagation: function (event) {
30 if (event.stopPropagation) {
31 event.stopPropagation();
32 } else {
33 event.cancelBubble = true;
34 }
35 },
36
37 removeHandler: function (element, type, handler) {
38 if (element.removeEventListener) {
39 element.removeEventListener(type, handler, false);
40 } else if (element.detachEvent) {
41 element.detachEvent(on + type, handler);
42 } else {
43 element['on' + type] = null
44 }
45 }
46
47 };

1 var myBtn=document.getElementById('my-btn');
2 btn.onclick=function(event){
3 event=EventUtil.getEvent(event);
4 EventUtil.preventDefault(event);
5 };

1 var myLinks=document.getElementById('my-links');
2 myHandlers=function(event){
3 event=EventUtil.getEvent(event);
4 var target=EventUtil.getTarget(event);
5
6 switch(target.id){
7 case 'item-1':
8 location.href='http://www.cnblogs.com/lazychen/';
9 break;
10 case 'item-2':
11 document.title='event';
12 break;
13 case 'item-3':
14 console.log('hi');
15 break;
16 }
17 };
18 EventUtil.addHandler(myLinks,'click',myHandlers);

- 因为把事件绑定到了父节点上,因此省了绑定事件。就算后面新增的子节点也有了相关事件,删除部分子节点不用去销毁对应节点上绑定的事件
- 父节点是通过event.target来找对应的子节点的。(事件处理程序中的this值始终等于currentTarget的值,指向的是绑定到的那个元素)
初步理解JS的事件机制的更多相关文章
- js的事件机制二
js的事件机制二 1.给合适的HTML标签添加合适的事件 onchange-----select下拉框 onload-----body标签 单双击-----用户会进行点击动作的HTML元素 鼠标事件 ...
- js的事件机制
js的事件机制 解释:当我们的行为动作满足了一定的条件后,会触发某事务的执行. 内容: 1.单双击事件 单击:onclick 当鼠标单击时候会触发 双击:ondbclick 当鼠标双击时候会触发 2. ...
- 深入理解 JS 引擎执行机制(同步执行、异步执行以及同步中的异步执行)
首先明确两点: 1.JS 执行机制是单线程. 2.JS的Event loop是JS的执行机制,深入了解Event loop,就等于深入了解JS引擎的执行. 单线程执行带来什么问题? 在JS执行中都是单 ...
- 我也来说说js的事件机制
原文链接:http://www.w3cfuns.com/notes/17398/8062de2558ef495ce6cb7679f940ae5c.html 学js,不懂事件机制,基本可以说学了js,就 ...
- 一张图看懂 JS 的事件机制
一.为什么 JavaScript 单线程 假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 为了避免复杂性, JS ...
- 深入理解React:事件机制原理
目录 序言 DOM事件流 事件捕获阶段.处于目标阶段.事件冒泡阶段 addEventListener 方法 React 事件概述 事件注册 document 上注册 回调函数存储 事件分发 小结 参考 ...
- node.js 的事件机制
昨天到今天, 又看了一边node 的事件模块, 觉得很神奇~ 分享一下 - -> 首先, 补充下对node 的理解: nodeJs 是一个单进程单线程应用程序, 但是通过事件和回调支持并发 ...
- C#学习之初步理解委托、事件、匿名方法和Lambda
最经在学习LinqtoSql,然后扯到Lambda表达式,然后扯到匿名方法,然后扯到委托,最后扯到事件处理...后来发现对委托这个概念和事件处理这个过程理解得不是很清晰,遂得一下学习笔记.那里说得不对 ...
- js内部事件机制--单线程原理
原文地址:https://www.xingkongbj.com/blog/js/event-loop.html http://www.haorooms.com/post/js_xiancheng ht ...
随机推荐
- oracle链接报错shared memory realm does not exist
问题描述: 前两天能够正常链接,今天来了突然不能链接,原因不详. 处理方法: 连接linux进行如下操作: 1.sqlplus /nolog 2.conn / as sysdba 3.startup ...
- etl-p
java excel 导入数据库 上传文件包 解压导入excel包 导入mysql
- 移动web开发问题和经验总结
前言 这里大部分是自己遇到过的情况,还有一部分借鉴了同行的文章,如果大家有遇到其它坑,欢迎提出来一起研究. 知识要点 1. Meta标签 1.禁止用户缩放页面,页面强制让文档的宽度与设备的宽度保持1: ...
- git学习补充
关系图 git checkout -- target 放弃 cached 中 对 target 文件内容已作的修改 git checkout . 放弃当前目录下对于 cached 的所有修改. 对比: ...
- H5开发获取微信系统的地址列表
前段时间做了H5开发的项目,需要是要把微信系统自带的地址也给添加进来,意识也就是说用户可以选择项目的地址和微信自带的地址 效果图是这样的: 对就是这个需求 下面给出H5 页面下的微信添加HTML 然 ...
- 集合综合练习<一>
1208421001,关羽,数学,93 1208421001,关羽,英语,88 1208421002,张飞,语文,82 1208421002,张飞,数学,83 1208421002,张飞,英语,89 ...
- 【NOIP2016提高A组五校联考4】square
题目 分析 首先,设\(f_{i,j}\)表示最大的以(i,j)为左下角的正方形的边长. 转移显然,\(f_{i,j}=\max(f_{i-1,j},f_{i,j-1},f_{i-1,j-1})+1\ ...
- 【NOIP2016提高A组模拟9.15】Map
题目 分析 发现,当原图是一棵树的时候,那么新建一条边后,就会变成环套树, 而环内的所有点对都是安全点对,如果环中有k个点,答案就是\(k(k-1)\) 联想到,当把原图做一遍tarjan缩点,每个环 ...
- python 操作符**与*的用法
- VUE实现限制输入框最多输入15个中文,或者30个英文
vue项目,输入框限制输入15个中文,或者30个英文 <input type="text" v-model="groupName" class=" ...