JavaScript——3（事件处理与实用范例）

最新推荐文章于 2022-06-27 00:29:58 发布

Decorator2015

最新推荐文章于 2022-06-27 00:29:58 发布

阅读量552

点赞数

分类专栏： HTML/JavaScript/CSS 文章标签： javascript

本文链接：https://blog.csdn.net/Decorator2015/article/details/51395273

版权

HTML/JavaScript/CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.事件驱动模式：

例如用户单击按钮，改变窗口大小，移动窗口，加载网页等，这些事件发生时，该窗口就会传送信息给系统，然后系统会处理信息传送给其他关联的窗口，这些窗口再根据信息作做出适当的处理，此种工作模式称为事件驱动（event driven）。

2.事件的类型：

load，unload，click，mouseover等简单的传统事件；
传统事件；
DOM事件；
触控事件；

3.事件处理程序

方式1
onclick中直接定义函数

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>范例</title>
  </head>
  <body>
    <input type="button" id="b1" value="显示信息" 
      onclick="javascript:window.alert('Hello World!');">
  </body>
</html>

方式2
onclick调用JavaScript中定义的函数

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>范例</title>
    <script language="javascript">
      function showMsg()
      {
        window.alert('Hello World!');
      }
    </script>
  </head>
  <body>
    <input type="button" id="b1" value="显示信息" onclick="javascript:showMsg();">
  </body>
</html>

方式3
将onclick事件定义在JavaScript中

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>范例</title>   
  </head>
  <body>
    <input type="button" id="b1" value="显示信息">
    <script language="javascript">
      var b1 = document.getElementById("b1");   //取得 <button> 元素
      b1.onclick = showMsg;                 //设置事件处理程序

      function showMsg()
      {    
        window.alert('Hello World!');
      }
    </script>
  </body>
</html>

方式4
添加事件监听，addEventListener();

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>范例</title>   
  </head>
  <body>
    <input type="button" id="b1" value="显示信息">
    <script language="javascript">
      var b1 = document.getElementById("b1");     
      b1.addEventListener("click", showMsg, false);

      function showMsg()
      {    
        window.alert('Hello World!');
      }
    </script>
  </body>
</html>

4.JavaScript实用范例

4.1打印网页

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>范例</title>   
  </head> 
  <body>
    <h1>我的网页</h1>
    <a href="javascript:window.print();">打印网页</a>
  </body>
</html>

4.2随机变换背景图片

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>范例</title>   
  </head> 
  <body>
    <script language="javascript">
      var bg = new Array();
      bg[0] = "bg1.gif"; 
      bg[1] = "bg2.gif"; 
      bg[2] = "bg3.gif"; 
      bg[3] = "bg4.gif"; 
      var num = Math.floor(Math.random() * bg.length);
      document.body.background = bg[num];
    </script>
  </body>
</html>

4.3网页跑马灯

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>范例</title>   
    <script language="javascript">
      var info="欢迎光临翠墨资讯﹗　　　　　　　　　　　　　　　";
      var interval=200;
      var empty="";
      var sin=0;
      function Scroll()
      {
        document.myForm.myText.value = info.substring(sin, info.length) 
          + empty + info.substring(0, info.length);
        sin++;
        sin++;
        if (sin > info.length) sin = 0;
        window.setTimeout("Scroll();", interval);   
       } 
    </script>
  </head> 
  <body onload="javascript:Scroll();">
    <form name="myForm">
      <input type="text" name="myText" size="30">
    </form>
  </body>
</html>

4.4半透明效果

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>范例</title>   
    <script language="javascript">
      function Change(obj)
      {
        obj.filters.alpha.opacity = 50;  
      }
      function Restore(obj)
      {
        obj.filters.alpha.opacity = 100;     
      }
    </script>
  </head> 
  <body>
    <img src="piece1.jpg" width="200" style="filter:alpha(opacity=100)" 
      onmouseover="javascript:Change(this);" 
      onmouseout="javascript:Restore(this);">
  </body>
</html>

4.5具有超链接功能的下拉菜单

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>范例</title>   
    <script language="javascript">
      function GO(){
        newWin = open();
        newWin.location.href = 
          document.myForm.mySelect.options[document.myForm.mySelect.selectedIndex].value;
      }
    </script>
  </head> 
  <body>
    <form name="myForm"> 
      <select name="mySelect" size="1"> 
        <option value="http://www.sina.com.cn">新浪 
        <option value="http://www.yam.com">蕃薯藤
        <option value="http://www.baidu.com">百度
      </select>
      <input type="button" value="GO!" onclick="javascript:GO();">
    </form>
  </body>
</html>

4.6显示进入时间

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>范例</title>   
    <script language="javascript">
      function showEntryTime(){
        var now = Date();
        document.myForm.myField.value = now.toString();
      }

    </script>
  </head> 
  <body onload="showEntryTime();">
    <form name="myForm"> 
      <input type="text" name="myField" size="40">
    </form>
  </body>
</html>

4.7显示停留时间

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>范例</title>   
    <script language="javascript">
      var miliseconds = 0, seconds = 0;
      document.myForm.myField.value = "0";
      function showStayTime(){
        if (miliseconds >= 9){
          miliseconds = 0;
          seconds += 1;
        }
        else miliseconds += 1;
        document.myForm.myField.value = seconds + "." + miliseconds;
        setTimeout("showStayTime()",100);
      }
    </script>
  </head>
  <body onload="showStayTime();">
    <form name="myForm"> 
      您的停留时间为<input type="text" name="myField" size="5">秒
    </form>
  </body>
</html>

4.8显示在线时钟

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>范例</title>   
    <script language="javascript">
      function showClock()
      {
        var today = Date();
        document.myForm.myField.value = today.toString();
        setTimeout("showClock()", 100);
      }
    </script>
  </head> 
  <body onload="showClock();">
    <form name="myForm"> 
      <input type="text" name="myField" size="40">
    </form>
  </body>
</html>

Decorator2015

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——3（事件处理与实用范例）

1.事件驱动模式：例如用户单击按钮，改变窗口大小，移动窗口，加载网页等，这些事件发生时，该窗口就会传送信息给系统，然后系统会处理信息传送给其他关联的窗口，这些窗口再根据信息作做出适当的处理，此种工作模式称为事件驱动（event driven）。2.事件的类型：load，unload，click，mouseover等简单的传统事件；传统事件； DOM事件；触控事件；3.事件处理程序方式1
复制链接

扫一扫

专栏目录