Events - Advanced
Registration issue
Adding events to elements is called registering events or binding events .
There are two ways to register events: traditional way and method listening way .
traditional registration method
- Use events beginning with on such as
onclick - Features: uniqueness of registration time (only one handler function can be set for the same element and event, and the last registered handler function will overwrite the previously registered handler function)
Method monitoring registration method
- W3C recommended
EventTarget.addEventListener(type, listener[, useCapture])- Features: Multiple listeners can be registered for the same event on the same element
EventTarget.addEventListener(type, listener, useCapture)；
//type：事件类型字符串，比如click、mouseover。注意: 不要使用 "on" 前缀，例如是click不是onclick。
//listener：事件触发时执行的函数。
//useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。默认值false。
delete event
traditional way
eventTarget.onclick = null;
Method monitoring method
eventTarget.removeEventListener(type,listener[,useCapture]);
//eg:
var divs = document.querySelectorAll('div');
divs[0].addEventListener('click',fn);
function fn {
alert('xxx');
divs[0].removeEventListener('click',fn);
}
DOM event stream
When an HTML element generates an event , the event will be propagated along the path between the element node and the root node, and all the nodes passed by the path will receive the event. This propagation process can be called DOM event flow.
The DOM event flow is divided into three phases:
1. Capture phase (the idea of event capture is that less specific nodes should receive events earlier, and the most specific nodes should receive events last.)
2. Current target stage
3. The bubbling phase (the event is received by the most specific element (the node with the deepest nesting level in the document) at the beginning, and then propagates up to the less specific node (document) step by step.)
- Only one phase of capturing or bubbling can be executed in js code
onclickandattachEventcan only get the bubbling phaseEventTarget.addEventListener(type, listener[, useCapture])If the third parameter is true, it means that the event handler is called during the event capture phase ; if it is false (the default value), it means that the event handler is called during the event bubbling phase .
event object
The Event object represents the state of the event, such as the element in which the event occurred, the state of the keyboard key, the position of the mouse, and the state of the mouse button. **Simple understanding:** After an event occurs, a collection of a series of information data related to the event is put into this object. This object is the event object event, which has many attributes and methods.
eventTarget.onclick = function(event) {
};
eventTarget.addEventListener('click',function(event){
})
//这个event就是事件对象，也可以写成e或者evt
//event是形参，不需要传递实参
//当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）
Common Properties and Methods of Event Objects
Event.target //返回触发事件的对象
thisThe difference between and : e.targetwhat is returned is the object that triggers the event (for example, if ul is bound, click li to return li), and what is returned thisis the object that is bound to the event (for example, ul is bound, click li to return ul) (and event.currentTargetSame).
e.type //返回事件的类型
e.preventDefault(); //阻止默认事件（默认行为） 标准 比如不让链接跳转
//另一种方法，注册方式里边写
return false;
e.stopPropagation(); //阻止冒泡 标准
prevent event bubbling
Standard way of writing: use stopPropagation()the method
event delegation
principle
Event listeners are set on the parent node, and then use the bubbling principle to affect the setting of each child node.
Common mouse events
contextmenu //禁止鼠标右键菜单
document.addEventListener('contextmenu',function(e){
e.preventDefault();
})
selectstart //禁止鼠标选中
document.addEventListener('selectstart',function(e){
e.preventDefault();
})
Mouse event object (MouseEvent)
e.clientX //返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY //返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX //返回鼠标相对于文档页面的X坐标
e.pageY //返回鼠标相对于文档页面的Y坐标
e.screenX //返回鼠标相对于电脑屏幕的X坐标
e.screenY //返回鼠标相对于电脑屏幕的Y坐标
Keyboard event object (KeyboardEvent)
keyup //某个键盘按键被松开时触发
keydown //某个键盘按键被按下时触发
keypress //某个键盘按键被按下时触发，但是不识别功能键，如 ctrl shift ↑ ↓ ← → 等
- The execution order of the three events: keydown -> keypress -> keyup
- Features in the text box: when the keydown and keypress events are triggered, the text has not yet fallen into the text box. When the keyup event is triggered, the text has already fallen into the text box.
code //返回键盘按下的值