浅谈 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 相关文章推荐
JavaScript 数组详解
Oct 10 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
JavaScript设计模式之原型模式详情
Jun 21 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
zf框架的Filter过滤器使用示例
2014/03/13 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
js用图作提交按钮或超连接
2008/03/26 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
vue实现搜索功能
2019/05/28 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
编写简单的Python程序来判断文本的语种
2015/04/07 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
班级入场式解说词
2014/02/01 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python
Python制作一个随机抽奖小工具的实现
2021/07/07 Python