JavaScript学习笔记（事件）

事件

事件基础

用户在浏览器上触发一个操作 浏览器上会执行相关的函数进行处理 这个称为事件

事件分为系统派发事件与自定义派发事件

addEventListener();//事件侦听方法，仅用于EventTarget对象
dispatchEvent();//抛发事件方法，派发事件，仅用于EventTarget对象

事件触发条件

1、侦听和派发的对象是同一个；

2、侦听和派发的事件类型完全相同

//这里documen就是侦听和派发的对象
//document.addEventListener("click",clickHandler);
//function clickHandler(e){
    
//}
//系统派发的事件字符串是固定的，自定义派发的事件，字符串可以任意

//EventTarget叫事件目标对象，Event实例的对象叫事件对象
var target=new EventTarget();
//侦听和派发的对象可以是DOM元素，也可以是EventTarget，或者继承EventTarget的类
target.addEventListener("chilema",clickHandler);//侦听事件
var evt=new Event("chilema");//创建事件对象
target.dispatchEvent(evt);//派发事件
//事件侦听回调函数，不能传参,因此事件回调函数中有且仅有一个参数,这个参数即为事件对象
function clickHandler(e){
    console.log(e.type);//派发的事件类型
}

事件分类

鼠标事件

点击的事件

click   单击

dblcilck   双击

mousedown   按下

mouseup   松开

移进

mouseenter 

mouseover （子元素也会触发）

移出

mouseleave

mouseout （子元素也会触发）

移动

mousemove

键盘事件 （key）

keyup 弹起

keydown 按下

keypress （字符键才触发 按下）

HTML事件

load 加载事件

unload 卸载

select 选择

change 修改

blur 失去焦点

focus 获取焦点

input 输入内容

scroll 滚动

submit 提交

reset 重置

event 事件源对象 （window里面的）

event对象里面的属性

位置相关属性

offsetX 鼠标离当前元素的X距离

offsetY 鼠标离当前元素的Y距离

clientX 鼠标离网页最左的距离 （不包含不可见部分）

clientY 鼠标离网页最顶部的距离 （不包含不可见部分）

pageX 鼠标离网页最左的距离 （包含不可见部分）

pageY 鼠标离网页最顶部的距离 （包含不可见部分）

screenX 鼠标离屏幕最左部的距离

screenY 鼠标离屏幕最顶部的距离

document.addEventListener("click",clickHandler);
function clickHandler(e){
console.log(e.x);//当前鼠标离对应的最顶部的距离（不包含滚动栏的距离）不包含不可见距离
console.log(e.y);
console.log(e.clientX);
console.log(e.clientY);
console.log(e.offsetX);//对应在div里面的鼠标位置X
console.log(e.offsetY);//对应在div里面的鼠标位置Y
console.log(e.pageX);//当前鼠标离对应的最顶部的距离（包含滚动栏的距离） 包含不可见距离
console.log(e.pageY);
console.log(e.layerX);//在定位的时候基于自己 不定位的时候基于最顶部距离  包含不可见距离
console.log(e.layerY);
console.log(e.screenX);//离屏幕最坐标的X距离
console.log(e.screenY);//离屏幕最上面的y距离
}

按键相关属性

ctrlKey

altKey

shiftKey

//三个按键是否按下(长按) 先按下再操作 布尔类型的值
console.log(e.ctrlKey); //是否按下ctrl
console.log(e.shiftKey);//是否按下shift
console.log(e.altKey);//是否按下alt

键盘的输入的相关属性

key 获取对应的按下的键

keyCode 获取按下的键的ascii码

charCode 获取keypress事件中按键的ascii码

事件委托机制

将原本元素需要做的事件 交给他的父元素

1.加事件给对应的父元素

2.在父元素的事件中进行判断 e.target

事件的俩个行为

事件冒泡

从里到外冒泡 里面有一个按钮添加了点击事件 外面有个盒子也添加了点击事件 在你触发对应的按钮的点击的时候 同时他会自动调用对应盒子的点击事件 而这个机制就叫做事件冒泡

事件捕获

直接进行捕获处理

阻止事件冒泡

e.stoppropagation() *

e.cancelBubble = true (兼容ie的写法)

阻止默认行为

概述：元素自身拥有的一些行为

form的submit按钮会自动提交 然后跳转页面

a标签 直接默认跳转页面

鼠标右键点击 会出现菜单栏

.....

e.preventDefault() 适用所有符合w3c规则的浏览器 *

e.returnValue = false 适用ie浏览器 同样适用于高版本浏览器（可能会被废弃）

return false //都适用

事件监听器

1.采用了观察者模式（observer）

2.同一个事件可以有多个处理函数

3.在添加事件的时候对应的处理函数不能是匿名函数（不然是不能被移除的）

添加事件监听 addEventListener

addEventListener(监听事件名,处理函数,冒泡false 还是捕获 true)

移除事件监听 removeEventListener

removeEventListener(事件名,处理函数)

var btn =  document.querySelector("button")
function hanlder(){
    console.log("123");
}
//添加监听 同一个事件可以有多个处理函数
btn.addEventListener('click',hanlder,false)
btn.addEventListener('click',function(){
    console.log("456");
},false) //是否捕获
//移除事件监听 函数的指向不一样 开辟俩个内存空间 地址是不一样 移除不了
//移除对应的事件名中某个匹配处理函数
btn.removeEventListener('click',hanlder)
//兼容 ie8以下
// btn.attachEvent("onclick",fn) 添加
// btn.detachEvent("onclick",fn) 移除