浅谈 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 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
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和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
pymongo中group by的操作方法教程
2019/03/22 Python
django框架auth模块用法实例详解
2019/12/10 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
运动会铅球比赛加油稿
2014/09/26 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
画展观后感
2015/06/17 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
Redis如何实现分布式锁
2021/08/23 Redis