初步理解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 ...
随机推荐
- js 学习三 Array
1.数组的长度 var sequence = [1, 1, 2, 3, 5, 8, 13]; sequence .length //7 2.字符串转换成数组 string.split() var my ...
- killall - 以名字方式来杀死进程
SYNOPSIS (总览) killall [-egiqvw] [-signal] name ... killall -l killall -V DESCRIPTION (描述) killall 发送 ...
- python编码环境安装与基本语法
一.pycharm的基本使用 1.python以及pycharm的安装 python的版本选择:3.x版本就行 pycharm的版本选择:社区版就够用 pycharm只是一个编写工具,python才是 ...
- Linux学习--第十二天--服务、ps、top、pstree、kill、&、jobs、fg、vmstat、dmesg、free、uptime、uname、crontab、ls
服务分类 linux服务分为rpm包默认安装的服务和源码包安装的服务. rpm包默认安装的服务分为独立的服务和基于xinetd服务. 查询已安装的服务 rpm包安装的服务 chkconfig --li ...
- 测试 windows 发布日志
<script>alert("hellow world")</script>
- Codeforces 989 P循环节01构造 ABCD连通块构造 思维对云遮月参考系坐标轴转换
A 直接判存不存在连续的三个包含A,B,C就行 /*Huyyt*/ #include<bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a ...
- poj1419 Graph Coloring 最大独立集(最大团)
最大独立集: 顶点集V中取 K个顶点,其两两间无连接. 最大团: 顶点集V中取 K个顶点,其两两间有边连接. 最大独立集=补图的最大团最大团=补图的最大独立集 #include<iostream ...
- json与string与map的理解
json是一种特殊格式的string字符串,也就是json也是string类型,只是这种string是有格式的,那么他的格式就是类似map的格式[key:value] 举例子: Map map = r ...
- 【30分钟学完】canvas动画|游戏基础(extra1):颜色那些事
前言 本篇主要讲解关于计算机颜色系统的概念,后续结合一些canvas的应用.因为是"你不知道也没关系"的边缘知识,所以作为本系列教程的扩展,没有兴趣的同学可以跳过. 开始我们万紫千 ...
- ZROI 19.08.11模拟赛
传送门 写在前面:为了保护正睿题目版权,这里不放题面,只写题解. dlstql,wsl A \(10pts:\) \(a=100,T=100\),对每个排列构造一个反的,一步到位即可. \(20pts ...