事件对象

事件监听和删除事件处理程序分别是

addEventListener和removeEventListener都能有三个参数分别是事件源，事件处理程序的函数和一个布尔值(事件和事件监听的区别建别的word文档)

 

阻止默认事件：preventDefault()

只有当cancelable属性设置为true的时候，才能使用preventDefault()

StopPropagation()方法用来立即停止事件在dom中传播  例子

Varbtn=document.getElementById(“mybtn”);

Btn.οnclick=function(event){

     Var ev=window.event||ev;

     Alert(“clicked”);

     Event.stopPropagation();

}

Document.body.οnclick=function(){

     Alert(“body,clicked”);

}

如果不调用stopPropagation()，单击的时候会出现2个警告框，但是加了之后单击事件传递不到document.body，就不会触发在这个元素上的onclick

 

EventUtil的四个新方法

1.   getEvent()方法，返回event的对象引用

2.   getTarget()返回时间的目标，该方法内部，会检测对象的target属性，如果存在则返回该值的属性，否则返回srcElement属性的值

3.   如果preventDefault()方法不存在，则将returnValue设置为false

4.   stopPropagation()首先尝试使用dom方式阻止事件流，否则就使用cancelBubble属性

 

焦点事件：

焦点事件会在页面元素获得或则会失去焦点的时候触发，和document.hasFoucs()方法以及document.activeElement属性配合使用

 

重点的两个属性 blur(失去焦点时触发)focus(获得焦点时触发)

 

还没怎么用过的鼠标事件

Dblclick(鼠标双击事件)

Mouseenter(鼠标光标首次移动到元素之内的时候触发改事件，事件不冒泡)

Mouseleave(位于元素上方的鼠标光标移动到元素之外时触发，不冒泡)

除开mouseenter和mouseleave这两个之外所有鼠标事件都会冒泡，也可以被取消

 

页面坐标

注意点：pageX pageY clientX clientY在页面没有滚动的情况下这四个值对应相等

 

移动端关于事件的支持

不支持dblclick事件

轻击可单击元素触发mousemove事件

Mousemove事件也能触发mouseover和mouseout事件

2手指放在屏幕上且页面随手指移动时会触发mousewheel和scroll事件

 

键盘鱼文本事件

Keydown 按任意键触发的事件

Keypress按下字符键的时候触发事件

Keyup释放键盘上的键的时候触发事件

 

Keycode属性的值和键盘上分别对应的ASCII码值相对应

 

 

 

 

删除节点：removeChild()和replaceChild()

插入节点:appendChild(),replaceChlid(),insertBefore()

 

Html5新事件

contextmenu事件  通过单击鼠标右键可以调出上下文菜单，改事件是冒泡的

 

 

hashchange事件用在ajax中的参数列表来保存状态或导航信息，当hashchange事件处理程序添加给window对象，然后url参数列表只要变化就会调用他，此时event对象应该额外包含2属性：oldURL和newURL，这两个参数分别保存着参数列表变化前后的完整URL

 

为确定是否支持hashchange可以用location.hash来确定

 

内存和性能，js中添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，每个函数都是对象，都会占用内存内存中对象越多，性能就越差，其次必须现制定所有事件处理程序而导致的dom访问次数，会延迟整个页面的交互就绪事件

 

内存中留有那些过时不用的“空事件处理程序”（dangling event handler），2种情况造成上述问题，1.文档中移出带有事件处理程序的元素的时候（如果事件处理程序的元素被innerHTML删除了，那么添加到元素中的事件处理程序极有可能无法被当成垃圾回收）2.卸载页面的时候

 

 

打开页面自动获取焦点 autofocus或者oText.focus();