鼠标事件

鼠标移动到目标元素上的那一刻,首先触发mouseover 
之后如果光标继续在元素上移动,则不断触发mousemove 
如果按下鼠标上的设备(左键,右键,滚轮……),则触发mousedown 
当设备弹起的时候触发mouseup 
目标元素的滚动条发生移动时(滚动滚轮/拖动滚动条。。)触发scroll 
滚动滚轮触发mousewheel,这个要区别于scroll 
鼠标移出元素的那一刻,触发mouseout

事件注册 

平常我们绑定事件的时候用dom.onxxxx=function(){}的形式 
这种方式是给元素的onxxxx属性赋值,只能绑定有一个处理句柄。 
但很多时候我们需要绑定多个处理句柄到一个事件上,而且还可能要动态的增删某个处理句柄 
下面的事件注册方式就能解决这个需求。

先介绍一下四个方法

//IE以外
target.addEventListener(type,listener,useCapture)
target.removeEventListener(type,listener,useCapture);
target :文档节点、document、window 或 XMLHttpRequest。
type :字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture :是否使用捕捉,一般用 false。
//IE
target.attachEvent(type, listener);
target.detachEvent(type, listener);
target :文档节点、document、window 或 XMLHttpRequest。
type :字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
两者使用的原理:可对执行的优先级不一样,实例讲解如下:
ele.attachEvent("onclick",method1);
ele.attachEvent("onclick",method2);
ele.attachEvent("onclick",method3);
执行顺序为method3->method2->method1
ele.addEventListener("click",method1,false);
ele.addEventListener("click",method2,false);
ele.addEventListener("click",method3,false);
执行顺序为method1->method2->method3
兼容后的方法
var func = function(){};
//例:addEvent(window,"load",func)
function addEvent(elem, type, fn) {
if (elem.attachEvent) {
elem.attachEvent('on' + type, fn);
return;
}
if (elem.addEventListener) {
elem.addEventListener(type, fn, false);
}
}
//例:removeEvent(window,"load",func)
function removeEvent(elem, type, fn) {
if (elem.detachEvent) {
elem.detachEvent('on' + type, fn);
return;
}
if (elem.removeEventListener) {
elem.removeEventListener(type, fn, false);
}
} 

获取事件对象和事件源(触发事件的元素) 

function eventHandler(e){
//获取事件对象
e = e || window.event;//IE和Chrome下是window.event FF下是e
//获取事件源
var target = e.target || e.srcElement;//IE和Chrome下是srcElement FF下是target
} 

取消事件默认行为(例如点击一个<a>后不跳转页面而是执行一个函数) 

function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault();//IE以外
} else {
e.returnValue = false;//IE
//注意:这个地方是无法用return false代替的
//return false只能取消元素
}
} 

阻止事件冒泡 

function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation();//IE以外
} else {
e.cancelBubble = true;//IE
}
} 

事件委托

例如,你有一个很多行的大表格,在每个<tr>上绑定点击事件是个非常危险的想法,因为性能是个大问题。流行的做法是使用事件委托。

事件委托描述的是将事件绑定在容器元素上,然后通过判断点击的target子元素的类型来触发相应的事件。 
事件委托依赖于事件冒泡,如果事件冒泡到table之前被禁用的话,那以下代码就无法工作了。

myTable.onclick = function () {
e = e || window.event;
var targetNode = e.target || e.srcElement;
// 测试如果点击的是TR就触发
if (targetNode.nodeName.toLowerCase() === 'tr') {
alert('You clicked a table row!');
}
} 

事件(Event)知识整理(二)

事件流

DOM同时支持两种事件模型:捕获型事件和冒泡型事件 
并且每当某一事件发生时,都会经过捕获阶段->处理阶段->冒泡阶段(有些浏览器不支持捕获)

捕获阶段是由上层元素到下层元素的顺序依次。而冒泡阶段则正相反。

如下图 

当事件触发时body会先得到有事件发生的信息,然后依次往下传递,直到到达最详细的元素。这就是事件捕获阶段。 
还记得事件注册方法ele.addEventListener(type,handler,flag)吧,Flag是一个Boolean值,true表示事件捕捉阶段执行,false表示事件冒泡阶段执行。 
接着就是事件冒泡阶段。从下往上 依次执行事件处理函数(当然前提是当前元素为该事件注册了事件句柄)。
在这个过程中,可以阻止事件的冒泡,即停止向上的传递。 
阻止冒泡有时是很有必要的,例如

<div οnclick=funcA()>
<button οnclick=funcB()>Click</button>
</div> 

