您的位置：首页 > Web前端 > JavaScript

13.4 javascript事件类型

2016-02-25 12:59 776 查看 
<!doctype><html><head><meta charset="UTF8"></head><body><textarea id="aaa"></textarea><a href="http://baidu.com" id="a">点我点我</a><div id="mydiv">自定义上下文菜单事件，右击我显示菜单</div><ul id="myul" style="visibility:hidden"><li>1</li><li>2</li><li>3</li></ul></body><script type="text/javascript">//事件冒泡与事件捕获// 事件处理程序以on开头，如onclick，onload等//addEventListener如果传入匿名函数，则无法移除// 在IE中可以使用attachEvent("onclick",a());注意此时参数是onclick而非click，同时也可以添加多个处理函数，处理函数倒叙执行// 而且作用域为window全局作用域，var text = document.getElementById("aaa");// text.attachEvent("onclick",function(){// 	console.log('text click');// 	// alert(this === window); //结果为true// });//使用触摸设备处理时要注意以下几点// 1.不支持dbclick// ************************************************************键盘与文本事件// keydown,keypress,keyup// textinput,发生在文本显示之前，是对keypress的补充，var a = document.getElementById("aaa");a.addEventListener("keydown",function(event) {console.log(event.type);//"keydown"console.log(event.keyCode);//键码},false);//    textInput属性，inputMethod属性，字符是怎样输入进来的a.addEventListener("textInput",function(event){console.log(event.data);//注意textInput只在按下实际的字符键时才被触发，而keyPress则不同//       例如按下了S，则data为S，而keyCode显示键码，为数字型})//修改link的默认操作var link = document.getElementById('a');link.onclick = function(event){event.preventDefault();}// stopPropagation()阻止事件冒泡，防止一个事件触发多个程序// load()事件，可以在script和link上添加load事件，确认javascript和css加载完毕// unload()事件，文档被完全卸载后调用，例如浏览器跳向其他页面，避免内存泄露//resize()事件，onresize属性，或者添加事件处理程序// scroll()事件，页面滚动，混杂模式下，body.scrollTop,标准模式下documentElement.scrollTop//会在屏幕滚动期间不断被触发，因而不要轻易使用，和resize类似window.addEventListener("scroll",function(event){console.log(event.type);if(document.compatMode =="CSS1Compat"){//标准模式console.log(document.documentElement.scrollTop);}else{//混杂模式console.log(document.body.scrollTop);}})//    焦点事件//    1.blur 失去，不冒泡//    2.focus 获得，不冒泡//    3.focusin 获得，冒泡text.onblur = function(){console.log("text blur");}document.body.onblur = function(){console.log("body blur");//不被冒泡，只被触发一次}text.onfocus = function(){console.log("text Focus");}document.body.onfocus = function(){console.log("text Focus");}//   ************************************************** 鼠标事件//    鼠标点击的位置event.screenX,event.screenY//    客户区坐标的位置event.clientX,event.clientY//    页面坐标，event.pageX,event.pageY//    修改键//    event.altKey//    event.shiftKey//    event.ctrlKey//    event.metaKey// event的属性包含this、target是时间的目标、currentTarget当前时间的处理程序// 例如如果button上的click事件冒泡到body上处理，则this和currentTarget==body，而target为button元素//**************************************DOM变动事件**************************************// 删除节点，RemoveNode(),ReplaceNode()// 事件触发次序：// 1.在被删除节点上触发DOMNodeRemoved事件，event.relatedNode为删除节点的父节点，该事件冒泡// 2.在被删除节点上触发DOMNodeRemovedFromDocument事件，不冒泡// 3.在被删除节点的子节点上上触发DOMNodeRemovedFromDocument事件// 4.在被删除节点的父节点上触发DOMSubtreeModified事件// 添加节点，appendNode(),replaceNode()，insertBefore()// 事件触发次序：// 1.在被添加节点上触发DOMNodeInserted事件，event.relatedNode为删除节点的父节点，该事件冒泡// 2.在被添加节点上触发DOMNodeInsertedIntoDocument事件，不冒泡// 3.在被添加节点的父节点上触发DOMSubtreeModified事件// HTML5事件// 1.oncontextmenu事件var div = document.getElementById("mydiv");div.addEventListener("contextmenu",function(event){event.preventDefault();//取消事件默认行为var ul = document.getElementById('myul');ul.style.left = event.clientX+'px';ul.style.top = event.clientY+'px';ul.style.visibility = 'visible';});document.addEventListener("click",function(event){document.getElementById('myul').style.visibility = 'hidden';})//  2.beforeunload事件，在用户关闭页面时，弹出框口询问是否关闭window.addEventListener('beforeunload',function(event){var message = '真的要关闭我么？';event.returnValue = message;return message;})// 3.DOMContentLoaded在DOM树加载好后触发，无论img和javascript文件是否已经加载完成// 而load事件，需要全部加载完成，document.addEventListener('DOMContentLoaded',function(event){console.log('DOMContentLoaded'+event.target.toString());//target对象是document})// 4.readystatechange事件，包含readyState属性，有以下五个值，IE，firefox4+，opera支持此事件// uninitialized，loading，loaded，interactive，complete// script（opera和IE中）和link(IE中)元素也能触发此事件，使用readyStateChange可模仿DOMContentLoaded事件document.addEventListener('readystatechange',function(event){//这个event没有任何属性值,它和load事件的触发无先后顺序if(document.readyState == 'interactive'||document.readyState == 'complete'){console.log('DOMContentLoaded!文件DOM加载完成');}else{console.log(document.readyState);//输出另外几种状态，complete//argument.callee指向函数本身}})//  5.firefox和opera中，整个页面缓存在内存（bfcache）中，一般不会触发load事件。//    firefox、safari5+，chro，opera支持，pageshow和pagehide属性，浏览器上的前进和后退按钮。//    pageshow在页面显示时触发，目标是document但是需要将触发事件添加到window上。//    persisted属性，true该页面被保存在bfcache中，false无//    pagehide在unload事件之前触发var showCount = 0;window.addEventListener('pageshow',function(event){showCount++;console.log('show'+showCount);})var loadCount = 0;window.addEventListener('load',function(event){loadCount++;console.log('load'+loadCount);})//  6.haschange,页面的url发生变化,两个属性event.oldURL和event.newURL,window.location.hash类似//    **************************************设备方向的检测******************//    1.orientationchange，safari//    2.MozOrientation，firefox//    3.deviceorientation事件//    4.devicemotion，设备的移动，设备是否在下坠//    **************************************触摸与手势事件**************************************//    touchStart//    touchEnd//    touchMove//    touchCancle//    手势事件 gesturestart，gesturechange，gestureend</script></html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                javascript
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航