javascript事件编程

最新推荐文章于 2023-01-11 21:15:28 发布
最新推荐文章于 2023-01-11 21:15:28 发布
阅读量305 收藏
点赞数

javascript事件编程在实际的使用中是比较常见的，本文简单mark一下。主要内容包括：事件处理程序、常用事件、绑定事件方式、事件冒泡、默认行为以及事件对象示例。

1.事件处理程序

事件就是用户或浏览器自身执行的某种动作。比如说click,mouseover，都是事件的名字。而相应某个事件的函数就叫事件处理程序（或事件侦听器）。为事件指定处理程序的方式有好几种，比如行内绑定、动态绑定等。

inlineBinding.jsp

[html]  view plain  copy
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'inlineBinding.jsp' starting page</title>  
  13.       
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.     <!-- 
  20.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  21.     -->  
  22. <script type="text/javascript">  
  23. //行内绑定  
  24. function display(){  
  25.     alert("Hello");  
  26.     alert("Hello");  
  27.     alert("Hello");  
  28.       
  29. }  
  30. </script>  
  31.   </head>  
  32.     
  33.   <body>  
  34.     <input type="button" value="确定" onclick="display()"/>  
  35.   </body>  
  36. </html>  

2.常用的事件

onLoad    ：页面加载完毕后  一般用于body元素

onUnload              ：页面关闭后       一般用于body元素

onBlur           ：失去焦点

onFocus         ：获得焦点

onClick          ：点击

onMouseOver        ：当鼠标经过时

onMouseOut          ：当鼠标离开时

onMouseDown       ：当鼠标按下时

onMouseUp           ：当鼠标抬起时

onMouseMove       ：当鼠标移动时

onChange              ：当内容改变时

onSelect                ：当内容被选中时

onkeypress             ：当键盘点击时

onkeydown            ：当键盘按下时

onkeyup                      ：当键盘抬起时

触发顺序：onkeydown、onkeypress、onkeyup

Onkeypress事件无法捕获功能键    代码见下例

onSubmit                     ：当表单提交时

onReset                 ：当表单重置时

inlineBinding2.jsp

[html]  view plain  copy
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'inlineBinding.jsp' starting page</title>  
  13.       
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.     <!-- 
  20.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  21.     -->  
  22. <script type="text/javascript">  
  23. //事件处理  
  24. function display(text){  
  25.     document.getElementById("div").innerHTML+=text;  
  26.       
  27. }  
  28. </script>  
  29.   </head>  
  30.     
  31.   <body onload="alert('欢迎！')" onunload="alert('再见')">  
  32.     <input type="text" onkeypress="display('press')" onkeydown="display('down')" onkeyup="display('up')"/>  
  33.     <div id="div"></div>  
  34.   </body>  
  35. </html>  
上面的例子体现了onkeypress、onkeydown和onkeyup的使用方法，实际中常用的是onkeyup。

3.绑定事件的方式

3.1行内绑定

<元素 事件=”事件处理程序”>

[html]  view plain  copy
  1. <script type="text/javascript">   
  2. function show(){   
  3. alert('hello world!');   
  4. }   
  5. </script>   
  6. <input type="button" value="click me" onclick="show()"/>   
上面也可以称为HTML事件处理程序。

这种方式是目前用得比较多的一种，但是在html中指定事件处理程序有两个缺点。 
(1)首先：存在一个时差问题。就本例子来说,假设show()函数是在按钮下方，页面的最底部定义的，如果用户在页面解析show()函数之前就单击了按钮，就会引发错误； 
(2)第二个缺点是html与javascript代码紧密耦合。如果要更换时间处理程序，就要改动两个地方：html代码和javascript代码。 
因此，许多开发人员摒弃html事件处理程序，转而使用javascript指定事件处理程序。 

3.2动态绑定

对象.事件=事件处理程序

dynamicBinding.jsp

[html]  view plain  copy
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'inlineBinding.jsp' starting page</title>  
  13.       
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.     <!-- 
  20.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  21.     -->  
  22. <script type="text/javascript">  
  23. window.onload=function(){  
  24.     //行内绑定和动态绑定的区别  
  25.     document.getElementById("btnok").onclick=function(){  
  26.         alert("Hello!");  
  27.     };  
  28.     document.getElementById("div").onclick=test;  
  29. };  
  30. function test(){  
  31.     this.style.color='red';  
  32. }  
  33. </script>  
  34.   </head>  
  35.     
  36.   <body>  
  37.     <input type="button" value="确定" id="btnok"/>  
  38.     <div id="div" onclick="test()">javascript</div>  
  39.   </body>  
  40. </html>  

