侦听事件

事件可以降低耦合度 

对DOM对象做抛发和侦听。要先架设侦听在抛发事件        var evt=new Event("事件名");新建事件("事件名")
 div.dispatchEvent(evt);抛发事件(必须有事件名字evt)   e.type事件的类型      div1.addEventListener("dashenghan",messageHandler);用来侦听事件的
侦听事件必须清除清除侦听
新建事件(事件名称)
  系统事件都是操作系统反馈给浏览器,浏览器抛法事件,然后接听。 evt对象是可以有属性的
 抛发的对象.dispatchEvent(事件对象);
  dashenghan  事件类型  e.type
 var evt=new Event("dashenghan");
事件函数中是不可以带入参数的,因为事件函数是驱动执行,不是直接执行 因此参数不能够带入系统事件如果想通过事件传递参数时,我们就使用对象属性的模式传递
var evt=new Event("dashenghan");
 evt.sum=10;
 自定义事件,可以给多个对象抛发事件 因此如果想让每个对象都可以接收到事件时并且获取到某个参数变量时 我们可以给事件对象本身加入属性传递
opacity: 0.3;透明度transition: all 1s;动画时间
/*   执行动画名称   多少事件*/animation: keys 4s;  定义关键帧动画 @keyframes  动画名称
百分数是运行总时间的百分数@keyframes keys
setInterval(function(){},时间)设置定时器,时间节点
clearInterval(function(){},时间)清除时间节点
div.addEventListener("click",clickHandler,false)
click  type  string
callback 返回函数  function
 false   是否冒泡  boolean
e.target当前的目标      e.currentTarget被侦听的事件

回调函数

把函数名以参数的形式带入到另外一个函数中 当执行这个参数名时,相当于执行了这个函数
回调函数可以针对带入函数做优先级执行
事件原理
 捕获阶段    从外向里
 目标阶段    找到目标    currentTarget事件目标   target当前目标
 冒泡阶段   从里向外
 如果侦听事件中第三个参数,冒泡不填写或者是false 冒泡阶段顺序返回 
如果填成true捕获阶段顺序返回
取消冒泡事件
标准浏览器下 DOM中 : 
event.stopPropagation()   停止传播(取消冒泡)
IE8及以下:         
event.cancelBubble=true   取消冒泡

自定义事件

捕获阶段外容器先收到消息,然后传递到最里层冒泡阶段不触发外层,不向外冒泡
div2.dispatchEvent(new Event("maopao"));
最里层div2抛法事件,这时候div0和div1收不到任何消息 如果设置捕获为true,第三个参数是true我们就3个div都收到了事件,因为这时候是从外向里抛发事件
事件侦听和删除侦听
ie9以上
添加事件:element.addEventListener(‘事件名’,事件函数名,事件冒泡/捕获)
移除事件:element.removeEventListener(‘事件名’,事件函数名,事件冒泡/捕获)
ie8及以下
添加事件:element.attachEvent(‘on开头的事件名’,事件函数名)
移除事件:element.detachEvent(‘on开头的事件名’,事件函数名)
event对象
pageX 光标相对于该网页的水平位置(ie8及以下无)
pageY 光标相对于该网页的垂直位置(ie8及以下无)
screenX 光标相对于该屏幕的水平位置
screenY 光标相对于该屏幕的垂直位置
clientX 光标相对于该网页的水平位置 (当前可见区域)
clientY 光标相对于该网页的垂直位置 (当前可见区域)
阻止默认事件
DOM中:event.preventDefault()  阻止默认行为
IE中:  event.returnValue=false  返回值=false  
Change   一般用于表单的所有控件做变化时触发          样式改变并不会触发该事件
Load  加载完成后,执行事件     本地文件,加载当前页面,AJAX网络通信完成
img load----》加载本地图片完成
window load--->当页面加载完成后
XMLHttpRequest load---->AJAX 完成网络通信
reset submit仅仅应用于form表单做侦听事件submit 代表提交触发事件       reset 代表点击重置事件
如果表单中提交的内容不仅仅是表单中所有控件的信息,还需要别的变量时我们可以侦听submit,停止默认系统事件,重新拼装数据后进行提交
Resize    一般用于window做大小调节时使用,也可以用于移动端变化内容来调节
Select  不是针对控件侦听,针对选择项侦听       scroll 滚动事件,当触发滚动时
 三宫格 九宫格
 e.deltaY 滚轮使用时 100向上 -100向下     触摸板双指  0.8向上 -0.8向下    仅用于火狐以外的浏览器
仅用于火狐,其它浏览器该值为0       e.detail  滚轮使用  3 向上  -3向下     触摸板双指  1向上  -1向下
e.relatedTarget 上次事件针对的目标
focus 当获取焦距时直接触发    针对文本框
 change  当失去焦距并且内容有改变时触发      blur 当失去焦距时触发 input 当键入内容时触发
keypress  数字,字母等非功能键
keydown 所有按键按下,每隔一定时间获取一次
keyUp  所有按键释放,每个按键仅获取一次
window.addEventListener("storage",storageHandler);
functionstorageHandler(e){
console.log(e)
}
当本地存储被调用时执行该事件
e.key 按下的键    e.keyCode   键码    e.code  按下的键名      37,38,39,40 左,上,右,下

猜你喜欢

转载自blog.csdn.net/xiaoming0018/article/details/80336570