浅谈 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包将字符串生成二维码图片
Sep 12 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
php时间戳转换代码详解
2019/08/04 PHP
JS字符串函数扩展代码
2011/09/13 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
TypeScript入门-接口
2017/03/30 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
python绘制双柱形图代码实例
2017/12/14 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
django反向解析和正向解析的方式
2018/06/05 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
Python numpy数组转置与轴变换
2019/11/15 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
大数据分析用java还是Python
2020/07/06 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
二审答辩状格式
2015/05/22 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
2019年教师入党申请书
2019/06/27 职场文书
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android