JS中的事件

1、鼠标事件

onclick   ondbclick   onmouseover   onmouseout

2、HTML事件

onload   onunload   onsubmit   onresize  onfocus  onchange   onscroll

3、键盘事件

  1. onkeydown:键盘按下时触发
  2. onkeypress:键盘按下并抬起的瞬间触发
  3. onkeyup:键盘抬起时触发

【注意事项】

  • ① 执行顺序:keydown--keypress--keyup
  • ② keypress只能捕获数字、字母、符号键,不能捕获功能键;
  • ③ 长按时循环执行:keydown--keypress
  • ④ 有keydown,不一定有keyup,当长按时焦点失去时,不再触发keyup.
  • ⑤ keypress区分字母大小写,keydown/keyup不区分大小写

4、事件因子

当触发一个事件时,该事件将向事件所调用的函数中,默认传入一个参数,这个参数就是事件因子,包含了事件的各种详细信息。

 document.onkeydown=function(e){
   console.log(e);
 }

5、如何确定键盘按键

  • ① 在触发函数中,接收事件因子e
e = e || window.event;
  • ② 可以使用 e.key直接取到按下的按键字符(不推荐)
  • ③ 可以使用keyCode/which/charCode取到按键的ASCII码值:
 var code=e.keyCode || e.which || e.charCode;
  //(兼容各种浏览器的写法)
 document.onkeydown=function(e){
    e = e || window.event;
    var code=e.keyCode || e.which || e.charCode;
    console.log(e);
 }

DOM0事件模型

1.内联模型绑定 (行内绑定)

将函数名直接作为HTML标签中事件属性的属性值

 <button onclick="func()">内联模型绑定</button> 

缺点:不符合w3c中关于内容与行为分离的基本规范

2.脚本模型(动态绑定)

通过在js中选中某个节点,然后给节点添加onclick属性

document.getElementById("btn1").onclick=function(){} 

优点:符合w3c中内容与行为分离的基本规范,实现html与js的分离

        缺点:同一个节点,只能添加一次同类型事件。如果添加多次,最后一个生效。

3.DOM0共有的缺点:

      通过DOM0绑定的事件,一旦绑定,无法取消

DOM2事件模型

1.添加DOM2事件绑定

① IE8之前,使用.attachEvent("onclick",函数);

         ② IE8之后,使用.addEventListener("click",函数,true/false);

              参数三:false(默认)表示事件冒泡,传入true表示事件捕获

         ③ 兼容所有浏览器的处理方式

 var btn = document.getElementById("btn2");
 if(btn.attachEvent) {
       btn.attachEvent("onclick", func1);
     } else {
       btn.addEventListener("click", func1);
 }

2.DOM2的优点:

① 同一个节点,可以使用DOM2绑定多个同类型事件
         ② 使用DOM2绑定的事件,有专门的函数取消

3.DOM2取消事件绑定:

① 使用attachEvent绑定,用detachEvent("onclick",func1);取消

         ② 使用addEventListenner绑定,用removeEventListener("click",func1);取消

 document.getElementById("btn3").onclick=function() {
 if(btn.detachEvent) {
        btn.detachEvent("onclick", func1);
     } else {
        btn.removeEventListener("click", func1);
     }
     alert("取消事件绑定");
 }
 

注意: 如果是DOM2绑定的事件需要取消,则绑定事 时,回掉函数必须是函数名,而不能是匿名函数,因为取消事件时,,取消传入函数名进行绑定

js中的事件流模型

1.事件冒泡:

       当触发一个节点的事件时,会从当前节点开始,依次触发其祖先节点的同类型事件,
直到DOM根节点 。

2.事件捕获
       当触发一个节点的事件时,会从DOM根节点开始,依次触发其祖先节点的同类型事件,
知道当前节点自身 。

3.什么时候事件冒泡?事件捕获?

        ①当使用addEventListener绑定事件,第三个参数设为true时表示事件捕获

        ②除此之外的所有事件均为事件冒泡