3.3行内绑定和动态绑定的区别

简单一句话总结，就是行内绑定调用的函数是全局函数和全局变量，即相当于window.方法名和window.变量名，而动态绑定可以将函数的作用域限定在绑定对象的范围内，即可以使用this来引用绑定的对象，比如上例。

4.事件监听

我们能不能为一个dom对象的同一个事件指定多个事件处理程序

4.1如果为一个对象的同一个事件指定多个事件处理程序，那么，后面指定的程序会覆盖前面的。

dynamicBinding3.jsp

[html]  view plain  copy
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'inlineBinding.jsp' starting page</title>  
  13.       
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.     <!-- 
  20.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  21.     -->  
  22. <script type="text/javascript">  
  23. window.onload=function(){  
  24.     //为对象的某个时间指定多个事件处理，出现问题。关于事件起泡  
  25.     document.getElementById("div1").onclick=test1;  
  26.     document.getElementById("div1").onclick=test2;  
  27. };  
  28. function test1(){  
  29.     alert("first");  
  30. }  
  31. function test2(){  
  32.     alert("second");  
  33. }  
  34. </script>  
  35.   </head>  
  36.     
  37.   <body>  
  38.     <div id="div1">div1</div>  
  39.   </body>  
  40. </html>  

4.2如果我们想为一个对象的某个事件指定多个事件处理，可以考虑使用事件监听。

事件监听语法：

 

IE：

attachEvent(type,callback)

type：事件名 如：onclick、onsubmit、onchange等

callback：事件处理程序

 

基于W3C模型：

addEventListener(type,callback,capture)

Type：事件名 ，没有“on”前缀  如：click、submit、change

Callback：事件处理程序

Capture：事件模型 （可选参数）   （冒泡模型、捕捉模型） true：捕捉模型 

false：冒泡模型 （默认值）

 eventListener.jsp

[html]  view plain  copy
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'inlineBinding.jsp' starting page</title>  
  13.       
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.     <!-- 
  20.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  21.     -->  
  22. <script type="text/javascript">  
  23. //使用事件监听解决为对象的某个时间指定多个事件处理  
  24. //注意IE11已经废除了attachEvent方法，想要看到效果需要在兼容模式下运行程序  
  25. //注意此时，会先执行fn2，在执行fn1  
  26. //attachEvent只在IE和基于IE内核的浏览器中是有效的  
  27. //W3C中是使用addEventListener  
  28. function fn1(){  
  29.     alert('first');  
  30. }  
  31. function fn2(){  
  32.     alert('second');  
  33. }  
  34. window.onload=function(){  
  35.     //在IE中使用  
  36.     //document.getElementById('div1').attachEvent('onclick',fn1);  
  37.     //document.getElementById('div1').attachEvent('onclick',fn2);  
  38.     //W3C中  
  39.     document.getElementById('div1').addEventListener('click',fn1,false);  
  40.     document.getElementById('div1').addEventListener('click',fn2,false);  
  41. };  
  42. </script>  
  43.   </head>  
  44.     
  45.   <body>  
  46.     <div id="div1">div1</div>  
  47.   </body>  
  48. </html>  

4.3IE和W3C事件监听的不同：

监听方法不同：IE attachEvent 、W3C  addEventListener

监听参数不同：IE 没有模型参数、W3C 有模型参数

触发顺序：IE 8及以下的浏览器触发时是先绑定、后触发

W3C浏览器是先绑定、先触发

事件名称不同：IE 事件需要”on”前缀，W3C不需要’on’前缀

4.4解决浏览器兼容性问题

使用

[javascript]  view plain  copy
  1. //解决浏览器的兼容问题  
  2. function addEvent(obj,type,callback){  
  3.     if(obj.attachEvent){//IE  
  4.         obj.attachEvent('on'+type,callback);  
  5.     }else{//W3C  
  6.         obj.addEventListener(type,callback,false);  
  7.     }  
  8. }  
eventListener2.jsp

[html]  view plain  copy
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'inlineBinding.jsp' starting page</title>  
  13.       
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.     <!-- 
  20.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  21.     -->  
  22. <script type="text/javascript">  
  23. //解决浏览器的兼容问题  
  24. function addEvent(obj,type,callback){  
  25.     if(obj.attachEvent){//IE  
  26.         obj.attachEvent('on'+type,callback);  
  27.     }else{//W3C  
  28.         obj.addEventListener(type,callback,false);  
  29.     }  
  30. }  
  31. function fn1(){  
  32.     alert('first');  
  33. }  
  34. function fn2(){  
  35.     alert('second');  
  36. }  
  37. window.onload=function(){  
  38.     var obj = document.getElementById('div1');  
  39.     addEvent(obj,'click',fn1);  
  40.     addEvent(obj,'click',fn2);  
  41. };  
  42. </script>  
  43.   </head>  
  44.     
  45.   <body>  
  46.     <div id="div1">div1</div>  
  47.   </body>  
  48. </html>  

