[JavaScript知识库]javascript事件

事件驱动三要素

1、事件源：绑定事件的元素

2、事件类型：被js监测到的行为

3、事件处理函数：一个函数，记录事件发生时要进行的操作，也叫做“事件句柄”或“事件监听器”，事件监听器根据DOM级别的不同写法，功能上也有区别

DOM0级：btn.onlick=function(){...}
//删除DOM0级
btn.onclick=null; ?//将节点对象的事件处理属性赋值为null即可
DOM2级：btn.addEventListener("click",function{...},false); ? //区别没有on
//删除DOM2级
function print(){...}
btn.addEventListener('click',print);
btn.removeEventListener('click',print)

window事件分类

鼠标事件

键盘事件

注意: 在所有浏览器中 onkeypress 事件只能监听字母和数字，不能监听一些特殊按键（ALT、CTRL、SHIFT、ESC、箭头等）。监听一个用户是否按下按键请使用 onkeydown 事件,所有浏览器都支持 onkeydown 事件。

事件流：

事件流即事件在页面上的传播顺序

IE团队认为，事件是从里往外传播的所以我们称为“冒泡型事件流”

Netscape团队认为，事件是从外往里传播的所以我们称为“捕获型事件流”

后来在W3C组织的统一之下，javascript同时支持了冒泡流和捕获流称为“DOM事件”

事件流的设置：

1、DOM0级事件监听的方式只支持冒泡

2、DOM2级事件监听的方式可以通过add.EventListenter()方法的第三个参数来控制事件流类型

false:默认值，冒泡型事件流

true:捕获型事件流

事件对象event:

1、在执行代码时，会自动给事件处理函数提供一个事件对象event作为参数

2、当点击某个元素时，为元素绑定的点击事件就会被触发，事件处理函数的形参将接受到event对相

3、event对象就包含了关于该事件的相关信息，包括导致事件的元素、事件的类型、鼠标的位置

//获取事件对象
btn.onclick=function(event){
let a=event ||window.event; ?//(低版本ie获取window.event)
}


//事件目标  event.taeget
<ul id="ul">
 ? ?<li></li>
<li></li>
</ul>
?
ul.onclick=function(event){
 ? ?console.log(event.target) ? ?//具体某一个li(target确定具体触发事件的元素)
}
//事件目标与this
ul.onclick=function(event){
 ? ?console.log(this) ? ?//ul元素（this指的是事件源） 
 ? ?console.log(event.target) ? //某一个li
}

键盘事件（event）：

<input type="text" id="ipt">
<script>
ipt.onkeypress=function(event){
console.log(event.keyCode);
 ? ?if(event.keyCode==56){
 ? ? ? ?console.log(s); ? //当按下键盘上数字8时，输出“s”
 ?  }
}
</script>

鼠标事件：

offsetWidth offsetHeight和返回该元素的像素宽度，宽度包含内边距（padding）和边框（border），不包含外边距（margin），是一个整数，单位是像素 px。

clientHeight和 clientWidth属性返回元素的可见高度和宽度，仅包括内边距（padding）。

事件委托

btn.onclick=function(event){//event事件对象
if(event.target.nodeName=='P') ?//元素名需要大写 ? target确定触发事件的元素
}
<div id="box">
 ? ?<p id="p">ppp</p>
 ? ?<h1 id="h1">h1</h1>
 ? ?<h2 id="h2">h2</h2>
 ? ?<p></p>
</div>
?
<script>
 ? ? ? ?box.onclick = function (event) {
 ? ? ? ?//如果点击的是h2，则输出 ? <h2 id="h2">h2</h2>
 ? ? ? ?console.log(event.target);
 ? ? ? ?//如果点击的是id为h1的元素，则输出666
 ? ? ? ?if (event.target.id == h1) {
 ? ? ? ? ? ?console.log(666);
 ? ? ?  }
 ? ? ? ?//如果点击的是p元素，则输出666 ?  nodeName元素节点  注：元素名要大写
 ? ? ? ?if(event.target.nodeName=='P'){
 ? ? ? ? ? ?console.log(666);
 ? ? ?  }
 ?  }
</script>