浅谈 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 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
如何利用php+mysql保存和输出文件
2006/10/09 PHP
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
前端性能优化建议
2020/09/17 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
python基于socket实现网络广播的方法
2015/04/29 Python
Python 多线程实例详解
2017/03/25 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
django-filter和普通查询的例子
2019/08/12 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
办加油卡单位介绍信
2014/01/09 职场文书
西式结婚主持词
2014/03/14 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
幼儿园老师寄语
2014/04/03 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
企业贷款委托书格式
2014/09/12 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
周年庆典答谢词
2015/01/20 职场文书
初中政治教师教学反思
2016/02/23 职场文书