ホームページ > 記事 > ウェブフロントエンド > JavaScriptによるDOMのイベント解析（コード付き）
JavaScriptによるDOMのイベント解析（コード付き）
- 不言オリジナル
- 2018-09-04 10:20:031164ブラウズ
イベントとは何ですか？イベントって何の役に立つの？この記事では、JavaScript での DOM のイベント分析について説明し、イベントの概念とイベントの使用法を紹介します。
イベント1. イベントとは
ユーザーがHTMLページのボタンをクリックしたり、ユーザーがユーザー名とパスワードを入力したりするなど、プログラムのユーザー動作をJSに知らせます
<script>
var button = document.getElementById('btn');
// 获取按钮元素
button.onclick = function () {
// 事件绑定
console.log('你已点了我');
}
</script> 2. イベントの登録
JS関数が指定されたイベントに関連付けられ、バインドされた関数がイベントのハンドルになります
イベントが発生するとバインドされた関数が呼び出されます
HTMLのevent属性要素
は、実際の登録イベント関数を表します
このメソッドは、HTMLの構造および動作から効果的に分離されていません
<body>
<button onclick="mylove()" id="btn">按钮</button>
<script>
function mylove() {
console.log('你已点了我');
}
</script>
</body>
DOMオブジェクトのevent属性
THMLページ要素にDocumentオブジェクトを配置します
関数
<body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = mylove;
function mylove() {
console.log('你已点了我');
}
</script>
</body>
イベント リスナー
addEventLisener() メソッドを使用して、要素がイベント リスナーを追加することを示すためにこのメソッドを呼び出します
body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById('btn');
btn.attachEvent('onclick',function () {
console.log('XXX');
})
function bind(element,eventName, functionName) {
if (element.addEventListener) {
element.addEventListener()
}
}
</script>
</body>
イベントリスナー内のこれ
ページのaddEventListener()メソッドを使用しますイベントを登録する場合、登録されたイベント要素を参照します
attachEent()メソッドを使用してページのイベントを登録する場合、これを参照します登録されたイベント
<script>
var qyc =document.getElementById('qyc');
/*qyc.addEventListener('click',function () {
console.log(this);//this指当前绑定事件的元素
});*/
/*qyc.attachEvent('onclick',function () {
console.log(this);//this指当前环境的全局对象（Window对象）
});*/
bind(qyc,'click',function () {
console.log(this);//在不同的浏览器中，this会有不同的表示
});
function bind(element, eventName, functionName) {
if (element.addEventListener) {
} else {
element.attachEvent('on' + eventName, function () {
functionName.call(element)
});
}
}//此为IE8之前的版本兼容的解决方案
</script>
</body>
ではなく、Windowオブジェクトに追加します。 3. 登録されたイベント
removeEventListener()メソッドを削除します。このメソッドを呼び出すと、要素がイベントリスナー
<body>
<button id="qyc">按钮</button>
<script>
var qyc = document.getElementById('qyc');
function mylove() {
console.log('XXX');
}
qyc.addEventListener('click',mylove);
qyc.addEventListener('click',function () {
console.log('YYY');
});
qyc.removeEventListener('click',mylove);
function unbind(element,eventName,functionName) {
if (element.removeEventListener) {
element.removeEventListener(eventName, functionName);
}else {
element.detachEvent('on' + eventName, functionName);
}
}
</script>
</body>
を削除することが示されます。 IE8 より前のブラウザは、removeEventListener() メソッドをサポートしていません
<body>
<button id="qyc" onclick="mylove(event)">按钮</button>
<script>
var qyc = document.getElementById('qyc');
qyc.addEventListener('click',function (event) {
console.log(event);
});
qyc.attachEvent('onclick',function () {
console.log(window.event);
});
function bind(element,eventName, functipnName) {
if (element.addEventListener){
element.addEventListener(eventName,functipnName)
} else {
element.attachEvent('on' + eventName, function(){
functipnName.call(element);
});
}
}
</script>5. ターゲットを取得します
Event オブジェクトは、現在のイベントをトリガーした HTML 要素を取得するための target 属性を提供します。 object は、現在のイベントを登録した HTML 要素を取得するための currentTarget 属性を提供します。
<style>
ul {
background-color: red;
}
#wl {
background-color: blue;
}
a {
background-color: yellow;
}
</style>
</head>
<body>
<ul id="yx">
<li>单机游戏</li>
<li id="wl"><a href="#">网络游戏</a></li>
<li>手机游戏</li>
</ul>
<script>
var yx = document.getElementById('yx');
yx.addEventListener('click',function (event) {
console.log(event.target);
// target属性-获取绑定当前事件目标元素
console.log(event.currentTarget);
// currentTarget属性-获取绑定当前事件目标元素
console.log(this);
});
yx.attachEvent('onclick',function (event) {
// IE8以下浏览器提供srcElement属性为target目标元素
var e = event || window.event;
console.log(e.srcElement);
});
</script>
</body>
7. マウスを取得します
pageX と pageY は、ページに対する相対値を表しますclientX と clientY は、表示されている領域を表します
screenX と screenY は、現在のイベントを表します画面
<body>
<a href="#">链接</a>
<script>
var aElement = document.getElementsByName('a');
/*aElement.addEventListener('click',function(event){
event.preventDefault();// 阻止默认行为
});*/
aElement.onclick = function (event) {
event.preventDefault();
return false;
}
aElement.attachEvent('onclick',function (event) {
var e = event || window.event;
e.returnValue = false;
})
</script>
</body>
8. イベント フロー
<body>
<script>
var html = document.documentElement;
html.addEventListener('click',function(event){
console.log(event.pageX, event.pageY);
// 鼠标坐标值相对于当前HTML页面
console.log(event.clientX, event.clientY);
// 鼠标坐标值相对于当前可视区域
console.log(event.screenX, event.screenY);
// 鼠标坐标值相对于当前屏幕的
// 鼠标坐标值只能获取，不能设置
});
</script>
</body>
9. イベントの委任多数の HTML 要素が同じイベントを登録し、イベント ハンドラーのロジックが同じであるため、ページ速度が遅くなります。イベント フローで、これらの HTML 要素が親要素にイベントを登録できない場合
<style>
#q1 {
width: 200px;
height: 200px;
background-color: red;
padding: 50px;
}
#q2 {
width: 100px;
height: 100px;
background-color: yellow;
padding: 50px;
}
#q3 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="q1">
<div id="q2">
<div id="q3"></div>
</div>
</div>
<script>
var q1 = document.getElementById('q1');
q1.addEventListener('click',function(){
console.log('这是d1... ...');
}, false);
var q2 = document.getElementById('q2');
q2.addEventListener('click',function(){
console.log('这是d2... ...');
}, false);
var q3 = document.getElementById('q3');
q3.addEventListener('click',function(event){
console.log('这是q3... ...');
event.stopPropagation();
}, false);
</script>
</body>
関連する推奨事項:
javascript_javascript スキルでの DOM イベントの理解
以上がJavaScriptによるDOMのイベント解析（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。