浅谈 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 相关文章推荐
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
AngularJS表单验证功能
Oct 19 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 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 join函数应用
2011/05/04 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
python接入支付宝的实例操作
2020/07/20 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
上班上网检讨书
2014/01/29 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
商场主管竞聘书
2014/03/31 职场文书
学校花圃的标语
2014/06/18 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书