事件处理程序 HTML事件处理程序 案例1 function checkUsernameO <div id=page"> IMsg <hI>List King</h1> document. getElementByld(feedback) <h2>New Account</h2> 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 <label for=username">Create a username: </label> eMsg textContent= Username must be 5 Input type= text id=username characters or more"; / Set msg onblur="checkUsername o"/> else t <div id=feedback></div> eMsg textcontent= <label for=password">Create a password: </label> Input type="password" id="password"/> <input type="submit" value="sign up!/> K /form
事件处理程序 HTML事件处理程序 案例1： <div id="page"> <h1>List King</h1> <h2>New Account</h2> < f o r m m e t h o d = " p o s t " action="http://www.example.org/register"> <label for="username">Create a username: </label> <input type="text" id="username" onblur="checkUsername()" /> <div id="feedback"></div> <label for="password">Create a password: </label> <input type="password" id="password" /> <input type="submit" value="sign up!" /> </form> 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: <script> function checkUsernameo( <fo rm me d p st action=http://www.example.org/register var elMsg document getElementByld(feedback,) if (this value length 5)( Label for="username">Create a elMsg textContent ' Username must be 5 username:</labe1> characters or more: 1 Input type="text id="username"/> else <div id="feedback">/div> eMsg textcontent= Label for= password">Create a password: </labeI> <input ty p password var elUsername document getElementByld id="password"/> Username) Input type="submit value="sig Username onblur= checkUsername /When it loses focus call checkuserNameO </script> K/form>
事件处理程序 DOM事件处理程序 案例2： < f o r m m e t h o d = " p o s t " action="http://www.example.org/register"> <label for="u sername">Creat e a username: </label> <input type="text" id="username" /> <div id="feedback"></div> <label for="p assword">Creat e a password: </label> < i n p u t t y p e = " p a s s w o r d " id="password" /> <input type="submit" value="sign up" /> </form> <script> function checkUsername() { var elMsg = document.getElementById('feedback'); if (this.value.length < 5) { elMsg.textContent = 'Username must be 5 characters or more'; } else { elMsg.textContent = ''; } } var elUsername = document.getElementById ('username'); elUsername.onblur = checkUsername; // When it loses focus call checkuserName() </script>
事件处理程序 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( <fo rm me d p st action=http://www.example.org/register var elMsg document getElementByld(feedback,) if (this value length 5)( Label for="username">Create a elMsg. text Content="Username must be 5 username:</labe1> characters or more Input type=text" id="username"/> ]else <div id="feedback">/div> eMsg textcontent= Label for= password">Create a password: </labeI> <input ty p password var elUsername document getElementByld id="password"/> Username) Input type="submit" value="sign uSername addEventlistener Blur, checkUsername, false K/form> script
事件处理程序 DOM事件处理程序 案例3： < f o r m m e t h o d = " p o s t " action="http://www.example.org/register"> <label for="u sername">Creat e a username: </label> <input type="text" id="username" /> <div id="feedback"></div> <label for="p assword">Creat e a password: </label> < i n p u t t y p e = " p a s s w o r d " id="password" /> <input type="submit" value="sign up" /> </form> <script> function checkUsername() { var elMsg = document.getElementById('feedback'); if (this.value.length < 5) { elMsg.textContent = 'Username must be 5 characters or more'; } else { elMsg.textContent = ''; } } var elUsername = document.getElementById ('username'); elUsername.addEventListener ('blur', checkUsername, false); </script>