目录
3.3 使用addEventListener()方法注册事件处理程序
9.2 元素(HTMLElement)的offset属性(重点)
一. 事件
1.1 事件概述
JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为。
简单理解: 触发--- 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。
1.2 事件三要素
-
事件源(谁):触发事件的元素
-
事件类型(什么事件): 例如 click 点击事件
-
事件处理程序(做啥):事件触发后要执行的代码(函数形式),事件处理函数
1.3 事件对象event
在触发DOM元素上的某个事件时,会产生一个事件对象event,这个事件对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与事件有关的信息。
-
什么时候会产生event 对象呢?
-
例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.
-
-
事件通常与函数结合使用,函数不会在事件发生前被执行!
1.3.1 事件对象的使用
var box = document.getElementById('box');
box.onclick = function(e){
console.log(e)
.........
}
1.3.2 事件对象(event)的属性
属性和方法 | 描述 |
---|---|
type | 返回当前 event 对象表示的事件的名称。 |
preventDefault() | 通知浏览器不要执行与事件关联的默认动作(阻止默认行为) |
target | 返回触发此事件的元素(事件的目标节点)。 |
currentTarget | 返回其事件监听器触发该事件的元素。 |
keyCode | 返回键盘事件中的键码值 |
stopPropagation() | 阻止事件传播。 |
1.3.3 this指向总结(重点)
-
自定义构造函数中this:指向实例化对象
-
普通函数中this:指向window
-
自定义对象的方法中this:指向当前对象
-
事件绑定的函数中的this:指向事件的绑定者
1.3.4 事件对象的兼容性写法
box.onclick = function(e) {
// 事件对象
//兼容IE8以下的写法
e = e || window.event;
var target = e.target || e.srcElement;
console.log(target);
};
二. 事件的类型
2.1 鼠标事件(12个)
事件类型 | 说明 |
---|---|
onmouseover | 鼠标刚进入元素时触发 (进入子元素会再次触发) |
onmouseenter | 鼠标完全进入元素时触发 (只会触发一次) |
onmousemove | 鼠标在元素上移动时触发 |
onmouseout | 鼠标刚要离开元素时触发 (进入子元素会再次触发) |
onmouseleave | 鼠标完全离开元素时触发 (只会触发一次) |
onmousedown | 鼠标按下时触发 |
onmouseup | 鼠标弹起时触发 |
onclick | 鼠标单击时触发 |
ondblclick | 鼠标双击时触发 |
onmousewheel | 当鼠标滚轮正在被滚动时运行的脚本 |
onscroll | 当元素滚动条被滚动时运行的脚本 |
oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发(右击) |
2.2 表单事件(6个)
事件类型 | 说明 |
---|---|
onchange | 内容改变事件 |
onfocus | 获取焦点时触发的事件 |
onblur | 失去焦点时触发的事件 |
oninput | 输入事件 |
onsubmit | 表单提交事件 |
onreset | 表单重置事件 |
2.3 键盘事件(3个)
事件类型 | 说明 |
---|---|
onkeydown | 键盘按键按下时触发 |
onkeypress | 键盘按着不放时触发 |
onkeyup | 键盘按键弹起时触发 |
e.keyCode:获取输入键盘的键码,13回车
2.4 窗口事件(3个)
事件类型 | 说明 |
---|---|
onload | 文档及其资源文件都加载完成时触发 |
onresize | 事件会在窗口或框架被调整大小时发生。 |
onunload | 关闭网页时 |
三. 注册事件处理程序
3.1 通过HTML标签属性注册事件处理程序
<button onclick="alert('Hello World')">点我</button>
3.2 通过DOM元素属性注册事件处理程序
<button id="mybutton">点我</button>
<script>
var mybutton = document.getElementById('mybutton');
mybutton.onclick = function() {
alert('Hello World');
};
mybutton.onclick = function() {
alert('Hi');
};
</script>
3.3 使用addEventListener()方法注册事件处理程序
-
addEventListener事件绑定、监听、捕获 ---》标准浏览器中有作用,非标准IE不兼容
-
语法:元素.addEventListener(事件名,函数,true/false) true代表事件捕获,false代表事件冒泡。
-
由于现在的浏览器都是执行事件冒泡,所以第三个参数通常写成false。
<button id="mybutton">点我</button>
<script>
var mybutton = document.getElementById('mybutton');
mybutton.addEventListener('click', function() {
alert('Hello World');
}, false);
mybutton.addEventListener('click', function() {
alert('Hi');
}, false);
</script>
四. 事件处理程序
事件就是用户或浏览器自身执行的某种动作。比如click、load和mouseover,都是事件的名字。而相应事件的函数就叫做事件处理程序(或事件侦听器)。
4.1 添加事件处理程序的两种方法区别
-
第一种:“on”加事件类型,如onclick、onload等;
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
alert("点击事件被触发了1");
}
注意:通过上面这种方式添加事件,同一个类型的事件如果添加多次的话,只执行最后添加的事件。
-
第二种是通过addEventListener()方法:
btn.addEventListener("dblclick", function(){
alert("双击1");
});
btn.addEventListener("dblclick", function(){
alert("双击2");
});
注意:同一种类型的事件可以添加多次,执行顺序是先添加会先执行,后面依次执行。
4.2 浏览器兼容性的事件绑定
function addMyEvent(ele, type, handleFun) {
// 标准浏览器的方法
if (ele.addEventListener) {
console.log(1);
ele.addEventListener(type, handleFun);
// IE浏览
} else if (ele.attachEvent) {
console.log(2);
ele.attachEvent('on' + type, handleFun);
} else {
console.log(3);
ele['on' + type] = handleFun;
}
};
4.3 移除事件绑定
1.null移除事件
curEle.onclick= null;
2.具体名称函数的移除
function clickHandler(){};
curEle.addEventListener('click',clickHandler);
curEle.removeEventListener('click',clickHandler);
五. 事件的传递过程(事件冒泡)
JS和HTMl元素的交互几乎都是通过“事件”来完成的,事件从触发到完成响应一般分为3个阶段:捕获阶段,目标阶段和冒泡阶段。
-
捕获阶段
:事件从根节点流向目标节点,途中流经各个DOM节点,在各个节点上触发捕获事件,直到达到目标节点。 -
目标(target)阶段
:在此阶段中,事件传导到目标节点。浏览器在查找到已经指定给目标事件的监听器后,就会运行该监听器。 -
事件冒泡
: 当为多个嵌套的元素设置了相同的事件处理程序,它们将触发事件冒泡机制。在事件冒泡中,最内部的元素将首先触发其事件,然后是栈内的下一个元素触发该事件,以此类推,直到到达最外面的元素。如果把事件处理程序指定给所有的元素,那么这些事件将依次触发。
从图中我们可以知道
-
1、一个完整的JS事件流是从window开始,最后回到window的一个过程
-
2、事件流被分为三个阶段(1-5)捕获过程、(5-6)目标过程、(6-10)冒泡过程
// 获取元素
var father = document.getElementsByClassName('father')[0];
var son = document.getElementsByClassName('son')[0];
// 浏览器很多事件默认支持冒泡
document.onclick = function() {
console.log('document');
}
father.onclick = function() {
console.log('father');
};
son.onclick = function() {
console.log('son');
};
六. 阻止事件传播
使用事件对象的 stopPropagation() 方法停止事件传播。
七. 阻止默认事件
方法一:使用事件对象的 preventDefault() 方法阻止默认行为。
方法二:在事件的处理函数中返回 false。
八. 事件委托
原本绑定在子元素身上的事件,现在绑定到父元素上,利用事件冒泡的传递的过程,来触发当前的事件,这样的做法叫做事件委托,也叫事件代理。
九.javascript中常用坐标属性
9.1 MouseEvent属性
由鼠标事件(MouseEvent)可以发现: 其中包含了许多的坐标,且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标,以及它们的含义。
-
1.clientX、clientY 点击位置距离当前body可视区域的x,y坐标
-
2.pageX、pageY(不会随着滚动条的滚动而改变) 对于整个页面来说,包括了被卷去的body部分的长度,相对文档区域左上角距离
-
3.screenX、screenY 点击位置距离当前电脑屏幕的x,y坐标
-
4.offsetX、offsetY 鼠标相对于事件源元素的x,y坐标(光标相对于自身盒子内侧的坐标,不包括边框)
9.2 元素(HTMLElement)的offset属性(重点)
offset这个属性,可以说是非常有用的,顾名思义,offset翻译过来就是偏移量,从名字就可以看出它的具体意义了。也即是元素相当于父元素的偏移量。
-
1.offsetTop: 元素相对父元素上边的偏移。(只读)
-
2.offsetLeft: 元素相对父元素左边的偏移。(只读)
-
3.offsetWidth: 自身包括padding 、 边框、内容区的宽度。
-
4.offsetHeight: 自身包括padding、边框、内容区的高度。
-
5.offsetParent: 作为偏移参照点的父级元素。
offsetLeft 和left 的区别
如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的。
区别在于:
-
style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算, 还用offsetLeft比较方便。
-
style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。
9.3 元素的client属性
-
clientHeight(clientWidth):内容可视区域的高度/宽度,也就是说页面浏览器中可以看到内容的这个区域的高度(不含边框,也不包含滚动条等边线)
-
clientLeft,clientTop: 这两个返回的是元素周围边框的厚度,可以理解为边框的长度,如果不指定一个边框或者不定位改元素,他的值就是0.
9.4 元素的scroll 属性
scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
9.5 元素的坐标属性总结![](https://i-blog.csdnimg.cn/direct/dd98ed2bdf364a7a8fe574b99668fbe8.png)
他们主要用法:
1.offset系列 经常用于获得元素位置 offsetLeft offsetTop
2.client经常用于获取元素大小 clientWidth clientHeight
3.scroll 经常用于获取滚动距离 scrollTop scrollLeft
4.注意页面滚动的距离通过 window.pageYOffset 获得
9.6 window的坐标属性
-
window.innerWidth:返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在,则这个属性将包括它的宽度。(只读)
-
window.innerHeight:返回以像素为单位的窗口的内部高度。如果有水平滚动条,也包括滚动条高度。(只读)
-
window.pageXOffset 获取当前页面相对于窗口显示区左上角的 X 位置。(页面滚动的距离)
-
window.pageYOffset 获取当前页面相对于窗口显示区左上角的 Y 位置。(只读)
-
window.screen.width记录了客户端显示屏的宽
-
window.screen.height记录了客户端显示屏的高