开发者社区> 技术小牛人> 正文

JS中event事件

简介:
+关注继续查看

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其他属性

ctrlKeyshiftKeyaltKey

 

本文转自

新网学会 51CTO博客,原文链接:http://blog.51cto.com/xwxhvip/1983467 ,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HTTP访问控制(CORS)
跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。
4 0
【干货】pandas相关工具包
【干货】pandas相关工具包
6 0
服务器端网页编程-前言
开始服务器端编程通常比客户端编程要简单,因为动态的页面倾向于执行非常类似的操作(从数据库中获取数据然后显示到一个页面中,确认用户输入的数据以及保存到一个数据库中,检查用户的权限和登陆用户,以及更多),并且它是用能使这些和其他的常见网页服务端操作变简单的网页框架来构建的。
4 0
JS的控制流程
Block 一个块语句可以用来管理零个或多个语句。该区块是由一对大括号分隔。 块声明: { StatementList } 通过var声明的变量没有块级作用域。在语句块里声明的变量作用域是其所在的函数或者 script 标签内,你可以在语句块外面访问到它。换句话说,语句块 不会生成一个新的作用域。尽管单独的语句块是合法的语句,但在JavaScript中你不会想使用单独的语句块,因为它们不像你想象的C或Java中的语句块那样处理事物。例如:
4 0
JS 声明
var 声明一个变量,可同时将其初始化为一个值。 变量声明,无论发生在何处,都在执行任何代码之前进行处理。用 var 声明的变量的作用域是它当前的执行上下文,它可以是嵌套的函数,也可以是声明在任何函数外的变量。如果你重新声明一个 JavaScript 变量,它将不会丢失其值。
4 0
js的严格模式(strict mode)
JavaScript 严格模式(strict mode)即在严格的条件下运行。 "use strict" 指令只允许出现在脚本或函数的开头。 为什么使用严格模式: 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为; 消除代码运行的一些不安全之处,保证代码运行的安全; 提高编译器效率,增加运行速度; 为未来新版本的Javascript做好铺垫。
4 0
DataFountain训练赛汇总,成长在于不断学习(上)
DataFountain训练赛汇总,成长在于不断学习(上)
3 0
JavaScript 对象入门使用JSON
JavaScript对象表示法(JSON)是用于将结构化数据表示为JavaScript对象的标准格式,通常用于在网站上表示和传输数据
3 0
[翻译] 国外大神的js 分号使用指南
• Required: When two statements are on the same line 必备: 当两个语句在同一行时 var i = 0; i++ // <-- semicolon obligatory // (but optional before newline) var i = 0 // <-- semicolon optional i++ // <-- semicolon optional • Optional: After statement
1 0
5723
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载