note_简单的数据绑定

最新推荐文章于 2023-03-16 17:36:50 发布

weixin_34088598

最新推荐文章于 2023-03-16 17:36:50 发布

阅读量78

点赞数

原文链接：http://www.cnblogs.com/lsy-19961122/p/10384608.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     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 属性值

转载于:https://www.cnblogs.com/lsy-19961122/p/10384608.html

weixin_34088598

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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="t...
复制链接

扫一扫