浅谈 javascript 事件处理


Posted in Javascript onJanuary 04, 2015

事件处理

一、事件源:任何一个HTML元素(节点),body、div、button

二、事件:你的操作

                鼠标:
    click    单击
    dblick  双击
    oncontextmenu 文本菜单

              

   <body oncontextmenu="return false">//禁止右键的程序

    mouseover 放上
    mouseout 离开
    mousedown 按下
    mouseup  抬起
    mousemove 鼠标移动

   键盘:
    keypress 键盘事件
    keyup  抬起
    keydown  按下

   文档:
    load   加载
    onload 是页面加载完成之后触发的事件
    unload  关闭
    breforeunload关闭之前

   表单:
    focus  焦点事件
    blur  失去焦点
    submit  提交事件
    change  改变事件

   其它:
    scroll  滚动
    selectstart 选择事件

三、事件处理程序

    第一种:
     格式:<tag on事件="事件处理程序" />
    实例:

<script>

  function show(){

   var one=document.getElementById("one");

   alert(one.innerText);

  }

  show();

</script>

<body>

<div id="one">

 wwwwwwwwwwwwwwwww

</div>

<input type="button" onclick="show()" value="show">

第二种:
 直接在javascript里边对象.on处理程序

        

 <div id="two">

 你好,三水点靠木https://3water.com

 </div>

 <script>

  var one=document.getElementById("two");

  one.onclick=function(){

   this.style.backgroundColor="red";

  }

 </script>

第三种:
  基本没什么人用

<script for="事件源ID" event="事件">事件处理程序</script>

<div id="th">

 你好,三水点靠木https://3water.com

 </div>

 <script for="th" event="onclick">

  var one=document.getElementById("th");

 one.style.backgroundColor="red";

 </script>

小伙伴们是否了解了javascript的事件处理了呢,有疑问就给我留言吧。

Javascript 相关文章推荐
JS不间断向上滚动效果代码
Dec 25 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
js实现单元格拖拽效果
Feb 10 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
jquery实现可拖拽弹出层特效
Jan 04 #Javascript
jQuery中:image选择器用法实例
Jan 03 #Javascript
jQuery中:submit选择器用法实例
Jan 03 #Javascript
jQuery中:checkbox选择器用法实例
Jan 03 #Javascript
jQuery中:radio选择器用法实例
Jan 03 #Javascript
jQuery中:password选择器用法实例
Jan 03 #Javascript
jQuery中:text选择器用法实例
Jan 03 #Javascript
You might like
php日历[测试通过]
2008/03/27 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
浅析is_writable的php实现
2013/06/18 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
使用js+jquery实现无限极联动
2013/05/23 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
python中urllib模块用法实例详解
2014/11/19 Python
Python中的高级数据结构详解
2015/03/27 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
基于FME使用Python过程图解
2020/05/13 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
python 基于opencv去除图片阴影
2021/01/26 Python
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
管理站站长岗位职责
2013/11/27 职场文书
产品促销活动策划书
2014/01/15 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
小学评语大全
2014/04/22 职场文书
上学路上观后感
2015/06/16 职场文书
致运动员加油稿
2015/07/21 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书