JS事件-对象监视事件,事件触发函数
写在前面:
一句话作为本文的核心思想:对象监视事件,事件触发函数;
(一)事件
1、事件分类
(1)鼠标事件
click() 鼠标单击
dblclick() 鼠标双击
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
mousemove() 鼠标移动事件
mousedown() 鼠标按下事件
mouseup() 鼠标按键被松开事件
scroll 滚动事件(body)
(2)键盘事件
keydown 键盘按下
keyup 键盘抬起
(3)触摸事件
touchstart
touchmove
touchend
(4)表单事件
submit 用户提交表单时事件
select 文本框的文本被选中
focus 获得焦点事件
blur 失去焦点事件
change 内容改变事件
(5)页面加载完毕事件
load 页面加载完毕
2、监视事件
(1)在html标签上,通过on来监视
<button onclick="check()">点击触发事件</button>
<script type="text/javascript">
function check(){
alert('hello');
}
</script>
(2)通过JavaScript监视用户的行为
<button >点击触发事件</button>
<script type="text/javascript">
oBtn = document.getElementsByTagName('button');
oBtn[0].onclick = function check(){
alert('hello');
}
</script>
(3)绑定事件监听器
addEventListener(‘事件类型’,事件发生产生的行为函数,true/false)
attachEvent(‘事件类型’,’事件发生执行的函数’)给IE8以下的浏览器监视事件
这部分内容灰常简单,记住常用的on监听即可,记住单击事件 click ,其他的套路都是一样一样的;
替换click就OK啦!
JS事件-对象监视事件,事件触发函数的更多相关文章
- 事件对象(示例、封装函数EventUtil())
事件对象 什么是事件对象? 在触发DOM上的事件时都会产生一个对象. 事件对象event 1.DOM中的事件对象 (1)\type属性用于获取事件类型 (2)\target属性用于获取事件目标 (3) ...
- 简单总结焦点事件、Event事件对象、冒泡事件
每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- 从零开始的全栈工程师——js篇2.21(事件对象 arguments 阻止事件默认行为兼容 事件委托 事件源对象)
一.事件对象 1.常用的事件2.每个元素身上的事件都是天生存在的 不需要我们去定义 只需要我们给这个事件绑定一个方法 当事件触发的时候就会执行这个方法 3.事件绑定的写法 ①div.onclick=f ...
- react事件中的事件对象和常见事件
不管是在原生的js还是vue中,所有的事件都有其事件对象,该事件对象event中包含着所有与事件相关的信息,在react中,所有的事件也有其事件对象,在触发DOM上的某个事件时,就会产生一个事件对象. ...
- DOM中的事件对象和IE事件对象
DOM中的事件对象 IE事件对象 属性/方法 类型 读/写 说明 属性/方法 类型 读/写 说明 bubles Boolean 只读 表明事件是否冒泡 cancleBubble Boolean ...
- JavaScript的事件对象_键盘事件
用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...
- DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理
事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...
随机推荐
- ObjectMapper : can only instantiate non-static inner class by using default, no-argument constructor
Label_t lTrain = new ObjectMapper().readValue(s, Label_t.class); 因为Label_t是内部类,需要 1.static 2.无参构造函数
- 吴裕雄--天生自然JAVA面向对象高级编程学习笔记:final关键字
final class A{ // 使用final定义类,不能有子类 }; class B extends A{ // 错误,不能被继承 }; class A{ public final void p ...
- MySQL 如何使用 PV 和 PVC?【转】
本节演示如何为 MySQL 数据库提供持久化存储,步骤为: 创建 PV 和 PVC. 部署 MySQL. 向 MySQL 添加数据. 模拟节点宕机故障,Kubernetes 将 MySQL 自动迁移到 ...
- Helm 架构【转】
在实践之前,我们先来看看 Helm 的架构. Helm 有两个重要的概念:chart 和 release. chart 是创建一个应用的信息集合,包括各种 Kubernetes 对象的配置模板.参数定 ...
- 云时代架构阅读笔记十六——Hystrix理解
背景 分布式系统环境下,服务间类似依赖非常常见,一个业务调用通常依赖多个基础服务.如下图,对于同步调用,当库存服务不可用时,商品服务请求线程被阻塞,当有大批量请求调用库存服务时,最终可能导致整个商品服 ...
- PHPExcel方法总结
下面是总结的几个使用方法include 'PHPExcel.php';include 'PHPExcel/Writer/Excel2007.php';//或者include 'PHPExcel/Wri ...
- 002.Oracle数据库 , 列别名
/*Oracle数据库查询日期在两者之间*/ SELECT OCCUR_DATE as "我是一列" FROM LM_FAULT WHERE ( ( OCCUR_DATE > ...
- Python基础week1
本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...
- 一个基于chrome扩展的自动答题器
1.写在前面 首先感谢小茗同学的文章-[干货]Chrome插件(扩展)开发全攻略, 基于这篇入门教程和demo,我才能写出这款 基于chrome扩展的自动答题器. git地址: https://git ...
- C++编程学习(八)new&delete动态内存分配
前段时间楼主忙着期末大作业,停更了一段,今天刚好在做机器人课程的大作业时,和同组的小伙伴利用python做了工业机器人的在线编程,突然想起来很久没有阅读大型工程了,马上补上- 接下来的几篇博客主要是博 ...