Javascript中常用事件集合和事件使用方法

Javascript中常用事件集合和事件使用方法

一、事件绑定

格式：

事件源 . on事件类型=事件处理函数

事件绑定三要素

1、事件源：和谁绑定

2、事件类型：什么事件

3、事件处理函数：触发了要执行什么

二、常用事件类型

鼠标事件	键盘事件	浏览器事件	触摸事件	表单事件
click - 单击	keydown - 键盘按下	load - 加载完毕	touchstart - 触摸开始	focus - 聚焦
dblclick - 双击	keyup - 键盘抬起	scroll - 滚动条滚动	touchmove - 触摸移动	blie - 失焦
mousedown - 鼠标按下	keypress - 键盘键入	resize - 尺寸改变	touchend - 触摸结束	change - 改变
contextmenu - 左键单击				input - 输入
mouseup - 鼠标抬起				reset - 重置
mousemove - 鼠标移动
mouseover - 鼠标移入
mouseout - 鼠标移出

三、事件传播

什么是事件传播：当几个div是父子关系时，点击子的事件，父的事件也会触发

1.阻止事件传播

格式：事件对象 . stopPropagation()

//点击divc只输出divc的内容
<div id="a">
  <div id="b">
<div id="c" ></div>
  </div>
</div>

<script>
var  diva=document.getgetElementById("a") 
var  divb=document.getgetElementById("b") 
var  divc=document.getgetElementById("c") 
 
diva.onclick=function(){
   console.log("diva被触发")
    
}
divb.onclick=function(){
   console.log("divb被触发")
}
divc.onclick=function(e){
   console.log("divc被触发")
    e.stopPropagation()    //阻止触发（如果没有这个，三个都会触发）
}

</script>