JS事件基础

1.event对象

（1）用来获取事件的详细信息：鼠标位置、键盘位置

document的本质：document.childNodes[0].tagName

 

 

例子：获取鼠标位置：clientX横坐标，clientY纵坐标

代码如下：

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

 

现在怎么解决兼容问题呢？代码如下

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>

 

以上总结出解决event对象的兼容性方法就是

设置一个变量 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>

执行上面代码点击一下最里面的红色就懂了

 

3.键盘事件

KeyCode：获取用户按下键盘的哪个按键

用法代码：

   <script>  

        document.onkeydown=function(ev)

        {

           var oEvent=ev||event;

           alert(oEvent.keyCode);

        }

   script>

执行以上代码随便按下某个键就会报出数字，这个数字就对应这个按键

 

 

 

 

例子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