浅谈 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 相关文章推荐
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
JavaScript中import用法总结
Jan 20 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
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+JS三级菜单联动菜单实现方法
2016/02/24 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
DOM下的节点属性和操作小结
2009/05/14 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
python如何读写csv数据
2018/03/21 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
大学生求职简历的自我评价
2013/10/21 职场文书
中英文自我评价常用句型
2013/12/19 职场文书
cf收人广告词大全
2014/03/14 职场文书
购房协议书
2014/04/11 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
情况说明书怎么写
2015/10/08 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL