JavaScript 之 事件(详解)
一、注册事件的三种方式
1、直接事件方式
语法格式:
变量名.on事件名 = function() {}
注意:这种方式无法给同一对象的同一事件注册多个事件处理函数
2、addEventListener 方式(IE9 以后才支持)
语法格式:
变量名.addEventListener(事件名,function(){})
Demo :
// 浏览器兼容性问题 IE9以后才支持
btn.addEventListener('click', function () {
alert('hello world');
}) btn.addEventListener('click', function () {
alert('hello javascript');
})
3、attachEvent 方式(IE老版本特有的方法 IE6-10坚持)
语法格式:
变量名.attachEvent(on事件名,function(){})
Demo :
// 第一个参数,事件的名称前要加 on
btn.attachEvent('onclick', function () {
alert('hello world');
}); btn.attachEvent('onclick', function () {
alert('hello javascript');
});
由于以上的三种方式存在兼容问题,下面来封装一个函数来解决这个问题;
// 处理注册事件的兼容性问题
// element 事件源 eventName 事件名称 fn事件函数
function addEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, fn);
} else {
// 相当于 element.onclick = fn;
element['on' + eventName] = fn;
}
}
二、移除事件的三种方式
1、直接事件方式移除事件
语法格式:
变量名.on事件名 = null;
Demo :
btn.onclick = function () {
alert('hello world);
// 移除事件
btn.onclick = null;
}
2、addEventListener 移除事件
使用这种方式移除事件的时候,不能像注册的时候使用匿名函数了,其中提供了 removeEventLister() 的方法
语法格式:
变量名.removeEventListener(事件名, function)
Demo:
// 声明一个函数
function btnClick () {
alert('hello world');
// 移除事件
btn.removeEventListener('click', btnClick);
}
btn.addEventListener('click', btnClick);
3、attachEvent 移除事件
使用这种方式移除事件的时候,也不能使用匿名函数,使用 detachEvent() 来移除事件.
语法格式:
变量名.detachEvent(on事件名,function);
Demo:
// chrome 中不支持attachEvent。 IE9-10
function btnClick() {
alert('hello world');
// 移除事件
btn.detachEvent('onclick', btnClick);
}
btn.attachEvent('onclick', btnClick);
由于以上的三种方式存在兼容问题,下面来封装一个函数来解决移除事件的问题:
// 处理移除事件的兼容性处理
function removeEventListener(element, eventName, fn) {
if (element.removeEventListener) {
element.removeEventListener(eventName, fn);
} else if (element.detachEvent) {
element.detachEvent('on' + eventName, fn);
} else {
element['on' + eventName] = null;
}
} // 给 btn 注册和移除事件
function btnClick() {
alert('hello');
// 移除事件
removeEventListener(btn, 'click', btnClick);
}
addEventListener(btn, 'click', btnClick);
三、事件的三个阶段
1、第一阶段:捕获阶段
2、第二阶段:执行当前事件的元素
3、第三阶段:冒泡阶段
on事件名 只有事件冒泡阶段。
addEventListener 的第三个参数为 false 的时候:事件冒泡;为 true 的时候:事件捕获。
attachEvent 只有两个参数,只有事件冒泡。
通过 事件对象.eventPhase 属性可以查看事件触发时所处的阶段
4、事件冒泡的好处:事件委托
Demo:
<ul id="ul">
<li>西施</li>
<li>貂蝉</li>
<li>昭君</li>
<li>凤姐</li>
<li>芙蓉姐姐</li>
</ul>
<script>
// 事件委托: 原理事件冒泡
var ul = document.getElementById('ul');
ul.onclick = function (e) {
// e 事件参数(事件对象): 当事件发生的时候,可以获取一些和事件相关的数据
// 获取到当前点击的li
// e.target 是真正触发事件的对象
// console.log(e.target);
// 让当前点击的li高亮显示
e.target.style.backgroundColor = 'red';
}
</script>
上面的代码中,当点击 li 的时候,让其高亮显示,可以给所在 ul 注册单击事件,这是因为 点击 li 的时候,会产生 事件冒泡,从而让 ul 也产生点击事件,在这个事件中通过事件对象 event 可以获取真正触发事件的对象 e.target。
四、事件对象
1、事件对象
事件对象,在存在事件函数里面的,并不是我们传递的参数,而是系统自带的一个对象。
通过事件对象,可以获取事件发生的时候和事件相关的一些数据。
2、获取事件对象
语法格式:
变量名.onclick = function(e){
// e 就是事件对象,event的缩写,DOM 标准中,是给事件处理函数一个参数,系统提供
// 在老版本的 IE 中获取事件对象的方式为 window.event
}
处理事件的兼容性:
e = e || window.event;
3、事件对象的属性和方法
(1)e.eventPhase
获取事件的阶段:1 捕获阶段 2 目标阶段 3 冒泡阶段
(2)e.target
获取真正触发事件的对象,存在浏览器兼容问题。
在老版本的 IE 中, srcElement 是获取真正触发事件的对象
兼容性处理:
var target = e.target || e.srcElement;
(3)e.currentTarget
事件处理函数所属的对象,相当于 this 关键字
(4)e.type
获取事件的类型,如 click、mouseover、mouseout 等事件
(5)e.clientX / e.clientY
e.elientX 获取鼠标在浏览器的可视区域的 横坐标
e.clientY 获取鼠标在浏览器的可视区域的 纵坐标
(6)e.pageX / e.pageY
e.pageX 获取鼠标在当前页面的横坐标;e.pageY 获取鼠标在当前页面的纵坐标
该属性存在浏览器兼容性问题, IE8 以前不支持
处理兼容性代码:
// 获取页面滚动距离的浏览器兼容性问题
// 获取页面滚动出去的距离
function getScroll() {
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
return {
scrollLeft: scrollLeft,
scrollTop: scrollTop
}
} // 获取鼠标在页面的位置,处理浏览器兼容性
function getPage(e) {
var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
var pageY = e.pageY || e.clientY + getScroll().scrollTop;
return {
pageX: pageX,
pageY: pageY
}
}
(7)扩展
offsetLeft / offsetTop ,获取当前元素在可视区域内的距离左边和上面的距离
Demo:
<div id="box"> </div>
<script>
var box = document.getElementById('box');
box.onclick = function() {
console.log(this.offsetLeft); // 获取盒子距离左边的距离
console.log(this.offsetTop); // 获取盒子距离上边的距离
}
</script>
4、取消默认行为
(1) 在函数中 return false 就可以取消默认行为的执行
(2)e.preventDefault() DOM中取消默认行为的标准方法
(3)e.preventValue = false; IE 的老版本,非标准方式
5、取消冒泡
(1)e.stopPropagation() DOM 中停止事件传播的标准方法
(2)e.cancleBubble = true 非标准的方式,老版本的 IE 支持,标准中已经废弃
6、常见的事件
(1)鼠标事件
- click:单击事件,元素被点击是触发该事件
- change:内容改变事件,当 input、select、textare 等元素内容发生改变时,触发该事件
- focus:当元素获取焦点时触发该事件
- blur: 当元素失去焦点时触发该事件
- onload:当打开页面时,就会执行该事件,实际开发过程中,常常使用该事件在页面打开时初始化JS。
- mouseover:鼠标移入触发该事件
- mouseout:鼠标移出触发该事件
- mousemove:鼠标在该元素上面移动时触发该事件
- mouseup:鼠标按键放开时触发
- mousedown:鼠标按键按下触发
- mouseenter:鼠标移入触发该事件
- mouseleave:鼠标移出触发该事件
注意:mouseenter / mouseleave 不会触发事件冒泡;mouseover / mouseout 会触发事件冒泡
(2)键盘事件
keydown:键盘按下的时候,这时候所按的键还没有落入文本框
- keyup:键盘弹起的时候,这时候按的键已经落入文本框了
扩展:可以根据 e.keyCode 来获取键的 ASCII 码。
JavaScript 之 事件(详解)的更多相关文章
- javascript冒泡事件详解
冒泡事件: 定义:当多个Dom元素互相嵌套的时候,一个元素触发了某个事件(例如Click事件),那么嵌套此事件的所有元素都会被触发一次Click事件,注意:只会触发他的直系亲属元素,而与其自己,父级, ...
- javascript之事件详解2
1.事件对象: 在触发DOM事件的时候都会产生一个对象. 2.事件对象event: (1).type:获取事件类型 (2).target:获取事件目标 (3).stopPropagation():阻止 ...
- javaScript -- touch事件详解(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- JavaScript——event事件详解
1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...
- JavaScript事件详解-jQuery的事件实现(三)
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- JavaScript事件详解-zepto的事件实现
zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...
- JAVASCRIPT事件详解-------原生事件基础....
javaScirpt事件详解-原生事件基础(一) 事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...
- JavaScript中的鼠标滚轮事件详解
JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...
- 第三天:JS事件详解-事件流
学习来源: F:\新建文件夹 (2)\HTML5开发\HTML5开发\04.JavaScript基础\6.JavaScript事件详解 学习内容: 1)基础概念 2)举例说明: 代码如上,如果用事件 ...
随机推荐
- wordpress怎么用AMP加速器呢
AMP项目(Accelerated Mobile Pages)是一个开放源代码计划,旨在为所有人打造更好的网络体验.借助该项目,用户可以打造出在各种设备和分发平台上都能始终如一地快速加载且效果出色的精 ...
- Escape character is ‘^]’什么意思?怎么使用telnet
在linux/unix下使用telnet(telnet ip 端口号)连接主机时提示“Escape character is '^]'.”,这是什么意思?“^”是Ctrl键的意思!1.这个提示的意思是 ...
- ReactiveX 学习笔记(29)使用 RxCpp(RxQt)+ Qt 进行 GUI 编程
课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 下载 ...
- JSOI 2010 连通数
洛谷 P4306 [JSOI2010]连通数 洛谷传送门 题目描述 度量一个有向图联通情况的一个指标是连通数,指图中可达顶点对个的个数. 如图 顶点 11 可达 1,~2,~3,~4,~51, 2, ...
- TensorFlow Lite for Android示例
一.TensorFlow Lite TensorFlow Lite 是用于移动设备和嵌入式设备的轻量级解决方案.TensorFlow Lite 支持 Android.iOS 甚至树莓派等多种平台. ...
- 【LG3322】[SDOI2015]排序
[LG3322][SDOI2015]排序 题面 洛谷 题解 交换顺序显然不影响答案,所以每种本质不同的方案就给答案贡献次数的阶乘. 从小往大的交换每次至多\(4\)中决策,复杂度\(O(4^n)\). ...
- 每日一问:Android 中内存泄漏都有哪些注意点?
内存泄漏对每一位 Android 开发一定是司空见惯,大家或多或少都肯定有些许接触.大家都知道,每一个手机都有一定的承载上限,多处的内存泄漏堆积一定会堆积如山,最终出现内存爆炸 OOM. 而这,也是极 ...
- kudu 介绍
kudu的好处: 快速的olap 列式存储,Hadoop parquet 的一种替代方案 对数据的顺序处理和随机处理都很高效 * High availability. Tablet Servers a ...
- idea导入工程
idea导入svn中的工程,一般是多模块的工程. 1 在idea中导入一个工程的目录,可以建立对应的文件夹 dy-task ,svn选择对应的分支导入 2 在dy-task同目录下建立其他目录 dy- ...
- StringTable
首先看这样一个面试题 // StringTable [ "a", "b" ,"ab" ] hashtable 结构,不能扩容 public ...