河南中医药大学：《Web前端开发》课程理论教学课件（2017）07.事件

事件 管理科学与工程学科 耿方方

事件 管理科学与工程学科 耿方方

主要内容 事件处理程序 事件流 事件对象 事件类型

主要内容  事件处理程序  事件流  事件对象  事件类型

JavaScript与HTM之间的交互是通过事件实现的。事件,就是文档 或浏览器窗□发生的一些特定的交互瞬间。也就是鼠标或热键的动作。 可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相 应的代码

 JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档 或浏览器窗口发生的一些特定的交互瞬间。也就是鼠标或热键的动作。 可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相 应的代码

事件处理程序 事件如何触发 JavaScript代码 当用户在Web页面上同HT进行交互时,事件触发 JavaScript代码 的过程分为三个步骤,这些步骤被称为“事件处理” 、选中需要使用脚本进行事件响应的元素节点。 2、声明需要在选中节点上响应触发的事件。 3、指定当事件发生时需要运行的代码

事件处理程序 事件如何触发JavaScript代码  当用户在Web页面上同HTML进行交互时，事件触发JavaScript代码 的过程分为三个步骤，这些步骤被称为“事件处理” 。 1、选中需要使用脚本进行事件响应的元素节点。 2、声明需要在选中节点上响应触发的事件。 3、指定当事件发生时需要运行的代码

事件处理程序 HTML事件处理程序 事件就是用户或浏览器自身执行的某种动作。诸如 click、1oad和 mouseover,都是事件的名字。而响应某个事件的函数叫做事件处理程 序(或事件侦听器)事件处理程序的名字以“on”开头,因此 click事 件的事件处理程序就是 onclick,load事件的事件处理程序就是 onload。 为事件指定处理程序的方式有好几种 HTM事件处理程序 早期版本的理M中会包含一组属性用来响应它所属元素的事件。这些 属性的名字和事件的名字相匹配,它们的值则是当事件发生时需要运 行的函数的名称 例如:表示当用户点击这个元素后,hide )方法会被调用。 这种事件处理的方法用的很少,由于要实现 Javascript和HTM的分离

事件处理程序 HTML事件处理程序  事件就是用户或浏览器自身执行的某种动作。诸如click、load和 mouseover，都是事件的名字。而响应某个事件的函数叫做事件处理程 序（或事件侦听器）事件处理程序的名字以“on”开头，因此click事 件的事件处理程序就是onclick,load事件的事件处理程序就是onload。 为事件指定处理程序的方式有好几种：  HTML事件处理程序：  早期版本的HTML中会包含一组属性用来响应它所属元素的事件。这些 属性的名字和事件的名字相匹配，它们的值则是当事件发生时需要运 行的函数的名称。  例如：表示当用户点击这个元素后，hide （）方法会被调用。  这种事件处理的方法用的很少，由于要实现JavaScript和HTML的分离

事件处理程序 HTML事件处理程序 案例1 function checkUsernameO IMsg List King document. getElementByld(feedback) New Account var username for m m e t o d =p o s t document. getElementByld('username) action=http://www.example.org/register> if(elUsername value length 5)i Create a username: eMsg textContent= Username must be 5 Input type= text id=username characters or more"; / Set msg onblur="checkUsername o"/> else t eMsg textcontent= Create a password: Input type="password" id="password"/> K /form

事件处理程序 HTML事件处理程序  案例1：   List King  New Account   Create a username:    Create a password:    function checkUsername() { var elMsg = document.getElementById('feedback'); var elUsername = document.getElementById('username'); if (elUsername.value.length < 5) { elMsg.textContent = 'Username must be 5 characters or more'; // Set msg } else { elMsg.textContent = ''; }

事件处理程序 DOM事件处理程序 传统的DOM事件处理程序 所有现代浏览器都支持这种创建事件处理程序的方法,不过每个事 件处理程序只能附加一个函数。语法 element. onevent=functionName element:元素,目标DOM节点。 nonevent:事件,绑定到该节点的事件,使用前缀on function Name:需要调用的函数的名称(后面不带小括号)

事件处理程序 DOM事件处理程序  传统的DOM事件处理程序 所有现代浏览器都支持这种创建事件处理程序的方法,不过每个事 件处理程序只能附加一个函数。语法： element.onevent=functionName; element:元素，目标DOM节点。 onevent：事件，绑定到该节点的事件，使用前缀on。 functionName:需要调用的函数的名称（后面不带小括号）

事件处理程序 DOM事件处理程序 案例2: function checkUsernameo( Create a elMsg textContent ' Username must be 5 username: characters or more: 1 Input type="text id="username"/> else /div> eMsg textcontent= Label for= password">Create a password: Username) Input type="submit value="sig Username onblur= checkUsername /When it loses focus call checkuserNameO K/form>

事件处理程序 DOM事件处理程序  案例2：   Creat e a username:    Creat e a password:    function checkUsername() { var elMsg = document.getElementById('feedback'); if (this.value.length

事件处理程序 DOM事件处理程序 DOM事件处理程序 近几年又新增了一种事件处理程序,就是事件监听器,它可以同时 触发多个函数,但是在旧的浏览器中不被支持。 语法: element. addEventListerner( event', functionName[, Boolean]) element:目标DOM元素节点。 event:在引号中指定需要绑定到节点的事件。 functionName:需要调用的函数的名称。 事件流:指定是否为捕获方式的事件响应,通常被设置为 false

事件处理程序 DOM事件处理程序  DOM事件处理程序 近几年又新增了一种事件处理程序，就是事件监听器,它可以同时 触发多个函数,但是在旧的浏览器中不被支持。 语法： element.addEventListerner('event',functionName[,Boolean]); element：目标DOM元素节点。 event：在引号中指定需要绑定到节点的事件。 functionName:需要调用的函数的名称。 事件流：指定是否为捕获方式的事件响应，通常被设置为false

事件处理程序 DOM事件处理程序 案例3: script> function checkUsername0( Create a elMsg. text Content="Username must be 5 username: characters or more Input type=text" id="username"/> ]else /div> eMsg textcontent= Label for= password">Create a password: Username) Input type="submit" value="sign uSername addEventlistener Blur, checkUsername, false K/form> script

事件处理程序 DOM事件处理程序  案例3：   Creat e a username:    Creat e a password:    function checkUsername() { var elMsg = document.getElementById('feedback'); if (this.value.length