JavaScript中事件

JS中的事件

一、事件分类:

  鼠标事件:鼠标单击、鼠标双击、鼠标指上等...

  HTML事件:文档加载、焦点、表单提交等...

  键盘事件:键盘按下(keydown)、键盘按下并松开瞬间(keypress)、键盘抬起(keyup)

今天主要给大家分享一下键盘事件??

1、注意事项:

  ①执行顺序:keydown->keypress->keyup
  ②当长按时,会循环执行keydown->keypress
  ③有keydown并不一定有keyup,当事件触发过程中,鼠标将光标移走,将导致没有keyup
  ④keypress只能捕获键盘上的数字、字符、符号键,不能捕获各种功能键,而keydown和keyup可以
  ⑤keypress支持区分大小写,keydown和keyup并不支持

2、确定触发的按键

  ①在触发的函数中,传入一个参数e,表示键盘事件,
  ②使用e.keyCode,取到按键的Ascii码值,进而确定触发按键
  ③所有浏览器的兼容写法(一般不需要)
    var evn = e || event
    var code = evn.keyCode || evn.ehich || evn.charCode

键盘按下代码示例:

结果:

二、DOM0事件模型

1、内联模型(行内绑定):直接将函数名作为HTML标签的某个事件属性的属性值:
  eg:<button onclick="func()">DOM内联模型</button>
优点:使用方便
缺点:违反了w3c关于HTML与JavaScript分离的基本原则
2、脚本模型(动态绑定):在JS脚本中,取到某个节点,并添加事件属性;
  eg:window.onload = function(){}
优点:实现了HTML与JavaScript的分离;
缺点:同一个节点,只能绑定一个同类型事件,如果绑定多次,最后一个生效。

三、DOM2事件模型
1、添加事件绑定方式:
  ①IE8之前:变量名.attachEvent("onclock",函数);
  ②其他浏览器:变量名.addEventListener("click",函数,ture/false);
  参数三:false(默认)表示事件冒泡 true 表示事件捕获
兼容所有浏览器写法:

  if(btn.attachEvent){
    变量名.attachEvent();
  }else{
    变量名.addEventListener();
  }

2、优点:
  ①可以给同一个节点,添加多个同类型事件;
  ②提供了可以取消事件绑定的函数。

3、取消DOM2事件绑定
注意:如果要取消DOM2的事件绑定,那么在绑定事件时,处理函数必须要使用有名函数,而不能使用匿名函数。
  变量名.removeEventListener("click",func2);
  变量名.detachEvent("onclick",func2);

JS中的事件流

事件流分为三部分。第一部分称为捕获阶段,该阶段包括从舞台到目标节点的父节点范围内的所有节点。第二部分称为目标阶段,该阶段仅包括目标节点。第三部分称为冒泡阶段。冒泡阶段包括从目标节点的父节点返回到舞台的行程中遇到的节点。

1、事件冒泡:

当某DOM元素触发一种事件时,会从当前节点开始,逐级往上触发祖先节点的同类型事件,直到DOM根节点。
什么情况下会产生事件冒泡:
  ①DOM0绑定事件,全部都是冒泡;
  ②IE8之前,使用arrachEvent()绑定的事件,全部都是冒泡;
  ③其他浏览器,使用addEvevtLinstener添加事件,当第三个参数省略或为false时,为冒泡事件。

2、事件捕获:
当某DOM元素触发一种事件时,会从文档根节点开始,逐级向下触发其祖先节点的同类型事件,直到该节点自身
什么情况下会产生事件捕获:
  使用addEvevtLinstener添加事件,当第三个参数为true时,为捕获事件。

3、阻止事件冒泡:
  在IE浏览器中,使用e.cancelBubble = true;
  在其他浏览器中,使用e.stopPropagation();
兼容所有浏览器的写法:

4、取消事件默认行为:

