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!
  • 相关阅读:
    博客园cnblogs for win8 托管到GitHub开源
    html5 canvas 画图表
    回文数
    SpringBoot+logback实现按业务输出日志到不同的文件
    Class.forName() 与 ClassLoader.loadClass()的区别
    Easypoi实现单模板生成多页word文档
    普通Java项目中使用Sl4j+Log4j2打印日志
    SpringBoot集成JWT
    Java8_Lambda表达式
    SpringBoot自定义Condition注解
  • 原文地址:https://www.cnblogs.com/leeten/p/3444352.html
Copyright © 2011-2022 走看看