浅谈 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开发中因空格引发的错误
Nov 08 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
vue微信分享插件使用方法详解
Feb 18 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跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
Prototype 工具函数 学习
2009/07/23 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
Django学习笔记之Class-Based-View
2017/02/15 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
python 多进程队列数据处理详解
2019/12/23 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
使用Python实现批量ping操作方法
2020/05/06 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
Python接口自动化测试的实现
2020/08/28 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
网络工程师专家职业发展路线
2014/02/14 职场文书
售后服务承诺书范文
2014/03/26 职场文书
合作协议书格式范本
2016/03/21 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
如何利用python实现Simhash算法
2022/06/28 Python