开发人员通常负责编写响应事件的代码。但在某些情况下,行为通常与某一事件关联,使得 Flash Player 或 AIR 会自动执行该行为,除非开发人员添加了取消该行为的代码。由于 Flash Player 或 AIR 会自动表现该行为,因此这类行为称为默认行为。例如:<a>标签的单击跳转页面事件。
  在IE浏览器中,使用e.cancelBubble = true;
  在其他浏览器中,使用e.stopPropagation();
  兼容所有浏览器的写法:

附上如何判断组合键代码:

<script type="text/javascript">
    //判断组合按键
    var isEnt = false;
    var isAlt = false;
    document.onkeydown = function(e){
        if(e.keyCode==13) isEnt = true;
        if(e.keyCode==18) isAlt = true;

        if(isEnt==true && isAlt==true){
            console.log("您按了Alt+会车键");
        }
    }
    document.onkeyup = function(e){
        if(e.keyCode==13) isEnt = false;
        if(e.keyCode==18) isAlt = false;
    }
</script>
时间: 2024-11-08 03:50:11

JavaScript中事件的相关文章

JavaScript中事件回顾

事件其实在第一次学习JavaScript的时候就接触了,一行非常简单的代码 alert('Hello JavaScript!!!')就诠释了什么是事件.事件是什么呢?事件在基于浏览器编程的语言JavaScript中是一个非常非常重要的方法,遍地都是这种语法.什么是事件呢?在JavaScript中事件可以理解为发生的一件事情,事件这个对象记录了这个过程中所有的数据. 1.事件的兼容性处理 准所周知,现在很多浏览器中分为标准浏览器阵营Chrome.FireFox等,非标准浏览器就是IE为代表了,在写

javascript中事件概述

事件就是用户或浏览器自身执行的某种动作.诸如click.load.和mouseover,都是事件的名字.而响应某个事件的函数就叫做事件处理程序(或事件侦听器).事件处理程序的名字以"on"开头,因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload. 以下是跨浏览器的javascript中事件的相关方法 1 //跨浏览器的方法 2 var EventUtil={ 3 /* 4 与addHandler()对应的方法是removeHandler(),

关于JavaScript中事件的一些重要说明

1,JavaScript异步回调 <script language="javascript"> //注册回调函数loaded到处理函数window.onload上 window.onload = loaded; //把方法window.alert地址传递给show函数 var show = window.alert; function loaded(){ show("success"); } </script> 2,事件对象 下面的js实现当

JavaScript中事件绑定的方法总结

最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 一.在DOM元素中直接绑定 也就是直接在html标签中通过 onXXX=“” 来绑定.举个例子: <input type="button" value="点我呦" onclick="alert("he

JavaScript中事件委托(事件代理)详解

在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收. 事

JavaScript中事件的绑定

JavaScript中的addEventListener()函数大多数浏览器都可以正常使用,但是却不兼容IE8及其以下的浏览器,所以我们可以自定义一个专门用于绑定事件的函数bind(),无论是什么浏览器,都可以正常使用. 在这个函数中,需要使用到IE专用的attachEvent()函数,需要传递的形参分别是:需要绑定事件的对象,绑定事件的名称,以及回调函数, function bind(obj, eventStr, callBack) { if (obj.addEventListener) {

javascript中事件timer

<!DOCTYPE html> <html> <head> <title>javascript中的事件处理</title> <meta charset="UTF-8"> <script type="text/javascript"> var timeId; function cd(){ //在3秒之后执行bigger函数setTimeOut的意思就是间隔一段时间来执行某个函数 //s

javascript 中 事件流和事件冒泡

/****************************************** 事件流 **************************************************/事件流 是描述页面接受事件的顺序,IE 使用的是时间冒泡流;而Netscape的事件采用的是事件捕获流.1.事件冒泡JS 和 HTML是通过事件的方式实现交互.事件冒泡 开始元素,将事件逐级传递,(例子:当你点击一个按钮的时候你就点击了html一直document). /***************

JavaScript中事件的target属性

target 事件属性可返回事件的目标节点(哪个 DOM 元素触发了该事件),如生成事件的元素.文档或窗口. 语法:event.target <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="jquery/jquery-3.2.1.min.js"></script> <script ty