事件
注冊事件
給元素添加事件，為注冊事件或者系結事件
注冊事件兩種方式
- 傳統方式
- 監聽事件方式
事件監聽
- addEventListener() 事件監聽 (IE9以上)
eventTarget.addEventListener(type, listener, [useCapture])
- 引數type： 事件型別字串，不要on 如click，mouseover
- 引數listener： 事件處理函式，觸發的時候要做的事情
- 引數useCapture： 可選，是一個布林值，默認false
- attacheEvent() 事件監聽 (IE678支持)
evetagrget.attachEvent(eventNameWithOn, callback)
- 引數eventNameWithOn： 事件型別字串，不要on 如click，mouseover
- 引數callback： 事件處理函式，觸發的時候要做的事情
<body>
<button>傳統注冊事件</button>
<button>addEventListener ie9以上</button>
<button>attachEvent ie678</button>
<script>
var btns = document.querySelectorAll('button');
// 傳統注冊事件
btns[0].onclick = function () {
alert('傳統方式')
};
// addEventListener 添加多個不覆寫
btns[1].addEventListener('click', function () {
alert('ddEventListener ie9以上')
});
btns[1].addEventListener('click', function () {
alert('ddEventListener ie9以上---2')
});
//attachEvent
btns[2].attachEvent('click', function () {
alert('attachEvent')
})
</script>
</body>
示例代碼
洗掉事件
- 傳統方式
btns.onclick = null
- 方式洗掉監聽事件
eventTarget.removeEventListener(type, listener, [useCapture])
- 引數type： 事件型別字串，不要on 如click，mouseover
- 引數listener： 事件處理函式，觸發的時候要做的事情
- 引數useCapture： 可選，是一個布林值，默認false
<body>
<button>addEventListener ie9以上</button>
<button>attachEvent ie678</button>
<script>
var btns = document.querySelectorAll('button');
// addEventListener 添加多個不覆寫
btns[0].addEventListener('click', fn);
function fn() {
alert(222);
this.removeEventListener('click', fn)
}
//attachEvent
btns[1].attachEvent('click', fn1);
function fn1() {
alert(111);
this.detachEvent('click', fn1)
}
</script>
</body>
示例代碼
事件冒泡
- onblur，onfocus，onmouseenter，onmouseleave 沒有冒泡
dom 事件流，在js代碼中
- 只能執行捕獲或者冒泡其中的一個階段；
- onclick 和 attachEvent（ie） 只能得到冒泡階段；
- 如果addEventListener 第三個引數是 true 那么則處于捕獲階段 document -> html -> body -> father -> son；
- 如果addEventListener 第三個引數是 false 或者 省略 那么則處于冒泡階段 son -> father ->body -> html –> document
<div class="father"> <div class="son">son盒子</div> </div> <script> var son = document.querySelector('.son'); // 給son 注冊點擊事件 son.addEventListener('click', function () { alert('son'); }, true); // true--> 捕獲階段，flase---> 冒泡階段 // 給father注冊單擊事件 var father = document.querySelector('.father'); father.addEventListener('click', function () { alert('father'); }, true); // 給document 注冊單擊事件 document.addEventListener('click', function () { alert('document'); }, true) </script>事件捕獲代碼
<div class="father"> <div class="son">son盒子</div> </div> <script> var son = document.querySelector('.son'); // 給son 注冊點擊事件 son.addEventListener('click', function () { alert('son'); }, false); // true--> 捕獲階段，flase---> 冒泡階段 // 給father注冊單擊事件 var father = document.querySelector('.father'); father.addEventListener('click', function () { alert('father'); }, false); // 給document 注冊單擊事件 document.addEventListener('click', function () { alert('document'); }) </script>事件冒泡代碼
事件物件
- 事件觸發發生時會產生事件物件，并且系統會以實參形式傳給事件處理函式
<body>
<div>123</div>
<script>
var div = document.querySelector('div');
div.onclick = function (event) {
// event 就是事件物件， 形參
event = event || window.event; // 兼容性問題
console.log(event);
}
</script>
</body>
示例代碼
事件物件屬性和方法:
e.target和this區別
<body>
<div>123</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var div = document.querySelector('div');
div.addEventListener('click', function (e) {
console.log(e.target); // 一致
console.log(this); // 一致
});
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
console.log(e.target); // 誰觸發的就說誰， 這里是li
console.log(this); // 我們給ul 系結了事件 那么this 就指向ul
})
</script>
</body>
示例代碼
阻止默認行為
html的一種默認行為
<body>
<a href="https://www.cnblogs.com/alannever/p/http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
<input type="submit" value="https://www.cnblogs.com/alannever/p/提交" name="sub">
</form>
<script>
var a = document.querySelector('a');
a.addEventListener('click', function (e) {
e.preventDefault() // dom 標準行為，組織默認提交行為
});
// 傳統方式阻止默認行為
a.onclick = function (e) {
e.preventDefault();
return false // 我們可以利用return false 也能阻止默認行為 沒有兼容性問題
};
var from = document.querySelector('form');
from.addEventListener('click', function (e) {
e.preventDefault()
})
</script>
</body>
示例代碼
阻止事件冒泡
e.stopPropagation()
<body>
<div class="father">
<div class="son">son兒子</div>
</div>
<script>
var son = document.querySelector('.son');
var father = document.querySelector('.father');
son.addEventListener('click', function (e) {
alert('son');
e.stopPropagation(); // 阻止事件冒泡
},false);
father.addEventListener('click', function (e) {
alert('father');
}, false);
document.addEventListener('click', function (e) {
alert('document')
})
</script>
</body>
示例代碼
事件委托
給父元素注冊事件，利用事件冒泡，當子元素的事件觸發，會冒泡到父元素，然后去控制相應的子元素，
<body>
<ul>
<li>知否知否，點我應有彈框在手！</li>
<li>知否知否，點我應有彈框在手！</li>
<li>知否知否，點我應有彈框在手！</li>
<li>知否知否，點我應有彈框在手！</li>
<li>知否知否，點我應有彈框在手！</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
e.target.style.backgroundColor = 'red'; // 事件委托
})
</script>
</body>
示例代碼
常用滑鼠事件
滑鼠事件物件
<script>
document.addEventListener('click', function (e) {
// 1. client 滑鼠在可視區的x和y坐標
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------');
// 2. page 滑鼠在頁面檔案的x和y坐標
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------');
// 3. screen 滑鼠在電腦螢屏的x和y坐標
console.log(e.screenX);
console.log(e.screenY);
})
</script>
示例代碼
相關代碼: https://github.com/1515806183/html-code/tree/master/wapapi-01
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/17835.html
標籤：其他
上一篇：手寫vue中v-bind:style效果的自定義指令
下一篇：依賴注入、遞回組件的用法