5.事件模型

事件模型分为两种：

 1）冒泡模型

2）捕捉模型

5.1事件冒泡是指事件响应时会上水冒一样上升至最顶级元素

bubble.jsp

[html]  view plain  copy
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'inlineBinding.jsp' starting page</title>  
  13.       
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.     <!-- 
  20.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  21.     -->  
  22. <script type="text/javascript">  
  23. //出现了事件起泡问题问题  
  24. function fn1(){  
  25.     alert('div1');  
  26. }  
  27. function fn2(){  
  28.     alert('div2');  
  29. }  
  30. function fn3(){  
  31.     alert('div3');  
  32. }  
  33. window.onload=function(){  
  34.     document.getElementById("div1").onclick=fn1;  
  35.     document.getElementById("div2").onclick=fn2;  
  36.     document.getElementById("div3").onclick=fn3;  
  37. };  
  38. </script>  
  39. <style type="text/css">  
  40. #div1{width:400px;height: 400px;background: red;}  
  41. #div2{width:300px;height: 300px;background: green;}  
  42. #div3{width:200px;height: 200px;background: blue;}  
  43. </style>  
  44.   </head>  
  45.     
  46.   <body>  
  47.     <div id="div1">  
  48.         <div id="div2">  
  49.             <div id="div3"></div>  
  50.         </div>  
  51.     </div>  
  52. </body>  
  53. </html>  
上面的程序，当点击div3时会同时执行div2和div1的点击事件，即事件冒泡

5.2大多数情况下，程序需要对事件冒泡进行取消

取消事件冒泡：

 

IE：

 

window.event.cancelBubble=true;

 

W3C：

 

function(event){

event.stopPropagation();

}

bubble2.jsp

[html]  view plain  copy
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'inlineBinding.jsp' starting page</title>  
  13.       
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.     <!-- 
  20.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  21.     -->  
  22. <script type="text/javascript">  
  23. //大多数情况下，程序需要对事件起泡进行取消  
  24. //解决浏览器兼容问题  
  25. function stopBubble(event){  
  26.     //IE下  
  27.     if(window.event){  
  28.         window.event.cancelBubble=true;  
  29.     }else{//W3C下  
  30.         event.stopPropagation();  
  31.     }  
  32. }  
  33. function fn1(){  
  34.     alert('div1');  
  35. }  
  36. function fn2(event){  
  37.     alert('div2');  
  38.     stopBubble(event);  
  39. }  
  40. function fn3(){  
  41.     alert('div3');  
  42. }  
  43. window.onload=function(){  
  44.     document.getElementById("div1").onclick=fn1;  
  45.     document.getElementById("div2").onclick=fn2;  
  46.     document.getElementById("div3").onclick=fn3;  
  47. };  
  48. </script>  
  49. <style type="text/css">  
  50. #div1{width:400px;height: 400px;background: red;}  
  51. #div2{width:300px;height: 300px;background: green;}  
  52. #div3{width:200px;height: 200px;background: blue;}  
  53. </style>  
  54.   </head>  
  55.     
  56.   <body>  
  57.     <div id="div1">  
  58.         <div id="div2">  
  59.             <div id="div3"></div>  
  60.         </div>  
  61.     </div>  
  62. </body>  
  63. </html>  
上面的程序即取消了点击div2向点击div1的事件冒泡

6.默认行为

有些html元素，有自己的行为，如，提交按钮、超链接

 有些时候，我们需要对默认行为进行取消，如表单按钮点击时，用户资料添写不完整，我们这时需要将按钮的默认行为取消。

取消默认行为的方法：

IE：

window.event.returnValue=false;

W3C:

event.preventDefault();

stopDefault.jsp

