ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScriptでよく使われるイベントは何ですか
JavaScriptでよく使われるイベントは何ですか
- 青灯夜游オリジナル
- 2022-02-21 17:37:0513075ブラウズ
JavaScript で一般的に使用されるイベントは次のとおりです: 1. クリック イベント (onclick および ondblclick)、2. フォーカス イベント (onblur および onfocus)、3. 読み込みイベント (onload)、4. マウス イベント、5. キーボード イベント; 6. イベントの選択と変更; 7. イベントの形成。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
JS のイベント:
- コンセプト: 特定のコンポーネントが特定の操作を実行した後、特定のコードの実行をトリガーします。
- イベント: 特定の操作。例: クリック、ダブルクリック、キーボード押下、マウス移動
- イベント ソース: コンポーネント。例: ボタンのテキスト入力ボックス...
- リスナー: コード。
- リスニングの登録: イベント、イベント ソース、リスナーを組み合わせます。イベント ソースでイベントが発生すると、リスナー コードの実行がトリガーされます。
1. よく使用されるイベント
1) クリック イベント:
- onclick: クリック イベント
- ondblclick: ダブルクリック イベント
2) フォーカス イベント
- onblur: フォーカスを失う
- onfocus: 要素がフォーカスを獲得します。
3) 読み込みイベント:
- onload: ページまたは画像が読み込まれます。
4) マウス イベント:
- onmousedown マウス ボタンが押されました。
- onmouseup マウス ボタンを放します。
- onmousemove マウスが移動します。
- onmouseover マウスを要素の上に移動します。
- onmouseout マウスが要素から遠ざかります。
5) キーボード イベント:
- onkeydown キーボードのキーが押されました。
- onkeyup キーボードのキーが放されます。
- onkeypress キーボードのキーが押されてから放されます。
6) 選択および変更イベント
- onchange フィールドの内容が変更されます。
- onselect テキストが選択されています。
7) フォームイベント:
- onsubmit 確認ボタンがクリックされました。
- onreset リセットボタンがクリックされました。
2. イベント登録
3.1. イベント登録 (バインディング) とは何ですか?
実際には、イベントが応答したときにどのオペレーション コードを実行するかをブラウザーに指示します。これは、イベント登録またはイベント バインディングと呼ばれます。
3.2. イベントを登録する 2 つの方法 (静的登録イベント、動的登録イベント)
静的登録イベント :イベント応答後のコードにHTMLタグのevent属性を直接割り当てる方法を静的登録といいます。
function sayHello() {
alert("hello js!");
}
<!--注册事件的第一种方式，直接在标签中使用事件句柄-->
<!--以下代码的含义是：将sayHello函数注册到钮上，等待click事件发生之后，
该函数被浏览器调用。我们称这个函数为回调函数。-->
<input type="button" value="hello" onclick="sayHello()"/>イベントの動的登録: は、まず js コードを通じてラベルの dom オブジェクトを取得し、次に dom オブジェクトを通じて取得することを指します。イベント名=function(){} が割り当てられます。イベント応答後のイベント このコードは動的登録と呼ばれます。
動的登録の基本手順:
1. ラベル オブジェクトを取得します
2. ラベル オブジェクト.イベント名=fucntion() {}
<!--第二种注册事件的方式，是使用纯JS代码完成事件的注册。-->
<input type="button" value="hello1" id="mybtn1"/>
<input type="button" value="hello2" id="mybtn2"/>
<input type="button" value="hello3" id="mybtn3"/>
<script type="text/javascript">
function dynamic(){
alert("动态注册事件1");
}
// 第一步:先获取这个钮对象()
/*
document:是 JavaScript语 言 提 供 的 一 个 对 象 （ 文 档 ), document是 JavaScript语 言 提 供 的 一 个 对 象 （ 文 档 ),
get: 获 取
Element:元 素 （ 就 是 标 签
By:通 过 。 。 由 。 。 经 。 。 。
Id: id 属 性
getElementById: 通 过 id 属 性 获 取 标 签 对
*/
var btnobj1 = document.getElementById("mybtn1");
// 第二步:给钮对象的onclick属性赋值
btnobj1.onclick = dynamic;// 注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法.
// 这行代码的含义是,将回调函数doSome注册到click事件上.
var btnobj2 = document.getElementById("mybtn2");
btnobj2.onclick = function(){// 这个函数没名字,叫做匿名函数,这个匿名函数也是一个回调函数.
alert("动态注册事件2");// 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
}
document.getElementById("mybtn3").onclick = function () {
alert("动态注册事件3");
}
</script> keydown イベントを通じて Enter キー 13 と ESC キー 27 をデモンストレーションする
<body>
<script type="text/javascript">
// 回车键的键值是13
// ESC键的键值是27
window.onload = function () {
/* var keyvalue = document.getElementById("key");
keyvalue.onkeydown = function (event) {
// 获取键值对象
alert(event);// 什么键显示都为[object KeyboardEvent]
// 对于“键盘事件对象"来说,都keyCode属性用来获取键值.
alert(event.keyCode);//回车键显示13
}
*/
var keyvalue = document.getElementById("key");
keyvalue.onkeydown = function (event) {
if(event.keyCode == 13){
alert("正在进行验证")
}
}
}
</script>
<input type="text" id="key"/>
</body>[関連する推奨事項: JavaScript 学習チュートリアル]
以上がJavaScriptでよく使われるイベントは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。