1元素注册事件两种方式。
2 删除事件两种方式。
3 DOM事件流3个阶段。 事件对象,阻止事件冒泡。
4 事件委托。
5 常用鼠标和键盘事件。
1 注册事件概述:
传统方式和方法监听方式。
1.传统注册方式:以on开头的时间。
btn.onclick=function(){} 注册事件的唯一性。后面的事件处理函数 会将前面覆盖调。所以需要有新的方法。
2.监听注册方式:
addEventListener()是一个方法。(使用的更多。)同一个事件添加多个事件处理程序。
IE9不支持方法,可使用attachEvent()代替。
按照顺序执行。
addEventListener(type,listener,[flase,true])
type:click,mouseover:带引号!这里面不需要带on,
listenr:事件处理函数,事件发生时,会调用监听改事件。监听器!
bts[1].addEventListener('click',function(){})
IE9之前:attachEvent事件;该特性非标准,不在生产环境中使用。
eventTarget.attachEvent(eventName,callBack())
删除事件,解绑事件:!
1.传统注册方式 :eventTarget.onclick= null; divs[0].onclick =null;
2.方法监听注册方式:
eventTarget.removeEventListener(type,listenr{,false,true})
divs[1].removeEventListener('click',不能用匿名函数
divs[1].addEventLister('click',fn)
divs[1].removeEventListener('click',fn);
function fn(){ alert(22); }
3 divs[2].attachEvent('onclick',fn1)
function fn1{alert(33)}
divs[2].detachEvent('onclick',fn1)
DOM事件流;事件发生时候,元素节点之间按照特定的顺序传播,
事件传播的过程就是事件流。
Document HTml body div
1 捕获阶段: 中国 山东 蓝翔。
2 当前目标阶段。
3 冒泡阶段。
事件冒泡:IE最早提出,
事件捕获:网景最早提出,DOM,
最后W3C ,综合两个阶段。
注意:
1 JS代码只能执行捕获或者冒泡的其中一个阶段!!!!!不能同时弄两个。
2 onclick和attachEvent(ie)只能得到冒泡阶段。
3 addEventListen('',function,true);true是捕获阶段。默认或者false则是捕获阶段。
4 但是在我们的实际开发过程中,我们很少使用事件捕获,更关注事件冒泡。
5 有些事件是没有冒泡的,比如:onblur,onfocus,onmousenter,onmouseleave
6 有时候事件冒泡会带来麻烦,有时候会有帮助,
事件对象。
div =document.querySelector('div')
div.onclick =function (event){ console.log(event)}
1 event就是一个事件对象,写到我们侦听函数的小括号,当做形参
2 事件对象只有有了事件才会存在。这是系统给我们创建的,不需要我们传递实参。
3 事件对象,是我们事件一系列数据的结合,和事件相关的,比如鼠标点击就包含鼠标的信息,
鼠标坐标,键盘事件,比如按下了那个键。
div.addEventListener('click',function(event){e})
4 event,evt,e都可以!
5 事件对象也有兼容性问题 ie678 是window.event
兼容性的写法。 e= e || window.event;
常见的事件对象,
返回事件类型。
阻止 事件默认行为,让链接不跳转,或者提交按钮不提交。
e.preventDefault()//DOM 标准写法。
e.returnValue ; ie678属性
return false();//阻止,也能默认阻止,return后面是不执行的。
阻止冒泡的两种方式:
stopPropagation //stop 停止 propagation的传播
e.cancelBublle= true;//非标准cancle取消bubble泡泡
if (e&& e.stopPropagetion){ e.stopPropagation}
else { windows.event.cancelBublle =true}
事件冒泡的坏处。需要阻止事件冒泡。
事件冒泡的好处。事件委托。
100个快递,
ul li里面 每个事件,进行点击事件,dom访问次数就很多,就会延长交换事时间。
事件委托,也称为,事件代理,在jQuery里面成为事件委派。
事件委托的原理:不是子节点监听,而是父节点监听,利用冒泡原理影响每个子节点。
ul注册,target找到li,点击的是li,事件冒泡到ul上,ul有注册事件,会触发监听器。
事件委托的作用:
只操作了一次DOM,提高了程序的特性。
e.target.style.backgroundColor='pink'
7.1 鼠标事件:
鼠标经过: on mouseover, 鼠标离开:onmouse out
鼠标左键触发: onclick
鼠标失去焦点。onblur,鼠标获得焦点onfocus
1.禁止鼠标右键:
contextmenu:e.preventDefault() 取消默认的上下文菜单。不能右键删除。
selectstart :e.preventDefault();禁止选中
7.2鼠标事件对象。
event
e.clientX,
e.clientY:相对于浏览器窗口的XY
e.pageX 返回鼠标对于文档页面的X坐标,(用的最多)
e.pageY, 返回鼠标Y坐标
e.screenX
e.screeY 鼠标相对于电脑的屏幕Y
常用键盘事件。
onkeyup
onkeydown
onkepress 区分字母大小写。
键盘事件对象。
keyCode