分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置：首页 > 前端开发

js事件流

发布时间：2023-09-06 01:18责任编辑：赖小花关键词：js

1.HTML事件处理程序:

JS事件放在HTML里面。


  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <title>HTML事件处理程序</title>
  5. </head>
  6. <body>
  7. <div>
  8. <inputtype="button"value="按钮">
  9. </div>
  11. <scripttype="text/javascript">
  12. functionshow(){
  13. alert(‘helloworld‘)
  14. }
  15. </script>
  16. </body>
  17. </html>


2.DOM0级事件处理程序：


  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <title>DOM0级事件处理程序</title>
  5. </head>
  6. <body>
  7. <div>
  8. <inputtype="button"value="按钮">
  9. </div>
  11. <scripttype="text/javascript">
  12. varbtn=document.getElementById(‘btn‘);
  13. btn.onclick=function(){
  14. alert(‘helloworld‘)
  15. }
  17. btn.onclick=null;//取消onclick事件
  18. </script>
  19. </body>
  20. </html>

3.DOM2级事件处理程序


  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <title>DOM2级</title>
  5. </head>
  6. <body>
  7. <div>
  8. <inputtype="button"value="按钮">
  9. </div>
  10. <scripttype="text/javascript">
  11. //DOM2级事件定义了两个方法
  12. //用于处理指定和删除事件程序的操作
  13. //addEventListener()和removeEventListener()
  14. //接收三个参数：要处理的时间名、事件处理程序、布尔值（true:捕获阶段、false:冒泡阶段）
  15. //一个按钮上可以添加多个事件
  16. varbtn=document.getElementById(‘btn‘);
  17. btn.addEventListener(‘click‘,function(){
  18. alert(‘helloworld‘);
  19. },false);
  20. //删除事件的参数必须和添加事件的一样，
  21. btn.removeEventListener(‘click‘,function(){
  22. alert(‘helloworld‘);
  23. },false);
  25. </script>
  26. </body>
  27. </html>


4.IE事件处理程序

[html]view plaincopy
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <title>IE事件处理程序</title>
  5. </head>
  6. <body>
  7. <div>
  8. <inputtype="button"value="按钮">
  9. </div>
  11. <scripttype="text/javascript">
  12. //attachEvent()添加事件
  13. //detachEvent()删除事件
  14. //接收相同的两个参数：事件名称、事件程序
  16. varbtn=document.getElementById(‘btn‘);
  17. btn.attachEvent(‘onclick‘,function(){
  18. alert(‘hello‘)
  19. });
  20. btn.detachEvent(‘onclick‘,function(){
  21. alert(‘hello‘)
  22. })
  23. </script>
  24. </body>
  25. </html>

5.跨浏览器事件处理程序


  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <title>跨浏览器事件处理</title>
  5. </head>
  6. <body>
  7. <div>
  8. <inputtype="button"value="按钮">
  9. </div>
  12. <scripttype="text/javascript">
  13. functionshow(){
  14. alert(‘hello‘);
  15. }
  16. vareventUtil={
  17. //添加事件
  18. addHandler:function(element,type,handler){
  19. if(element.addEventListener){
  20. addEventListener(type,handler,false);
  21. }elseif(element.attachEvent){
  22. attachEvent(‘on‘+type,handler);
  23. }else{
  24. element[‘on‘+type]=handler;
  25. }
  26. }
  27. //删除事件
  28. removeHandler:function(element,type,handler){
  29. if(element.removeEventListener){
  30. removeEventListener(type,handler,false);
  31. }elseif(element.attachEvent){
  32. detachEvent(‘on‘+type,handler);
  33. }else{
  34. element[‘on‘+type]=null;
  35. }
  36. }
  37. }
  38. eventUtil.addHandler(btn,‘click‘,show);
  39. eventUtil.removeHandler(btn,‘click‘,show);
  40. </script>
  41. </body>
  42. </html>


6.DOM事件对象


  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <title>DOM事件对象</title>
  5. </head>
  6. <body>
  7. <div>
  8. <inputtype="button"value="按钮">
  9. <ahref="http://www.baidu.com"id=‘go‘>跳转</a>
  10. </div>
  12. <scripttype="text/javascript">
  13. //1.DOM的事件对象
  14. //(1)type属性用于获取时间类型
  15. //(2)target属性用户获取事件目标
  16. //(3)stopPropagation()阻止事件冒泡
  17. //(4)preventDefault()阻止默认行为
  20. varbtn=document.getElementById(‘btn‘);
  21. varbox=document.getElementById(‘box‘);
  22. vargo=document.getElementById(‘go‘);
  23. btn.onclick=function(e){
  24. alert(‘btn‘)
  25. e.stopPropagation();
  26. };
  27. box.onclick=function(){
  28. alert(‘box‘)
  29. };
  30. go.onclick=function(e){
  31. e.stopPropagation();
  32. e.preventDefault();
  33. }
  34. </script>
  35. </body>
  36. </html>


7.IE事件对象


    1. <!DOCTYPEhtml>
    2. <html>
    3. <head>
    4. <title>IE事件对象</title>
    5. </head>
    6. <body>
    8. <div>
    9. <ahref="">跳转</a>
    10. </div>
    11. <scripttype="text/javascript">
    12. //1.IE的事件对象
    13. //(1)type属性用于获取时间类型
    14. //(2)srcElement属性用户获取事件目标
    15. //(3)cancelBubble属性：true:阻止事件冒泡
    16. //(4)returnValue属性：flase:阻止默认行为
    17. window.onload=function(){
    18. vargo=document.getElementById(‘go‘);
    19. varbox=document.getElementById(‘box‘);
    20. eventUtil.addHandler(box,‘click‘,function(){
    21. alert(‘111‘)
    22. })
    23. }
    24. vareventUtil={
    25. //添加事件
    26. addHandler:function(element,type,handler){
    27. if(element.addEventListener){
    28. addEventListener(type,handler,false);
    29. }elseif(element.attachEvent){
    30. attachEvent(‘on‘+type,handler);
    31. }else{
    32. element[‘on‘+type]=handler;
    33. }
    34. },
    35. //删除事件
    36. removeHandler:function(element,type,handler){
    37. if(element.removeEventListener){
    38. removeEventListener(type,handler,false);
    39. }elseif(element.attachEvent){
    40. detachEvent(‘on‘+type,handler);
    41. }else{
    42. element[‘on‘+type]=null;
    43. }
    44. },
    46. getEvent:function(event){
    47. returnevent?event:window.event;
    48. },
    49. getType:function(event){
    50. returnevent.type;
    51. },
    52. getTarget:function(){
    53. returnevent.target||event.srcElement
    54. },
    55. preventDefault:function(event){
    56. if(event.preventDefault{
    57. event.preventDefault()
    58. }else{
    59. event.returnValue=false;
    60. }
    61. },
    62. stopPropagation:function(){
    63. if(event.stopPropagation){
    64. event.stopPropagation();
    65. }else{
    66. event.cancelBubble:false;
    67. }
    68. }
    69. }
    70. </script>
    71. </body>
    72. </html>

js事件流

原文地址：http://www.cnblogs.com/chaofei/p/7688916.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved