浅谈 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实现省市联动特效
Dec 17 Javascript
JavaScript 函数的执行过程
May 09 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
layDate日期控件使用方法详解
Nov 15 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 Javascript
微信小程序用户授权最佳实践指南
May 08 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遍历数组的方法汇总分析
2013/06/08 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
解决vue props 拿不到值的问题
2018/09/11 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
Python聚类算法之基本K均值实例详解
2015/11/20 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
详解Django admin高级用法
2019/11/06 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
Python实现归一化算法详情
2022/03/18 Python
MySQL时区造成时差问题
2022/04/13 MySQL
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python