写在前面:

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


(一)事件

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. SciPy 教程

    章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...

  2. Vue中 v-for 绑定key和不绑定key的区别

    首先,它们区别主要在于 虚拟DOM的复用,绑定key可以更好的复用,下面来详细讲一下 假如我们有一个数组 arr = [1,2,3,4],我们要在2后面插入一个值9: 如果绑定了key值,那么会是这样 ...

  3. 解决Google浏览器不能打开kubernetes dashboard方法【转】

    在这片文章中,我将展示如何在Google Chrome上打开kubernetes dashboard.本文不叙述如何安装搭建docker和kubernetes,有关详情请上网查阅! 很多小伙伴们在自己 ...

  4. Day5-T4

    原题目 Describe:最小生成树加权 code: #include<bits/stdc++.h> #define INF 214748364 #define eps 1e-9 #def ...

  5. 基于LAMP实现后台活动发布和前端扫码签到系统

    目的 无论是公司.学校和社会团体,都会举办各式各样的活动,比如运动会.部门会议.项目会议.野炊.团建等.作为团队管理者来讲,当然希望能够把这类活动转移到线上形成完整的系统,类似于电子流的形式.本文以学 ...

  6. 我的第一个爬虫【python selenium】

    去年写的一个小功能,一年过得好快,好快! 目的:爬取京东商品详情页面的内容(商品名称.价格.评价数量)后存储到xls文档中,方便商家分析自己商品的动态. 软件:chrome(windows).chro ...

  7. centos7 程序快捷方式

    /usr/share/Applications 在此文件夹中,全是".desktop"的文件,利用终端打开一个看看就知道了!

  8. maven知识结构笔记

    1.什么是maven Maven 翻译为"专家"."内行",是 Apache 下的一个纯 Java 开发的开源项目.基于项目对象模型(缩写:POM)概念,Mav ...

  9. 7.10 Varnish 优化

  10. DateTimePicker控件在WinXP下的BUG

    如图,通过图示的按钮改变datetimepicker的值 ,弹出MessageBox, datetimePicker重新获得焦点后,自动重复点击按钮. 解决办法: new Thread(() => ...