本意是如果点击div中按钮以外的位置时执行funcA,点击button时执行funcB。但是实际点击button时就会先后执行funcB,funcA。 
而如果在button的事件句柄中阻止冒泡的话,div就不会执行事件句柄了。

js事件(Event)知识整理相关推荐

  1. JS事件相关知识点整理

    JS事件相关知识点整理 JS事件的驱动机制 常见JS事件 点击事件---onclick 焦点事件 获取焦点事件---onfocus 失去焦点事件----onblur 域内容改变事件---onchang ...

  2. Js事件高级知识点整理

    Js事件高级 注册事件概述 给元素添加事件,成为注册事件或者绑定事件. 注册事件有两种方式:传统方式和方法监听方式. 传统注册方式 利用on开头的事件onclick < button οncli ...

  3. js事件Event对象(自定义事件对象 CustomEvent)

    文章目录 一.参考 二.Event 接口介绍 2.1 事件分类 三. 创建过时Event不推荐 3.1 document.createEvent 3.1.1 语法`var event = docume ...

  4. js事件冒泡、阻止事件冒泡以及阻止默认行为

    大家好,我是IT修真院武汉分院web第17期的学员吴三水,一枚正直纯洁善良的web程序员. 今天给大家分享一下,修真院官网js(职业)任务四,深度思考中的知识点--js事件冒泡.阻止事件冒泡以及阻止默 ...

  5. JS中的事件基础知识

    本文首发于个人博客:www.wyb.plus JS作为一门事件驱动型的语言,了解与事件有关的知识是十分必要的. JS中与事件有关的概念非常多,本文尽量整理完善. 作者:王雨波 qq:760478684 ...

  6. 面试率 90% 的JS事件循环Event Loop,看这篇就够了!! !

    面试率 90% 的JS事件循环Event Loop,看这篇就够了!! ! 事件循环(Event Loop)大家应该并不陌生,它是前端极其重要的基础知识.在平时的讨论或者面试中也是一个非常高频的话题. ...

  7. 前端(四)移动端js事件、bootstrap-学习笔记整理

    移动端js事件 移动端的操作方式和PC端是不同的,移动端主要用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件: touchstart: //手指放到屏幕上时触发 touchmov ...

  8. JS事件循环 Event Loop

    前言 刚学前端的时候一直听别人说 JS 是单线程.单线程.单线程的,其实完整的应该是在浏览器环境下 JS 执行引擎是单线程的. 那么什么是线程?为什么JS是单线程的? 1. 进程和线程 进程和线程的主 ...

  9. 2022前端知识整理:十、vue基础

    十.vue基础 2022前端知识整理:第十部分.vue基础,仅包含vue2.0相关知识,建议先完成html5.css3和JavaScript ES6之后再学习.部分图片未上传成功,稍后完善,请见谅. ...

最新文章

  1. Java Socket编程 - 基于TCP方式的二进制文件传输
  2. 操作系统的极简教程(一)
  3. CSS3的background-size:可以设置高宽 百分比 最大大小 最小大小
  4. 【调试】Linux下超强内存检测工具Valgrind
  5. python c 语言接口,## 人生苦短我用python[0x08] 使用ctypes调用c语言接口 ##
  6. ARM(IMX6U)裸机C语言版本LED驱动实验(汇编进入处理器SVC模式、SP堆内存、跳转main函数、链接起始地址)
  7. php中文网侵权事件,【杂谈】程序员删库跑路事件,php中文网的几点声明!
  8. 95-10-190-启动-DynamicConfigManager
  9. acill排序 java_字符串ASCII码排序
  10. storm - 常用命令
  11. python序列化类_python 序列化
  12. FLStudio20.8中文版水果萝卜编曲 新增中文语言
  13. centos8 默认nginx路径_centos8自定义目录安装nginx(教程详解)
  14. 如何安装mysql安装包_如何安装MySQL,MySQL两种安装方式
  15. C语言|编程|判断素数
  16. 2020软考高级系统分析师,你想知道的全在这
  17. 【自学oracle】韩顺平oracle视频教程学习笔记
  18. 希腊字母fai怎么打?
  19. jeecms mysql_jeecms学习笔记
  20. 【目标检测】CenterNet2代码解读

热门文章

  1. Vue底层实现原理概述
  2. WEB学习-CSS盒模型
  3. Android wechat 分享
  4. P3374 【模板】树状数组 1
  5. 破解石碑(区间动规)
  6. Android图片压缩(质量压缩和尺寸压缩)
  7. python多线程编程(2): 使用互斥锁同步线程
  8. SQL一对多特殊查询,取唯一一条
  9. 远程桌面解决(面对不同问题)连接办法
  10. 在Visual Studio 2008中编译snort-2.8.6.1.tar.gz