JSのカスタムオブジェクト
Object 形式のカスタム オブジェクト
オブジェクト定義:
var 変数名 = new Object(); // オブジェクトインスタンス（空のオブジェクト）
変数名.属性名 = 値; // 属性を定義する
変数名.関数名 = function(){} // 関数を定義
オブジェクトアクセス:
変数名.プロパティ/関数名();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 对象的定义：
// var 变量名 = new Object(); // 对象实例（空对象）
// 变量名.属性名 = 值; // 定义一个属性
// 变量名.函数名 = function(){} // 定义一个函数
var obj = new Object();
obj.name = "华仔";
obj.age = 18;
obj.fun = function () {
alert("姓名：" + this.name + " , 年龄：" + this.age);
}
// 对象的访问：
// 变量名.属性 / 函数名();
// alert( obj.age );
obj.fun();
</script>
</head>
<body>
</body>
</html>
{} 中括弧内のカスタム オブジェクト
オブジェクト定義:
var 変数名 = { // 空のオブジェクト
属性名: value, // 属性を定義します
属性名: value, // 属性を定義します
関数名: function(){} // 関数を定義
};
オブジェクトアクセス:
変数名.プロパティ/関数名();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 对象的定义：
// var 变量名 = { // 空对象
// 属性名：值, // 定义一个属性
// 属性名：值, // 定义一个属性
// 函数名：function(){} // 定义一个函数
// };
var obj = {
name:"国哥",
age:18,
fun : function () {
alert("姓名：" + this.name + " , 年龄：" + this.age);
}
};
// 对象的访问：
// 变量名.属性 / 函数名();
alert(obj.name);
obj.fun();
</script>
</head>
<body>
</body>
</html>
jsのイベント
イベントとは何ですか? イベントは、ページと対話するコンピューター入力デバイスに対する応答です。私たちはそれらをイベントと呼びます。
よく使用されるイベント:
- onload 読み込み完了イベント: ページが読み込まれた後、ページの JS コードを初期化するためによく使用されます。
- onclick クリック イベント: ボタンのクリック応答操作によく使用されます。
- onblur フォーカス喪失イベント: 入力ボックスがフォーカスを失った後に、入力コンテンツが正当であるかどうかを検証するために一般的に使用されます。
- onchange コンテンツ変更イベント: ドロップダウン リストや入力ボックスのコンテンツが変更された後の動作によく使用されます。
- onsubmit フォーム送信イベント: フォームが送信される前に、すべてのフォーム項目が正当であるかどうかを確認するためによく使用されます。
イベント登録は、静的登録と動的登録に分かれています。
イベント登録（バインド）とは何ですか？
実際には、イベントに応答した後にどのオペレーション コードを実行するかをブラウザーに指示するもので、これをイベント登録またはイベント バインディングと呼びます。
静的登録イベント:
htmlタグのevent属性をイベントレスポンス後のコードに直接代入する方法を静的登録といいます。
動的登録イベント:
は、まず js コードを通じてラベルの dom オブジェクトを取得し、次に渡すことを意味します
dom object.event name = function(){} この形式は、動的登録と呼ばれる、イベント応答後のコードに割り当てられます。
動的登録の基本手順:
1. ラベルオブジェクトを取得する
2. ラベルオブジェクト.イベント名 = fucntion(){}
onload ロードが完了しました
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// onload 事件的方法
function onloadFun() {
alert('静态注册 onload 事件，所有代码');
}
// onload 事件动态注册。是固定写法
window.onload = function () {
alert("动态注册的 onload 事件");
}
</script>
</head>
<!--静态注册 onload 事件
onload 事件是浏览器解析完页面之后就会自动触发的事件
<body οnlοad="onloadFun();">-->
<body>
</body>
</html>
onclick クリックイベント
ラベルオブジェクトを取得する
- documentはJavaScript言語で提供されるオブジェクト(ドキュメント)です
get get
Element要素(つまりラベル)
をバイパスします。。による。。終えた。。。
Id id 属性
getElementById id 属性を通じてタグ オブジェクトを取得します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
alert("静态注册 onclick 事件");
}
// 动态注册 onclick 事件
window.onload = function () {
// 1 获取标签对象
/*
* document 是 JavaScript 语言提供的一个对象（文档）<br/>
* get 获取
* Element 元素（就是标签）
* By 通过。。 由。。经。。。
* Id id 属性
*
* getElementById 通过 id 属性获取标签对象
**/
var btnObj = document.getElementById("btn01");
// alert( btnObj );
// 2 通过标签对象.事件名 = function(){}
btnObj.onclick = function () {
alert("动态注册的 onclick 事件");
}
}
</script>
</head>
<body>
<!--静态注册 onClick 事件-->
<button onclick="onclickFun();">按钮 1</button>
<button id="btn01">按钮 2</button>
</body>
</html>
onchangeコンテンツ変更イベント
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangeFun() {
alert("女神已经改变了");
}
window.onload = function () {
//1 获取标签对象
var selObj = document.getElementById("sel01");
// alert( selObj );
//2 通过标签对象.事件名 = function(){}
selObj.onchange = function () {
alert("男神已经改变了");
}
}
</script>
</head>
<body>
请选择你心中的女神：
<!--静态注册 onchange 事件-->
<select onchange="onchangeFun();">
<option>--女神--</option>
<option>芳芳</option>
<option>佳佳</option>
<option>娘娘</option>
</select>
请选择你心中的男神：
<select id="sel01">
<option>--男神--</option>
<option>国哥</option>
<option>华仔</option>
<option>富城</option>
</select>
</body>
</html>
onsubmit フォーム送信イベント
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 静态注册表单提交事务
function onsubmitFun() {
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("静态注册表单提交事件----发现不合法");
return flase;
}
window.onload = function () {
//1 获取标签对象
var formObj = document.getElementById("form01");
//2 通过标签对象.事件名 = function(){}
formObj.onsubmit = function () {
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("动态注册表单提交事件----发现不合法");
return false;
}
}
</script>
</head>
<body>
<!--return false 可以阻止 表单提交 -->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册" />
</form>
<form action="http://localhost:8080" id="form01">
<input type="submit" value="动态注册" />
</form>
</body>
</html>