js-day13事件一、什么是事件简单来说事件就是用户在网页上的一系列的操作，比如，鼠标点击、双击、敲击键盘等等。。

事件

一、什么是事件

简单来说事件就是用户在网页上的一系列的操作，比如，鼠标点击、双击、敲击键盘等等。。。事件发生有两个方面：事情来了，然后处理。
事件触发 JavaScript 事件是由访问 Web 页面的用户引起的一系列操作，例如：用户点击。当用户执行某些操作的时候，再去执行一系列代码。

JavaScript 有两种事件模型：内联模型、脚本模型

二、事件驱动

控制页面的行为是由事件驱动的，这样才能完成人机交互

事件句柄是指事件发生时要进行的操作。（又称事件处理函数），每一个事件均对应一个事件句柄，在程序执行时，将相应的函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数或语句，从而实现网页内容与用户操作的交互。当浏览器检测到某事件发生时，便查找该事件对应的事件句柄有没有被赋值，如果有，则执行该事件句柄。

事件绑定：浏览器中的节点(节点).on事件名 = function(){ 要干什么？(放在浏览器中，不执行，当事件发生的时候再执行) }

三、常见的事件

JavaScript 可以处理的事件类型为**：鼠标事件、键盘事件、HTML 事件。**

1、鼠标事件

onclick：当用户单击鼠标按钮或按下回车键时触发
ondblclick：当用户双击主鼠标按钮时触发 - 连续点击两次
onmousedown：当用户按下了鼠标还未弹起时触发 - 弹窗测试最明显
onmouseup：当用户释放鼠标按钮时触发 - 鼠标抬起
onmouseover：当鼠标移到某个元素上方时触发
onmouseout：当鼠标移出某个元素上方时触发
onmousemove：当鼠标指针在元素上移动时触发

注意点：不存在冒泡问题

移入移出

2、键盘事件

onkeydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发
onkeyup：当用户释放键盘上的键触发 - 当按键抬起时触发
onkeypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发

不能触发例如：ALT, CTRL, SHIFT, ESC --- 不是字符键

事件对象：就是给提供帮助的一个对象 e.keyCode ascii码

ascii和unicode编码区别是什么？

ASCII 字符:ASCII 代表美国信息交换标准代码 Unicode 字符:Unicode 代表通用字符集

提示

 `'a' --- 65 ---` 会找到对应的二进制
 `ascii 48 --- 57 `指的是键盘上数字键

        onkeydown = function(e){
            // 事件对象：就是给提供帮助的一个对象
            // e.keyCode ascii码
            // ascii和unicode编码区别是什么？
            // 'a' --- 65 --- 会找到对应的二进制
            // ascii 48 --- 57 指的是键盘上数字键的范围
            // console.log(e.keyCode)

            if(e.keyCode>=48 && e.keyCode<=57){
                // 阻止浏览器的默认行为
                return false
            }
        }

3、html事件

onselectstart：主要是用于禁止用户选中网页中的文字的默认行为
oncontextmenu: 事件在元素中用户右击鼠标时触发并打开上下文菜单

4、表单事件

onselect：当用户选中文本框(input 或 textarea)中的一个或多个字符触发
onchange：当用户改变文本框(input 或 textarea)内容时且失去焦点后触发
onsubmit：当用户点击提交按钮在<form>元素上触发
oninput:用户输入时触发
onfocus：当页面或者元素获得焦点时触发
onblur：当页面或元素失去焦点时触发

3、 `event` 事件对象

在使用事件的时候，可以得到一个对象，这个对象里面记录了很多非常有用的属性，可以帮助咱们做一些事情，把这个对象称之为事件对象

类型的事件会有不同的对象
事件对象的方式
- 事件处理函数哪里传递一个形参（e、ev、event），当然这个参数名称可以是任意字母
- 可以直接去使用这个对象了
注意点:
- 如果不传递这个形参，要使用的话必须使用event的全称，但是不建议
兼容问题
- 在低版本的IE浏览器下只支持 window.event
- var e = e || window.event

事件对象属性

键盘事件
- e.keyCode ascii码
- e.altKey 组合键
- e.ctrlKey 组合键···

鼠标事件
- e.clientX 鼠标横坐标
- e.clientY 鼠标纵坐标
- e.pageX 鼠标横坐标，包含滚动的距离
- e.pageY 鼠标纵坐标，包含滚动距离的
- e.offsetX 指的是事件源的位置，鼠标距离事件源水平的距离
- e.offsetY 指的是事件源的位置，鼠标距离事件源垂直的距离
screenX和screenY：距离屏幕左边和上边的距离
注意点：父元素是否有定位会影响子元素的初始位置

js-day13

事件