[html]  view plain  copy
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'inlineBinding.jsp' starting page</title>  
  13.       
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.     <!-- 
  20.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  21.     -->  
  22. <script type="text/javascript">  
  23. //阻止表单提交的默认行为  
  24. //解决浏览器兼容问题  
  25. function prevent(event){  
  26.     //IE下  
  27.     if(window.event){  
  28.         window.event.returnValue=false;  
  29.     }else{//W3C下  
  30.         event.preventDefault();  
  31.     }  
  32. }  
  33. window.onload=function(){  
  34.     document.getElementById("submit").onclick=function(event){  
  35.         if(document.getElementById("username").value==''){  
  36.             prevent(event);  
  37.         }  
  38.     }  
  39. };  
  40. </script>  
  41. <style type="text/css">  
  42. #div1{width:400px;height: 400px;background: red;}  
  43. #div2{width:300px;height: 300px;background: green;}  
  44. #div3{width:200px;height: 200px;background: blue;}  
  45. </style>  
  46.   </head>  
  47.     
  48.   <body>  
  49.   <form action="index.jsp" method="post">  
  50.   <input type="text" id="username"/><br>  
  51.   <input type="submit" value="提交" id="submit"/>  
  52.   </form>  
  53. </body>  
  54. </html>  

上面实现了当文本框填写为空时，form不会提交。

7.事件对象

事件对象就是事件发生时系统自动产生的对象，这个对象包含了这个事件发生时所有的信息

 如：鼠标移动，那么，鼠标所在的横、纵坐标就保存到了这个事件对象中

获得事件对象：

 IE9及以上版本、W3C：

 function(event){}

 IE8及以下：

 window.event

useEvent.jsp

[html]  view plain  copy
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'inlineBinding.jsp' starting page</title>  
  13.       
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.     <!-- 
  20.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  21.     -->  
  22. <script type="text/javascript">  
  23. //通过使用event实现控制div移动  
  24. window.onload=function(){  
  25.     var content = document.getElementById("content");  
  26.     document.getElementById("text").onkeyup=function(event){  
  27.         var code;  
  28. //解决浏览器兼容问题  
  29.         //IE下  
  30.         if(window.event){  
  31.             code = window.event.keyCode;  
  32.         }else{//W3C下  
  33.             code = event.keyCode;  
  34.         }  
  35.         switch(code){  
  36.         case 37:  
  37.             //alert('left');  
  38.             content.style.left = (parseInt(content.style.left)-10)+'px';  
  39.             break;  
  40.         case 38:  
  41.             content.style.top = (parseInt(content.style.top)-10)+'px';  
  42.             break;  
  43.         case 39:  
  44.             content.style.left = (parseInt(content.style.left)+10)+'px';  
  45.             break;  
  46.         case 40:  
  47.             content.style.top = (parseInt(content.style.top)+10)+'px';  
  48.             break;  
  49.           
  50.         }  
  51.     };  
  52. };  
  53. </script>  
  54. <style type="text/css">  
  55. #div1{width:400px;height: 400px;background: red;}  
  56. #div2{width:300px;height: 300px;background: green;}  
  57. #div3{width:200px;height: 200px;background: blue;}  
  58. </style>  
  59.   </head>  
  60.     
  61.   <body>  
  62.   <input type="text" id="text"/><br>  
  63.   <div id="content" style="width: 100px;height: 100px;background: red;position: absolute;left: 10px;top: 10px;">text</div>  
  64. </body>  
  65. </html>  

上面实现了在文本框中移动上、下、左（<-）、右（->）键控制div的移动。

以上即为javascript事件编程的简单介绍，需要在实际的使用过程中仔细体会。
qq_41672590
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
什么事件必须要我王二狗来处理？
微风洋洋的博客
02-18 1449
仙路尽头谁为峰，一见二狗终成空！
细说JavaScript事件处理（JavaScript事件处理详解）
zhishunet
01-20 784
js语言的一个特色和就是它的动态性，即一时间驱动的方式对用户输入作出反应而不需要依赖服务器端程序。事件是指人机交互的结果，如鼠标移动、点击按钮、在表单中输入数据或载入新的Web洁面等。
js之事件编程
weixin_57219176的博客
09-03 223
事件编程分类
详解Javascript事件驱动编程
10-23
主要为大家详细介绍了Javascript事件驱动编程的相关资料,通过经典案例向大家介绍Javascript事件驱动编程，需要的朋友可以参考下
JavaScript 异步编程
最新发布
03-30
JavaScript 异步编程
JavaScript动态网页编程
06-02
JavaScript是用于Web开发...主要内容包括：JavaScript使用基础、HTML语言、CSS样式表、JavaScript语言基础、流程控制语句、面向对象编程、流览器对象模型、文档对象模型、事件处理、表单与表单域、XMLHttpRequest对象。
JavaScript函数式编程
11-17
JavaScript函数式编程
Javascript事件处理程序的3种方式
s13166803785的博客
01-11 243
既然产生了事件，我们就要去处理它，据我了解Javascript事件处理程序主要有3种方式： 1、HTML事件处理程序 即我们直接在HTML代码中添加事件处理程序，如下面这段代码： <input id="btn1" value="按钮" type="button" onclick="showmsg();"> <script> function showmsg(){ alert("HTML添加事件处理"); } </script> 从上面的代
JavaScript编程
09-15
关于JavaScript开发的文件书籍,通过学习本书,可以有效的调高前端开发
面向事件编程
pitelrin的专栏
07-31 549
    此信息同时发布在www.humanmonth.cn 上。   面向事件编程：钩子。   如果要用一句俗一点的话来解释什么是面向事件编程，那句话就是：面向钩子编程。   什么是钩子呢？写过 GUI 的人，一般都接触过面向事件编程。那在 GUI 中，钩子在哪里呢？说钩子之前，先说一下元素。界面编程中有各种各样的元素，有看得见的，例如按钮、输入框，也有看不见的，例如...
