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

必须。字符串，指定事件名。

注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 

提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册
function 必须。指定要事件触发时执行的函数。 

当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

可能值:
  • true - 事件句柄在捕获阶段执行
  • false- false- 默认。事件句柄在冒泡阶段执行

实例

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 属性值
posted @ 2019-02-15 17:04  小荔枝  阅读(112)  评论(0)  编辑  收藏  举报