浅谈 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 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
javascript二维数组转置实例
Jan 22 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 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 透明水印生成代码
2012/08/27 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
js实现返回顶部效果
2017/03/10 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
简单的Python的curses库使用教程
2015/04/11 Python
python实现单向链表详解
2018/02/08 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
优秀辅导员事迹材料
2014/02/16 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
临床医学专业求职信
2014/08/08 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js