什么是事件驱动编程风格？
weixin_30918633的博客
05-05 546
[定义] 事件驱动编程是指程序的执行流程取决于事件的编程风格，事件由事件处理程序或者事件回调函数进行处理。当某些重要的事件发生时，就会调用事件回调函数。 [理解] 程序定义了一些函数，它们邦定在了一些特殊事件上（单机，双击等），这些函数在特定的事件发生时才会执行，这种编程的风格就是事件驱动编程风格。 转载于:https://www.cnblogs.com/lishidefengchen...
C++ At Work 专栏...
sanshao27的专栏
01-17 782
  原著：Paul DiLascia翻译：NorthTibet 下载源代码：CAtWork00602.exe (175KB)原文出处：Event Programming 在微软 .NET 框架中可以定义托管类事件并用委托和 += 操作符处理这些事件。这种机制似
Javascript事件驱动编程
Switch的博客
12-25 6686
Javascript事件驱动编程 基本概述     JS是采用事件驱动的机制来响应用户操作的，也就是说当用户对某个html元素进行操作的时候，会产生一个时间，该时间会驱动某些函数来处理。 PS：这种方式和Java GUI中的事件监听机制很像，都是需要注册监听，然后再处理监听，只不过实现的方式不同而已。   可以参考w3school文档： http://www.w3schoo
javascript的使用方法,运算符,流程控制语句,以及事件编程的基本用法
m0_69992031的博客
04-24 1772
1.js的基本使用方法 使用方式一(内部方式) <script> document.write("输入的内容") //向浏览器输出的内容 console.log("输入的内容") ; //可以在浏览器的控制台输出日志 ,使用控制台对象 alert("输入的内容") ; //弹出一个提示框出来 </script> 使用方式二(外部方式) /*外部方式:1单独在js文件夹中,单独创建后缀为.js的文件 2在xxx.js文件中,书写js代码 3在当前某
JS 的基于事件编程
BowenXu11的博客
04-02 165
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> ...
JavaScript编程用法——JavaScript运行环境
zxng_work的博客
10-07 4848
文章目录 #文件版本说明 版本 |颁布日期 |修订章节 |作者 --------| — 0.1|2018.05.01| 撰写草稿 |钟鑫 0.2|2018.05.05| 添加js变量定义 |钟鑫 0.3|2018.05.05| 添加js编译环境 |钟鑫 0.4|2018.05.11| 添加js函数 |钟鑫 0.5|2018.05.14| 添加解构赋值 |钟鑫 0.6|201...
JavaScript中事件编程的分类
perfectmatch_G的博客
04-11 118
事件编程中事件的分类： 1.鼠标点击事件：单击：onclick / 双击：ondbclick 2.和焦点相关的事件：聚焦事件：onfocus / 失去焦点事件：onblur 3.选项卡发生变化的事件：onchange事件 4.鼠标经过 / 移出事件：onmouseover / onmouseout 5.页面加载事件：body中的内容加载完毕之后会执行的事件 onload <!DOCTYPE ...
在 JavaScript 中， 究竟什么是 事件，事件 是指什么？
godkun的博客
02-07 4301
定义 事件是指被程序发现的行为或发生的事情，而且它可能会被程序处理。 MV*框架通常区分两种事件： 用户事件：通常在view中处理，程序允许用户通过触发和处理事件的形式沟通，比如单击一个按钮，滚动屏幕，提交一个表单。 程序事件：应用自身也可以触发和处理一些事件，比如渲染后触发onRender事件等。
JavaScript高级编程详解
"JavaScript高级编程(非扫描版)" 在深入探讨JavaScript高级编程之前，我们先来了解JavaScript这门语言的基本情况。JavaScript是一种轻量级的解释型编程语言，最初由Netscape公司的Brendan Eich设计，目的是为了解决...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值