小型的企业网站,中国电子工程师网,网站开发主流技术线路介绍,wordpress 菜单消失JS事件基础 1.event对象 #xff08;1#xff09;用来获取事件的详细信息#xff1a;鼠标位置、键盘位置 document的本质#xff1a;document.childNodes[0].tagName 例子#xff1a;获取鼠标位置#xff1a;clientX横坐标#xff0c;clientY纵坐标 代码如下#xff1a… JS事件基础 1.event对象 1用来获取事件的详细信息鼠标位置、键盘位置 document的本质document.childNodes[0].tagName 例子获取鼠标位置clientX横坐标clientY纵坐标 代码如下 !DOCTYPE html html head meta charsetUTF-8 title/title script window.onloadfunction() { document.onclickfunction() { alert(event.clientX,event.clientY); } } /script /head body /body /html 以上代码会有兼容问题 alert(event.clientX,event.clientY);大部分适合IE 把上面代码换成alert(ev.clientX,ev.clientY);适用于火狐不支持IE 现在怎么解决兼容问题呢代码如下 !DOCTYPE html html head meta charsetUTF-8 title/title script window.onloadfunction() { document.onclickfunction(ev) { //alert(event.clientX,event.clientY);适用于IE //alert(ev.clientX,ev.clientY);//适用于火狐 var oEventev||event;//报错ev不存在 alert(oEvent.clientX,oEvent.clientY); } }; /script /head body /body /html 以上总结出解决event对象的兼容性方法就是 设置一个变量 var oEventen||event 2事件冒泡 事件冒泡就是会把事件一直传递给父级一直到document小知识document是一个隐藏起来的最大父级 事件冒泡例子代码如下 !DOCTYPE html html head meta charsetUTF-8 title/title style div{ padding:50px; } /style /head body onclickalert(aa) 这个例子就是说明子级的事件会传递给父级这就是事件冒泡 div stylebackground:black; onclickalert(this.style.background) div stylebackground:green; onclickalert(this.style.background) div stylebackground:red; onclickalert(this.style.background)/div /div /div /body /html 执行上面代码点击一下最里面的红色就懂了 3.键盘事件 KeyCode获取用户按下键盘的哪个按键 用法代码 script document.onkeydownfunction(ev) { var oEventev||event; alert(oEvent.keyCode); } /script 执行以上代码随便按下某个键就会报出数字这个数字就对应这个按键 例子2如何使用按键回车提交某个信息 !DOCTYPE html html head meta charsetUTF-8 title/title script window.onloadfunction() { var oBun1document.getElementById(bu1); var oBun3document.getElementById(text1) oBun1.onkeydownfunction(ev) { var oEventev||event; if(event.keyCode13) { oBun3.valueoBun3.valueoBun1.value; oBun1.value } } } /script /head body input idbu1 typetext / textarea idtext1 rows10 cols40/textarea /body /html 还有如何使用ctry回车提交 只需要把如上代码if部分改为 if(event.keyCode13 || oEvent.ctrlkey) keyCode其他属性 ctrlKey、shiftKey、altKey 转载于:https://blog.51cto.com/xwxhvip/1983467
