事件处理程序 DOM事件处理程序 DOM事件处理程序和事件监听器中使用参数 由于在注册事件处理程序和事件监听器时,在函数名称的后面是没 有小括号的,因此需要采用其他的手段来传递参数。 语法: element. addEventListerner( event', functionoifunctionName( 数);}[, Boolean]);
事件处理程序 DOM事件处理程序 DOM事件处理程序和事件监听器中使用参数 由于在注册事件处理程序和事件监听器时，在函数名称的后面是没 有小括号的，因此需要采用其他的手段来传递参数。 语法： element.addEventListerner('event',function(){functionName( 参 数)；}[,Boolean]);
事件处理程序 DOM事件处理程序 n案例4:<cipt var elUsername document getElementByld('username): // Username input var elMsg = document. getElementByld(feedback); / Error msg element function checkUsername(minLength)t ∥/ Declare function if (elUsername value length minLength) ∥/ f username too short ∥ Set the error message elMsg. innerHTML= Username must be minLength+ characters or more y else t ∥ Otherwise elMsg. innerHTML= ∥ Clear msg elUsername. addEventListener('blur, function([ /When it loses focus checkUsername(5) ∥ Pass argument here 1, false) </script>
事件处理程序 DOM事件处理程序 案例4： <script> var elUsername = document.getElementById('username'); // Username input var elMsg = document.getElementById('feedback'); // Error msg element function checkUsername(minLength) { // Declare function if (elUsername.value.length < minLength) { // If username too short // Set the error message elMsg.innerHTML = 'Username must be ' + minLength + ' characters or more'; } else { // Otherwise elMsg.innerHTML = ''; // Clear msg } } elUsername.addEventListener('blur', function() { // When it loses focus checkUsername(5); // Pass argument here }, false); </script>
事件流 事件流:由于DOM结构是一个树型结构,HTM元素都位于另一些元素中。 如果移动标到一个链接上,或者点击一个链接,同样会把鼠标移动 到它的父元素上,或者点击它的父元素。因此事件流描述的是从页面 中接收事件的顺序,事件流包括事件冒泡和事件捕获。 冒泡事件:事件的传播是从最特定的事件目标到最不特定的事件目标。 即从DOM树的叶子到根。 捕获事件:事件的传播是从最不特定的事件目标到最特定的事件目标。 即从DOM树的根到叶子
事件流 事件流：由于DOM结构是一个树型结构，HTML元素都位于另一些元素中。 如果移动鼠标到一个链接上，或者点击一个链接，同样会把鼠标移动 到它的父元素上，或者点击它的父元素。因此事件流描述的是从页面 中接收事件的顺序，事件流包括事件冒泡和事件捕获。 冒泡事件：事件的传播是从最特定的事件目标到最不特定的事件目标。 即从DOM树的叶子到根。 捕获事件：事件的传播是从最不特定的事件目标到最特定的事件目标。 即从DOM树的根到叶子
事件流 冒泡事件:以下面的网页为例 Document <html> Element html Head> ■< title>冒泡事件</tit1e Klement body </head> Element div <body> 冒泡型事件传播 < div id=“ myDiv”> Click me/div K/body> <html> 1、所有现代浏览器都支持事件冒泡,但在具体实现中略有差别 E55及更早版本中事件冒泡会跳过<hm>元素(从boy直接跳到 document)。 lE9、 Firefox、 Chrome、和 Safari则将事件一直冒泡到 window象
事件流 冒泡事件：以下面的网页为例： <html> <head> <title>冒泡事件</title> </head> <body> <div id=“myDiv”>Click me</div> </body> <html> 1、所有现代浏览器都支持事件冒泡，但在具体实现中略有差别： IE5.5及更早版本中事件冒泡会跳过<html>元素(从body直接跳到document)。 IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象
事件流 捕获事件 Document Element html Element body (3 卫1 ement div 捕获型事件传播 2、l9、 Firefox、 Chrome、 opera、和 Safari都支持事件捕获 尽管DOM标准要求事件应该从 documen对象开始传播,但这些浏览器都是从 window对象开始捕获事件的。 3、由于老版本浏览器不支持,很少有人使用事件捕获。建议使用事件冒泡
事件流 捕获事件： 2、IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。 尽管DOM标准要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。 3、由于老版本浏览器不支持，很少有人使用事件捕获。建议使用事件冒泡