写在前面:

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


(一)事件

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. 吴裕雄--天生自然JAVA面向对象高级编程学习笔记:宠物商店实例分析

    interface Pet{ // 定义宠物接口 public String getName() ; public String getColor() ; public int getAge() ; ...

  2. QQ企业通---DllImport

    1.DllImport 是什么? DllImport是System.Runtime.InteropServices命名空间下的一个属性类,其功能是提供从非托管DLL(托管/非托管是微软的.net fr ...

  3. LR_问题_平均响应时间解释,summary与analysis不一致----Summary Report中的时间说明

    Summary是按整个场景的时间来做平均的,最大最小值,也是从整个场景中取出来的. (1)       平均响应时间:事物全部响应时间做平均计算 (2)       90%响应时间:将事物全部响应时间 ...

  4. 《ES6标准入门》(阮一峰)--12.Symbol

    1.概述 ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突.如果有一种 ...

  5. Redis Cluster 强制kill某一个节点和shutdown某一个节点后修复过程

    redis cluster 命令行,执行以下命令需登录cluster,是集群所独有的集群(cluster)CLUSTER INFO 打印集群的信息CLUSTER NODES 列出集群当前已知的所有节点 ...

  6. Centos7关闭防火墙 设置开机启动

    [root@nmserver-7 ~]# systemctl stop firewalld.service [root@nmserver-7 ~]# systemctl status firewall ...

  7. 转载-select、poll、epoll区别总结

    I/O多路复用——epoll函数 select.poll.epoll区别总结 一.select.poll.epoll区别总结   1 本质上都是同步I/O 三者都是I/O复用,本质上都属于同步I/O. ...

  8. ahk键盘增强✨✨✨

    ahk键盘增强✨✨✨ ahk的一个键盘增强脚本,仅在winwods下可用,长期更新 仓库链接 首先感谢ahk的大神们,这个工具能极大地增加生产力 功能简介 myahk旨在增强windows下的键盘功能

  9. hibernate字段值无法保存

    通过hibernate对Blogstorage对象进行保存操作,filepath属性的值无论设置多少遍都保存不进去 后来发现是 Blogstorage.hbm.xml 里面根本没有配置filepath ...

  10. React+Flask打造前后端分离项目开发环境

    目录 前言 Backend-Flask Frontend-React Done References 前言 新的一年,开始水第一篇技术文.碰巧最近React玩得多,撸一篇文章纪念一下开发环境的搭建.