写在前面:

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


(一)事件

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虚拟机:对象的创建

    在虚拟机中,当遇到需要new一个对象时,虚拟机首先会去处于方法区的常量池中查找new指令的参数,即查找此类的符号引用是否已存在,并且检查此符号引用的代表类是否已经做过加载.解析和初始化,如果做过则不会 ...

  2. docker-lnmp 多容器部署 Laravel 方案分享(转)

    docker lnmp 多容器部署方案.完全基于 docker 官方镜像,遵循最佳实践,一容器一进程. github 项目地址 https://github.com/March7/docker-lnm ...

  3. aforge视频录像,对界面进行重绘

    由于项目需要,需要录像的时候在界面加多一个圆圈,并且一起录制下来. 只需要在NewFrame增加以下代码 private void videoSourcePlayer1_NewFrame(object ...

  4. 有没有比NRF51822更好的智能穿戴蓝牙方案

    现在在智能穿戴领域市场不断的追求低功耗.低成本的蓝牙芯片.蓝牙芯片目前除了Dialog公司研制蓝牙芯片是最求超低功耗的但是对于其它性能上还比较满足不了其它领域的功能,另外NORDIC.TI的蓝牙芯片虽 ...

  5. obtainFreshBeanFactory方法源码跟踪

    看这篇文章之前可以先了解之前的跟踪流程,https://www.jianshu.com/p/4934233f0ead 代码过宽,可以shift + 鼠标滚轮 左右滑动查看 AbstractApplic ...

  6. solus linux 更新源

    添加源(清华大学开源软件镜像)sudo eopkg ar Solus https://mirrors.tuna.tsinghua.edu.cn/solus/shannon/eopkg-index.xm ...

  7. Golang的环境安装

    Golang的环境安装 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Go语言环境安装 1>.下载Golang的安装包 博主推荐阅读: https://studygola ...

  8. CAN编写完分帧发送, 分帧接收,J1939位域型结构体心得

    关于由多个不同的C文件构成的工程,我采用以下方法 以为400Hz数字电源程序为例 假设工程由以下文件组成 DC_Comm.c 主要完成串口通讯部分 DC_Config.c 主要完成时钟,外设 中断初始 ...

  9. shell中取字符串子串的几种方式 截取substr

    shell中取字符串子串的几种方式 echo "123456789" | awk '{print substr($0,5,2)}' 截取 1)awk中函数substrsubstr( ...

  10. JS的数据类型、常量、变量、以及基本对象的知识总结

    第一部分.JS的常见数据类型,特别要注意的是JS中大小写要求很严格,一定要注意字段大小写. 1.字符串(String) 举例: var cellname = "Bill Gate" ...