前端开发js从小白到入门 day07-DOM事件

07-JavaScript

1. 事件

1.1 事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解： 触发— 响应机制。

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

1.2 事件三要素

• 事件源（谁）：触发事件的元素
• 事件类型（什么事件）： 例如 click 点击事件
• 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

在触发DOM元素上的某个事件时，会产生一个事件对象event，这个事件对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与事件有关的信息。

2. 事件的类型

2.1 鼠标事件

事件类型	说明
onmouseover	鼠标刚进入元素时触发
onmouseenter	鼠标完全进入元素时触发
onmousemove	鼠标在元素上移动时触发
onmouseout	鼠标刚要离开元素时触发
onmouseleave	鼠标完全离开元素时触发
onmousedown	鼠标按下时触发
onmouseup	鼠标弹起时触发
onclick	鼠标单击时触发
ondblclick	鼠标双击时触发
onmousewheel	当鼠标滚轮正在被滚动时运行的脚本。
onscroll	当元素滚动条被滚动时运行的脚本。
oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发

2.2 表单事件

事件类型	说明
onchange	内容改变事件
onfocus	获取焦点时触发的事件
onblur	失去焦点时触发的事件
oninput	输入事件
onsubmit	表单提交事件
onreset	表单重置事件

2.3 键盘事件

事件类型	说明
onkeydown	键盘按键按下时触发
onkeypress	键盘按着不放时触发
onkeyup	键盘按键弹起时触发

e.keyCode:获取输入键盘的键码，13回车

2.4 窗口事件

事件类型	说明
onload	文档及其资源文件都加载完成时触发
onresize	事件会在窗口或框架被调整大小时发生。
onunload	关闭网页时

3. 注册事件处理程序

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>

注意：同一种类型的事件可以添加多次，执行顺序是先添加会先执行，后面依次执行。

4. 事件处理程序

事件就是用户或浏览器自身执行的某种动作。比如click、load和mouseover，都是事件的名字。而相应事件的函数就叫做事件处理程序（或事件侦听器）。

添加事件处理程序的方法有两种：

• 第一种：“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");
});

同一种类型的事件可以添加多次，执行顺序是先添加会先执行，后面依次执行。

补充:浏览器兼容性的事件绑定

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;
    }
};

5. 事件的传递过程

JS和HTMl元素的交互几乎都是通过“事件”来完成的，事件从触发到完成响应一般分为3个阶段：捕获阶段，目标阶段，和冒泡阶段。

1. 捕获阶段：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。

2. 目标（target）阶段：在此阶段中，事件传导到目标节点。浏览器在查找到已经指定给目标事件的监听器后，就会运行该监听器。

3. 事件冒泡: 当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡机制。在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此类推，直到到达最外面的元素。如果把事件处理程序指定给所有的元素，那么这些事件将依次触发。

var div = document.getElementsByTagName("div");
var btn = document.getElementsByTagName("button")[0];
      		console.log(div)
btn.onclick = function(){
     alert("点击事件被触发了1");
	      		
}

div[0].onclick = function(){
      alert("div接受到了btn传递上来的事件了1");
}

div[1].onclick = function(){
      alert("div接受到了btn传递上来的事件了2");
}

window.onclick = function(){
      alert("window");
}

6. 事件冒泡

var div = document.getElementsByTagName("div");
var btn = document.getElementsByTagName("button")[0];
 console.log(div);
btn.onclick = function(){
     alert("点击事件被触发了1");	      		
}

div[0].onclick = function(){
      alert("div接受到了btn传递上来的事件了1");
}

div[1].onclick = function(){
      alert("div接受到了btn传递上来的事件了2");
}

window.onclick = function(){
      alert("window");
}

7. 阻止事件传播

使用事件对象的 stopPropagation() 方法停止事件传播。

8. 阻止默认事件

方法一：使用事件对象的 preventDefault() 方法阻止默认行为。

方法二：在事件的处理函数中返回 false。

多学一招:

事件委托: 原本绑定在子元素身上的事件,现在绑定到父元素上,利用事件冒泡的传递的过程,来触发当前的事件,这样的做法叫做事件委托,也叫事件代理。

9.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 window属性

• window.pageXOffset 获取当前页面相对于窗口显示区左上角的 X 位置。（页面滚动的距离）
• window.pageYOffset 获取当前页面相对于窗口显示区左上角的 Y 位置。（只读）
• window.screenLeft 可以获得浏览器距屏幕左上角的左边距
• window.screenTop 可以获得浏览器距屏幕左上角的上边距
• window.screen.width记录了客户端显示屏的宽
• window.screen.height记录了客户端显示屏的高
• window.innerWidth:返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在，则这个属性将包括它的宽度。(只读)
• window.innerHeight:返回以像素为单位的窗口的内部高度。如果有水平滚动条，也包括滚动条高度。(只读)

9.6 坐标属性总结

他们主要用法：

1.offset系列 经常用于获得元素位置 offsetLeft offsetTop

2.client经常用于获取元素大小 clientWidth clientHeight

3.scroll 经常用于获取滚动距离 scrollTop scrollLeft

4.注意页面滚动的距离通过 window.pageYOffset 获得