浅谈 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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
jquery获取节点名称
Apr 26 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
基于Angularjs实现分页功能
May 30 Javascript
浅析Jquery操作select
Dec 13 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 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的FTP学习(二)
2006/10/09 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
Javascript简单实现可拖动的div
2013/10/22 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
教育专业个人求职信
2013/12/02 职场文书
英文自荐信
2013/12/15 职场文书
初中校园广播稿
2014/02/02 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
原告代理词范文
2015/05/25 职场文书
保护动物的宣传语
2015/07/13 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书