note_简单的数据绑定
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="text" id="userName"/> 9 <br/> 10 <span id="uName"></span> 11 <script> 12 document.getElementById("userName").addEventListener("keyup", function () { 13 document.getElementById("uName").innerText = event.target.value; 14 // event.target.value→→→→→→→→→→document.getElementById("userName").value 15 // document.getElementById("uName").innerText = document.getElementById("userName").value 16 // console.log(document.getElementById("userName").value); 17 }) 18 19 </script> 20 </body> 21 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="text" id="userName"/> 9 <br/> 10 <span id="uName"></span> 11 <script> 12 var obj={ 13 _username : "", 14 pwd : "1231" 15 } 16 Object.defineProperty(obj,'userName',{ 17 //访问器属性特征Configurable enumberable Get Set 18 //使用访问器属性的常用用途:设置一个属性的值会导致其他属性发生变化 19 get : function () { 20 console.log("get init") 21 return this._username; 22 }, 23 set : function (val) { 24 console.log("set init"); 25 document.getElementById("uName").innerText = val; 26 this._username = val; 27 } 28 }) 29 //给访问器属性userName重新赋值触发set函数 30 document.getElementById("userName").addEventListener("keyup", function () { 31 obj.userName = event.target.value; 32 }) 33 34 </script> 35 </body> 36 </html>
HTML DOM addEventListener() 方法
语法
element.addEventListener(event, function, useCapture)
参数值
参数 | 描述 |
---|---|
event |
必须。字符串,指定事件名。 |
function | 必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "click" 事件属于 MouseEvent(鼠标事件) 对象。 |
useCapture | 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。 可能值:
|
实例
1 document.getElementById("myBtn").addEventListener("click", myFunction); 2 3 function myFunction() { 4 document.getElementById("demo").innerHTML = "Hello World"; 5 }
HTML DOM Event 对象
Event 对象
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用,函数不会在事件发生前被执行!
标准 Event 属性
下面列出了 2 级 DOM 事件标准定义的属性。
属性 | 描述 |
---|---|
bubbles | 返回布尔值,指示事件是否是起泡事件类型。 |
cancelable | 返回布尔值,指示事件是否可拥可取消的默认动作。 |
currentTarget | 返回其事件监听器触发该事件的元素。 |
eventPhase | 返回事件传播的当前阶段。 |
target | 返回触发此事件的元素(事件的目标节点)。 |
timeStamp | 返回事件生成的日期和时间。 |
type | 返回当前 Event 对象表示的事件的名称。 |
HTML DOM Input Text 对象
Input Text 对象属性
属性 | 描述 |
---|---|
autocomplete | 设置或返回文本域的 autocomplete 属性值 |
autofocus | 在页面加载后设置或返回文本域是否自动获取焦点 |
defaultValue | 设置或返回文本域的默认值 |
disabled | 设置或返回文本域是否禁用 |
form | 返回一个对包含文本域的表单对象的引用 |
list | 返回一个对包含文本域的选项列表对象的引用 |
maxLength | 设置或返回文本域中的最大字符数 |
name | 设置或返回文本域的名称 |
pattern | 设置或返回文本域的 pattern 属性值 |
placeholder | 设置或返回文本域的 placeholder 属性值 |
readOnly | 设置或返回文本域是否应是只读的 |
required | 设置或返回 whether the text field must be filled out before submitting a form |
size | 设置或返回文本域的 size 属性值 |
type | 返回文本域的表单元素类型 |
value | 设置或返回文本域的 value 属性值 |