浅谈 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 相关文章推荐
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
详解datagrid使用方法(重要)
Nov 06 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 XML操作的各种方法解析(比较详细)
2010/06/17 PHP
php实现RSA加密类实例
2015/03/26 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
使用store来优化React组件的方法
2017/10/23 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
Python中的多重装饰器
2015/04/11 Python
python遍历目录的方法小结
2016/04/28 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
银行出纳岗位职责
2013/11/25 职场文书
感恩节活动方案
2014/01/27 职场文书
学生会部长竞聘书
2014/03/31 职场文书
程序员求职信
2014/04/16 职场文书
机房搬迁方案
2014/05/01 职场文书
二人合伙经营协议书
2014/09/13 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
2015年推普周活动总结
2015/03/27 职场文书