写在前面:

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


(一)事件

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. 如何给谷歌浏览器安装vue-devtools插件

    感谢原作者:https://www.cnblogs.com/alice-fee/p/8038367.html 安装方法1: 需正常打开chrome商店,搜索vuejs devtools 安装.chro ...

  2. 密码学概述&置换密码

    密码学 概述 如何将信息进行加密,传送到接收方,接收方在进行解密获取信息,中间即使有窃听者窃听到信息也可解密破解. 密码学分类 密码编辑学(保密) 密码分析学(破译) 该破译与传统的黑客技术有一定的区 ...

  3. python format使用方法

    #使用format 方法进行格式化 print("The number {1:} in hex is: {1:#x}, the number {0:} in oct is {0:o}&quo ...

  4. linux网络编程之shutdown() 与 close()函数详解

    linux网络编程之shutdown() 与 close()函数详解 参考TCPIP网络编程和UNP: shutdown函数不能关闭套接字,只能关闭输入和输出流,然后发送EOF,假设套接字为A,那么这 ...

  5. 013.Oracle数据库,SUBSTR取子字符串

    /*Oracle数据库查询日期在两者之间*/ SELECT EXPIRE_DATE , SUBSTR(EXPIRE_DATE , , ) FROM ME_EO WHERE ( ISSUE_DATE B ...

  6. pyhton中matplotlib箱线图的绘制(matplotlib双轴图、箱线图、散点图以及相关系数矩阵图))

    //2019.07.23 1.箱形图,又称为盒式图,一般可以很好地反映出数据分布的特征,也可以进行多项数据之间分布特征的比较,它主要包含五个基础数据:中位数,两个上下分位数以及上下边缘线数据 其中的一 ...

  7. POJ 2142:The Balance

    The Balance Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 4781   Accepted: 2092 Descr ...

  8. springboot启动时候的一个注意事项——不同包下有同样名字的class类

    springboot 在启动时候,常启动不起来,检查发现是不同包下面有同名的service和serviceImpl,按理说不同包下是可以有同名的类存在的,但是启动就是启动不了,报错说 org.spri ...

  9. JS - input输入框点击回车提交或者进行别的操作

    $("input").keydown(function(event){ if (event.keyCode == 13) {         /* 提交或者别的操作 */ } }) ...

  10. error LNK2019: 无法解析的外部符号……

    在VS中开发程序的时候遇到一个问题,应该算是比较常见,所以记录下. 在编译程序的时候遇到一个错误,大致提示如下: "error LNK2019: 无法解析的外部符号--" 遇到这个 ...