浅谈 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 相关文章推荐
ext 同步和异步示例代码
Sep 18 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
Node.js实现文件上传
Jul 05 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
使用zrender.js绘制体温单效果
Oct 31 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 set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
python先序遍历二叉树问题
2017/11/10 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
人资专员岗位职责
2014/04/04 职场文书
年检委托书
2014/08/30 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
辞职信的写法
2015/02/27 职场文书
公司年会开场白
2015/06/01 职场文书
六一活动主持词
2015/06/30 职场文书
新教师教学工作总结
2015/08/12 职场文书
中学校园广播稿
2015/08/18 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
Java实现注册登录跳转
2022/06/16 Java/Android