4.阻止事件冒泡
        ①IE10之前,使用e.cancelBubble = true;

        ②IE10之后,使用 e.stopPropagation();
 function myParagraphEventHandler(e) {
     e = e || window.event;
     if (e.stopPropagation) {
          e.stopPropagation(); //IE10之后
     } else {
          e.cancelBubble = true; //IE10之前
     }
 }

5.阻止默认事件
         ①IE10之前:e.returnValue = false;
         ②IE10之后:e.stopPropagation();

 function eventHandler(e) {
   e = e || window.event;
   // 防止默认行为
   if (e.preventDefault) {
        e.preventDefault(); //IE10之外
    }else {
       e.returnValue = false; //IE10之前
    }
 }
 

JavaScript中的事件模型的更多相关文章

  1. 说说JavaScript中的事件模型

    1.javascript中为元素添加事件处理程序的方法有以下几种方式,可以为javascript元素添加事件处理程序 (1) 直接将事件处理代码写在html中(2) 定义一个函数,赋值给html元素的 ...

  2. 理解javascript中的事件模型

    javascript中有两种事件模型:DOM0,DOM2.而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些. 一.  DOM0级事件模型 DOM0级事件模型是早期的事件 ...

  3. 深入理解javascript中的事件循环event-loop

    前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...

  4. javascript 中的事件机制

    1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...

  5. JavaScript中的事件对象

    JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...

  6. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

  7. 了解javascript中的事件(二)

    本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...

  8. javascript中onclick事件能调用多个方法吗

    Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了

  9. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

随机推荐

  1. python3全栈开发-面向对象的三大特性(继承,多态,封装)之继承

    一 .初识继承 1.什么是继承 继承是一种创建新类的方式,新建的类可以继承一个或多个父类(python支持多继承),父类又可称为基类或超类,新建的类称为派生类或子类. 特点: 子类会“”遗传”父类的属 ...

  2. POJ-3723 Conscription---最大权森林---最小生成树

    题目链接: https://vjudge.net/problem/POJ-3723 题目大意: 需要征募女兵N人, 男兵M人. 每征募一个人需要花费10000美元. 带式如果已经征募的人中有一些关系亲 ...

  3. ZOJ-1586 QS Network---最小生成树Prim

    题目链接: https://vjudge.net/problem/ZOJ-1586 题目大意: 首先给一个t,代表t个测试样例,再给一个n,表示有n个QS装置,接下来一行是n个QS装置的成本.接下来是 ...

  4. python模块之PIL模块

    PIL简介 什么是PIL PIL:是Python Image Library的缩写,图像处理的模块.主要的类包括Image,ImageFont,ImageDraw,ImageFilter PIL的导入 ...

  5. js中的栈与堆的讲解/基本数据类型与引用类型的讲解

    1.栈(stack)和堆(heap) stack为自动分配的内存空间,它由系统自动释放:而heap则是动态分配的内存,大小不定也不会自动释放. 2.基本类型和引用类型 基本类型:存放在栈内存中的简单数 ...

  6. Delphi X10.2 + FireDAC 使用 SQL 语句 UPDATE

    MainForm.Conn.StartTransaction; UserManagerQuery.SQL.Clear; UserManagerQuery.SQL.Text := 'UPDATE tab ...

  7. java同时连接db2和mysql的程序

    db2的jar包安装参见:http://www.cnblogs.com/zifeiy/p/7918554.html 代码: package com.anbank.datafetch; import j ...

  8. iOS 私有API调用

    最近自己在做一个小程序,想实现一个一键设置手机壁纸的功能.但在iOS公开的API里找不到相关的方法,只能从私有API入手. 网上有不少教程,不过都不是很详细.从google和https://stack ...

  9. pyquery 的用法 --爬虫解析库

    如果你对Web有所涉及,如果你比较喜欢用CSS选择器,如果你对jQuery有所了解,那么这里有一个更适合你的解析库--pyquery. 接下来,我们就来感受一下pyquery的强大之处. 1. 准备工 ...

  10. echarts.js--前端可视化数据图形

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上, 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等 ...