事件 管理科学与工程学科 耿方方
事件 管理科学与工程学科 耿方方
主要内容 事件处理程序 事件流 事件对象 事件类型
主要内容 事件处理程序 事件流 事件对象 事件类型
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