写在前面:

一句话作为本文的核心思想:对象监视事件,事件触发函数;


(一)事件

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事件-对象监视事件,事件触发函数的更多相关文章

  1. 事件对象(示例、封装函数EventUtil())

    事件对象 什么是事件对象? 在触发DOM上的事件时都会产生一个对象. 事件对象event 1.DOM中的事件对象 (1)\type属性用于获取事件类型 (2)\target属性用于获取事件目标 (3) ...

  2. 简单总结焦点事件、Event事件对象、冒泡事件

    每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...

  3. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  4. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  5. 从零开始的全栈工程师——js篇2.21(事件对象 arguments 阻止事件默认行为兼容 事件委托 事件源对象)

    一.事件对象 1.常用的事件2.每个元素身上的事件都是天生存在的 不需要我们去定义 只需要我们给这个事件绑定一个方法 当事件触发的时候就会执行这个方法 3.事件绑定的写法 ①div.onclick=f ...

  6. react事件中的事件对象和常见事件

    不管是在原生的js还是vue中,所有的事件都有其事件对象,该事件对象event中包含着所有与事件相关的信息,在react中,所有的事件也有其事件对象,在触发DOM上的某个事件时,就会产生一个事件对象. ...

  7. DOM中的事件对象和IE事件对象

    DOM中的事件对象 IE事件对象 属性/方法 类型 读/写 说明 属性/方法 类型 读/写 说明  bubles Boolean 只读  表明事件是否冒泡  cancleBubble Boolean ...

  8. JavaScript的事件对象_键盘事件

    用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...

  9. DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

    事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...

随机推荐

  1. P1063 计算谱半径

    P1063 计算谱半径 转跳点:

  2. 二次urldecode注入

    原理大多数web程序都会对输入字符进行转换,例如addslashes(),mysql_real_escape_string(),mysql_escape_string(),也就是对单引号',双引号&q ...

  3. linux桌面系统 镜像下载

    1.Ubuntu 官方下载地址(不推荐,网速较慢):https://www.ubuntu.com/download 阿里云:http://mirrors.aliyun.com/ubuntu-relea ...

  4. 一道算法题加深我对C++中map函数的理解

    一.一道题目引发我对map函数的考量 首先是题目大意:有n个银行,a[i]表示这个人在第i个银行有a[i]块钱(可以是负数),所有银行的钱加起来正好是0.每次只能在相邻的银行之间转账,问最少要转多少次 ...

  5. GNS3 模拟icmp目标不可达

    目标不可达: R1 : conf t int f0/0 no shutdown ip add 192.168.1.1 255.255.255.0 end R2 f0/0: conf t int f0/ ...

  6. 工具类css框架

    @charset "UTF-8"; * {     -webkit-box-sizing: border-box;     box-sizing: border-box;      ...

  7. 用 Python 分析网易严选 Bra 销售信息,告诉你她们真实的 Size

    今天通过爬虫数据进行分析,一起来看看网易严选商品评论的获取和分析. 声明:这是一篇超级严肃的技术文章,请本着学习交流的态度阅读,谢谢! !   ​ 网易商品评论爬取 分析网页 评论分析 进入到网易严选 ...

  8. 152-PHP htmlspecialchars函数

    <?php //定义一个HTML代码字符串 $str=<<<HTM <a href=#><b><i>到一个网址的链接<>< ...

  9. C# SqlBulkCopy 避免插入重复数据(不重复即插入)

    之前写过一篇 C# SqlBulkCopy 大量数据导入到数据库 的文章介绍了大量数据导入到数据库的高效方法. 这篇文章与之有些关联,在这之前所想的是做全量插入,每次run这个job就会清空然后插入, ...

  10. MSP430系列单片机笔记00

    嵌入式系统 嵌入式系统(Embedded system),是一种“完全嵌入受控器件内部,为特定应用而设计的专用计算机系统”,根据英国电气工程师协会( U.K. Institution of Elect ...