zoukankan      html  css  js  c++  java
  • js的事件机制

    js的事件机制
    解释:当我们的行为动作满足了一定的条件后,会触发某事务的执行。
    内容:
    1.单双击事件
      单击:onclick 当鼠标单击时候会触发
      双击:ondbclick 当鼠标双击时候会触发

    2.鼠标事件
      onmouserover 当鼠标悬停在某个HTML元素上的时候触发
      onmousermove 当鼠标在某个HTML元素上移动的时候触发
      onmouseout 当鼠标在某个HTML元素上移除的时候触发
    3.键盘事件
      onkeyup 当鼠标在某个HTML元素上弹起的时候触发
      onkeydown 当鼠标在某个HTML元素上下压的时候触发
    4.焦点事件
      onfocus 当某个HTML元素获取焦点的时候触发
      onblur 当某个HTML元素失去焦点的时候触发
    5.页面加载事件
      onload 当页面加载成功后
    注意:
      js中添加事件的第一种方式:
      在HTML上直接使用事件操作进行添加,操作值为监听的函数。
      js中的事件只有在当前HTML元素中有效。
      一个HTML元素可以添加多个不同的事件。
      一个事件 可以触发多个函数的执行,但是不同的函数要使用分号隔开。

    实现代码

    <h3>js的单击事件机制</h3>
    <hr />
    <input type="button" id="" value="单击事件" onclick="testOnclick()"/>
    <input type="button" id="" value="单击事件" onclick="testdbclick()"/>
    <hr /><br />
    <div id="showdiv" onmouseover="testOnmouseover();" onmousemove="testOnmousemove();"
    onmouseout="testOnmouseout();">
    </div>
    <hr />
    键盘事件学习:<br />
    键盘弹起事件: <input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/>
    <br />
    键盘下压事件: <input type="text" name="" id="" value="" onkeyup="testOnkeydown()"/>
    <hr />
    焦点事件学习:<hr />
    获取焦点:
    <input type="text" name="" id="" value="" onfocus="testOnfocus();"/>
    失去焦点:
    <input type="text" name="" id="" value="" onfocus="testOnblur()"/>

  • 相关阅读:
    Day3-python基础3
    批量分发
    Day2-python基础2
    数据类型总结,and字符编码和文件处理
    集合与字符编码
    列表等及其部分讲解
    赋值符号和循环略解
    Python中常量,和基本数据类型,输入输出的方法,基本运算符。
    Python解释器了解,及部分变量
    计算机硬件,操作系统,编程语言
  • 原文地址:https://www.cnblogs.com/qhcyp/p/10628814.html
Copyright © 2011-2022 走看看