• JavaScript学习笔记(六)—— 异步编码


    第七章 异步编码

    1  事件处理程序

    处理程序:即网页加载完毕后将执行的代码,称回调函数或监听器;

    包含:处理函数+window.onload=函数名;

     1 <script language="JavaScript" type="text/JavaScript">
     2 
     3 function page(){
     4 
     5 alert("I'm alive!");
     6 
     7 }
     8 
     9 window.onload=page;
    10 
    11 </script>

    2 响应事件的方式编写代码

    getElementByTagName返回NodeList对象,

    表示DOM事件对象的属性:

    target:存储触发事件的对象;

    type:是字符串,如("click","load")指出发生的是哪种事件

    timeStamp:提供事件发生时间属性;

    keyCode:告诉用户刚刚按下那个键

    clientX:确定鼠标/单击位置离浏览器窗口左边缘有多远;

    clientY:确定鼠标/单击位置离浏览器窗口上边缘有多远;

    screenX:确定鼠标/单击位置离屏幕窗口左边缘有多远;

    screenY:确定鼠标/单击位置离屏幕窗口上边缘有多远;

    pageX:确定鼠标/单击位置离网页窗口左边缘有多远;

    pageY:确定鼠标/单击位置离网页窗口上边缘有多远;

    touches:在触摸设备上确定用户用多少根手指触摸屏幕;

    程序1 单击+计时

      1 <!doctype html>
      2 
      3 <html lang="en">
      4 
      5 <head>
      6 
      7 <title>Image Guess</title>
      8 
      9 <meta charset="utf-8">
     10 
     11 <style type="text/css">
     12 
     13 body{margin:20px;}
     14 
     15 img{margin:20px;}
     16 
     17 </style>
     18 
     19 <script language="JavaScript" type="text/JavaScript">
     20 
     21 window.onload=init;
     22 
     23 //初始捕捉事件
     24 
     25 function init(){
     26 
     27 var images=document.getElementsByTagName("img");
     28 
     29 for(var i=0;i<images.length;i++)
     30 
     31 images[i].onclick=showAnswer;
     32 
     33 }
     34 
     35 //处理单击事件
     36 
     37 function showAnswer(e){//单击产生一个事件对象被传递
     38 
     39 var image=e.target;//target指出触发事件的元素
     40 
     41 var name=image.id;
     42 
     43 name=name+".jpg";
     44 
     45 image.src=name;
     46 
     47  
     48 
     49 setTimeout(reblur, 2000, image);
     50 
     51 }
     52 
     53 //时间事件,2秒后变回模糊
     54 
     55 function reblur(image) {
     56 
     57 var name = image.id;
     58 
     59 name = name + "blur.jpg";
     60 
     61 image.src = name;
     62 
     63 }
     64 
     65 /*
     66 
     67 function init(){
     68 
     69 var image=document.getElementById("zero");
     70 
     71 image.onclick=showAnswer;
     72 
     73 }
     74 
     75 window.onload=init;
     76 
     77 function showAnswer(){
     78 
     79 var image=document.getElementById("zero");
     80 
     81 image.src="zero.jpg";
     82 
     83 }
     84 
     85 */
     86 
     87 //鼠标自动
     88 
     89 /*
     90 
     91 window.onload = function() {
     92 
     93 var images = document.getElementsByTagName("img");
     94 
     95 for (var i = 0; i < images.length; i++) {
     96 
     97 images[i].onmouseover = showAnswer;
     98 
     99 images[i].onmouseout = reblur;
    100 
    101 }
    102 
    103 };
    104 
    105 function showAnswer(eventObj) {
    106 
    107 var image = eventObj.target;
    108 
    109 var name = image.id;
    110 
    111 name = name + ".jpg";
    112 
    113 image.src = name;
    114 
    115 }
    116 
    117  
    118 
    119 function reblur(eventObj) {
    120 
    121 var image = eventObj.target;
    122 
    123 var name = image.id;
    124 
    125 name = name + "blur.jpg";
    126 
    127 image.src = name;
    128 
    129 }
    130 
    131 */
    132 
    133 </script>
    134 
    135 </head>
    136 
    137 <body>
    138 
    139 <img id="zero" src="zeroblur.jpg" />
    140 
    141 <img id="one" src="oneblur.jpg" />
    142 
    143 <img id="two" src="twoblur.jpg" />
    144 
    145 <img id="three" src="threeblur.jpg" />
    146 
    147 <img id="four" src="fourblur.jpg" />
    148 
    149 <img id="five" src="fiveblur.jpg" />
    150 
    151 </body>
    152 
    153 </html>

    程序2 鼠标位置

     1 <!doctype html>
     2 
     3 <html lang="en">
     4 
     5 <head>
     6 
     7   <meta charset="utf-8">
     8 
     9   <title>Pirates Booty</title>
    10 
    11   <script>
    12 
    13 window.onload = init;
    14 
    15 function init() {
    16 
    17 var map = document.getElementById("map");
    18 
    19 map.onmousemove = showCoords;
    20 
    21 }
    22 
    23  
    24 
    25 function showCoords(eventObj) {
    26 
    27 var coords = document.getElementById("coords");
    28 
    29 var x = eventObj.clientX;//获取位置
    30 
    31 var y = eventObj.clientY;
    32 
    33 coords.innerHTML = "Map coordinates: " + x + ", " + y;//修改
    34 
    35 }
    36 
    37   </script>
    38 
    39 </head>
    40 
    41 <body>
    42 
    43 <img id="map" src="map.jpg">
    44 
    45 <p id="coords">Move mouse over map to find coordinates...</p>
    46 
    47 </body>
    48 
    49 </html>

    3 事件群英谱

    click:单击触发

    load:加载完网页触发

    unload:关闭或切换到其他网页触发

    mousemove:在元素上移动鼠标触发

    mouseover:鼠标移至元素上触发

    mouseout:鼠标移开元素触发

    keypress:按下任何键触发

    resize:调整浏览器窗口大小触发

    play:单击<video>元素播放按钮触发

    pause:单击<video>元素暂停按钮触发

    dragstart:用户拖曳网页元素时触发

    drop:放下拖曳元素触发

    touchstart:触摸设备,触摸并按住元素触发

    touchend:停止触摸触发;

  • 相关阅读:
    常用 JS代码
    java中的变量各占得字节数
    70种简单好用的js代码
    JavaScript window.document的属性、方法和事件小结
    JS的event对象使用总结
    PHP魔术函数执行时间和顺序解析
    javascript event详解
    JS获取鼠标点击对象
    ThinkPHP实例化模型的四种方法
    实践:服务器编写/系统架构/cache
  • 原文地址:https://www.cnblogs.com/weimingai/p/10356892.html
Copyright © 2020-2023  润新知