zoukankan      html  css  js  c++  java
  • javascript之事件学习(一)

    今晚学习了一下javascript的事件

    一.事件主要用法需要在事件的前面将上on也就是当某事件发生时处理某方法

    二.javascript的事件主要有一下几种常用的

      鼠标

      1.click     鼠标单击

      2.dblclick  鼠标双击

      3.contentmenu 鼠标右键(防止复制效果)

      4.mouseover 鼠标放上

      5.mouseout  鼠标离开

      6.mousedown 鼠标按下

      7.mouseup  鼠标抬起

      8.mousemove 鼠标移动

      键盘

      1.keypress 键盘事件

      2.keyup 抬起

      3.keydown 按下

      文档

      1.load 文档加载好

      2.unload 文档关闭

      3.beforeunload 文档关闭之前

      表单

      1.focus 焦点(应用于搜索栏点击之类的效果)

      2.blur 失去焦点

      3.submit 提交事件  4.change 改变事件 比如改变select事件  其他  1.scroll滚动事件   2.select 选择事件   。。。。

    三.事件处理格式

      1.直接在tag标签中处理

      on+某事件

       <tag on事件="短的代码 "  onxxx="show()"></tag>

      2.将事件写入js代码中

      实例

     html代码

    <div id="one">aaaa</div>
    <script>
    var obj=document.getElementById('one');
    obj.onmouseover=function(){
    this.style.backgroundColor="red";
    }
    </script>

      3.<script for="事件源ID" event="事件">

         事件处理程序

        </script>

      该方法不常用

      html代码

    <div id="one">aaaa</div>
    <script for="one" event="onclick">
      var obj=document.getElementById('one');
      
        obj.style.backgroundColor="red";
    
    </script>

     四.事件源规则

      1.一个事件源上面可以加多个事件

      示例4.0

     1 <body>
     2 <div id="one" onmouseover="show(this,'red')" onmouseout="show(this,'green')" onclick="show(this,'blue')" ondblclick="show(this,'yellow')">
     3 hello world!
     4 </div>
     5 <script>
     6   function show(obj,col){
     7     obj.style.backgroundColor=col;
     8   //obj=this,col=red;
     9   }
    10 </script>
    11 
    12 </body>

      示例4.0解释

      onmouseover="show(this,'red')"

      当鼠标放在元素上面时运行show()方法

      将this和颜色red两个参数传入show中

      show用obj和col来接收。所以obj=this,col="red";

    五.load、unload、beforeunload示例

    <body onload="alert('hello world');" onbeforeunload="event.returnValue='你小心点'" onunload="alert('good bye!')">
    </body>

     

    if you don't try,you will never know!
  • 相关阅读:
    采用GRE隧道连接不同虚拟机上的mininet网络
    ubuntu下安装Pycharm
    Update to openvswitch 2.3.0
    安装Openvswich 2.3.0
    ubuntu安装git
    解决Vmware Vsphere中虚拟机与本地机复制粘贴问题
    windows下安装python的xlrd和xlwd安装包
    ubuntu 下NetworkX的安装和使用
    大整数乘法 python实现
    推特(Twitter)的Snowflake算法——用于生成唯一ID
  • 原文地址:https://www.cnblogs.com/leeten/p/3444352.html
Copyright © 2011-2022 走看看