微應(yīng)用和微網(wǎng)站的區(qū)別鹽城seo優(yōu)化
JS事件基礎(chǔ)
1.event對象
（1）用來獲取事件的詳細信息：鼠標(biāo)位置、鍵盤位置
document的本質(zhì)：document.childNodes[0].tagName
?
?
例子：獲取鼠標(biāo)位置：clientX橫坐標(biāo)，clientY縱坐標(biāo)
代碼如下：
<!DOCTYPE html>
<html>
?? <head>
???? <meta charset="UTF-8">
???? <title></title>
???? <script>
??????? window.onload=function()
??????? {
???????????? document.onclick=function()
???????????? {
?
???????????? alert(event.clientX+','+event.clientY);
???????????? }
???????????????
??????? }
???? </script>
?? </head>
?? <body>
??
?? </body>
</html>
以上代碼會有兼容問題
alert(event.clientX+','+event.clientY);大部分適合IE
把上面代碼換成alert(ev.clientX+','+ev.clientY);適用于火狐，不支持IE
?
現(xiàn)在怎么解決兼容問題呢？代碼如下
<!DOCTYPE html>
<html>
?? <head>
???? <meta charset="UTF-8">
???? <title></title>
???? <script>
??????? window.onload=function()
??????? {
???????????? document.onclick=function(ev)
???????????? {
???????????? //alert(event.clientX+','+event.clientY);適用于IE
???????????? //alert(ev.clientX+','+ev.clientY);//適用于火狐
?? ???????????? var oEvent=ev||event;//報錯ev不存在
??????????????? alert(oEvent.clientX+','+oEvent.clientY);
???????????? }
????????????
???????????????
??????? };
???? </script>
?? </head>
?? <body>
??
?? </body>
</html>
?
以上總結(jié)出解決event對象的兼容性方法就是
設(shè)置一個變量 var oEvent=en||event
?
2事件冒泡：?? 事件冒泡就是會把事件一直傳遞給父級，一直到document，小知識document是一個隱藏起來的最大父級
?
?
事件冒泡例子：代碼如下
<!DOCTYPE html>
<html>
?? <head>
???? <meta charset="UTF-8">
???? <title></title>
???? <style>
??????? div{
?????????? padding:50px;
??????? }
???????
???? </style>
?? </head>
?? <body onclick="alert('aa')">
?? 這個例子就是說明子級的事件會傳遞給父級，這就是事件冒泡
???? <div style="background:black;" onclick="alert(this.style.background)">
??????? <div style="background:green;" onclick="alert(this.style.background)">
?????????? <div style="background:red; "onclick="alert(this.style.background)"></div>
??????? </div>
???? </div>
????
?? </body>
</html>
執(zhí)行上面代碼點擊一下最里面的紅色就懂了
?
3.鍵盤事件
KeyCode：獲取用戶按下鍵盤的哪個按鍵
用法代碼：
?? <script>??
??????? document.onkeydown=function(ev)
??????? {
?????????? var oEvent=ev||event;
?????????? alert(oEvent.keyCode);
??????? }
?? </script>
執(zhí)行以上代碼隨便按下某個鍵就會報出數(shù)字，這個數(shù)字就對應(yīng)這個按鍵
?
?
?
?
例子2：如何使用按鍵回車提交某個信息
<!DOCTYPE html>
<html>
?? <head>
???? <meta charset="UTF-8">
???? <title></title>
???? <script>
??????? window.onload=function()
??????? {
?????????? var oBun1=document.getElementById('bu1');???? ??
?????????? var oBun3=document.getElementById('text1')
?????????? oBun1.onkeydown=function(ev)
?????????? {?
???????????? var oEvent=ev||event;
???????????? if(event.keyCode==13)
???????????? {
??????????????? oBun3.value=oBun3.value+oBun1.value;
??????????????? oBun1.value=''
???????????? }
????????????
?????????? }
??????? }
???????
???? </script>
?? </head>
?? <body>
???? <input id="bu1" type="text" />????
???? <textarea id="text1" rows="10" cols="40"></textarea>
????
?? </body>
</html>
?
?
還有如何使用ctry+回車提交
只需要把如上代碼if部分改為
if(event.keyCode==13 || oEvent.ctrlkey)
?
keyCode其他屬性
ctrlKey、shiftKey、altKey
?
轉(zhuǎn)載于:https://blog.51cto.com/xwxhvip/1983467