転載元を示してください: http://blog.csdn.net/zhaoyanjun6/article/details/126508434この記事は[Zhao Yanjun のブログ]
からのものです。
記事ディレクトリ
HTML イベントは、HTML 要素に発生するものです。
HTML ページで JavaScript を使用すると、これらのイベントをトリガーできます。
クリックイベント、他のコントロールの内容を変更
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script>
</script>
</head>
<body>
<button onclick="getElementById('demo').innerHTML= Date()">点击吧</button>
<p id="demo">初始值</p>
</body>
</html>
効果は次のとおりです。
クリックイベント、コントロールの内容を変更します
コードはそれ自体の要素の内容を変更します (を使用this.innerHTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script>
</script>
</head>
<body>
<button onclick="innerHTML= Date()">点击吧</button>
</body>
</html>
効果は次のとおりです。
コントロールの内容を変更する機能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<button id="btn" onclick="changeBtn()">点击吧</button>
<script>
function changeBtn() {
document.getElementById('btn').innerHTML = Date()
}
</script>
</body>
</html>
効果は次のとおりです。
マウスイベント
- onclick ユーザーがオブジェクトをクリックしたときに呼び出されるイベント ハンドラー。
- oncontextmenu は、ユーザーがマウスの右ボタンをクリックしてコンテキスト メニューを開くと起動します。
- ondblclick ユーザーがオブジェクトをダブルクリックしたときに呼び出されるイベント ハンドラー。
- onmousedown マウス ボタンが押されています。
- onmouseenter マウス ポインターが要素の上に移動したときに発生します
- onmouseleave マウス ポインタが要素から離れたときに発生します
- onmousemomo マウスが動かされた
- onmouseover 要素の上にマウスを置く
- onmouseout マウスが要素から離れます
- onmouseup マウス ボタンが離された
例: マウスをコントロールに移動します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<!--鼠标移动到 button-->
<button id="btn" onmouseenter="changeBtn()">点击吧</button>
<script>
function changeBtn() {
document.getElementById('btn').innerHTML = Date()
}
</script>
</body>
</html>
例: コンテキスト メニューが開かれたときにトリガーされます
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<!--打开上下文菜单-->
<button id="btn" oncontextmenu="changeBtn()">点击吧</button>
<script>
function changeBtn() {
document.getElementById('btn').innerHTML = Date()
}
</script>
</body>
</html>
コントロールのプロパティ値を取得する関数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<script>
function changeBtn() {
//获取button属性值
const v = document.getElementById('input').value
//获取input属性值
const c = document.getElementById('btn').textContent
console.info("获取控件属性 button： " + v + " input: " + c)
}
</script>
<button id="btn" onclick="changeBtn()">点击吧</button>
<input id="input" value="默认值"/>
</body>
</html>
レンダリングは次のとおりです。
