One, event object event
- Event object: When the response function of the event is triggered, the browser will pass an event object as an actual parameter into the response function every time, and all information related to the current event is encapsulated in the event, such as: the coordinates of the mouse, which button on the keyboard The direction in which the mouse wheel is scrolled when pressed.
- Exercises of mouse movement:
window.onload=function(){
//当鼠标在areaDiv中移动时，在showMsg中来显示坐标
var areaDiv=document.getElementById("areaDiv");
var showMsg=document.getElementById("showMsg");
//onmousemove:该事件将会在鼠标元素中移动时被触发
areaDiv.onmousemove=function(event){
//解决浏览器兼容的问题
if(!event){
event=window.event;
}
//event=event||window.event;
//clientX可以获取鼠标指针的水平坐标
//clientY可以获取鼠标指针的垂直坐标
var x=event.clientX;
var y=event.clientY;
//在showMsg中显示鼠标的坐标
showMsg.innerHTML="x="+x+",y="+y;
}
}
- In IE8, the browser does not pass the event object when the response function is triggered. In IE8 and below browsers, the event object is saved as a property of the window object.
2. Make the div move with the mouse
1. First, when setting the style of the div in the style sheet, be sure to enable absolute positioning
. 2. ClientX and clientY are used to obtain the coordinates of the mouse in the current visible window. The offset of the div is equivalent to the entire page.
3. pageX and pageY can get the coordinates of the mouse equivalent to the current entire page, but these two attributes are not supported in IE8, so if you need to be compatible with IE8, do not use this method
4. Add the scroll distance of the page scroll bar to the offset of the div, so that the div will always move with the mouse
var st=document.documentElement.scrollTop;
var sl=document.documentElement.scrollLeft;
box1.style.top=top+st+"px";
box1.style.Left=Left+sl+"px";
Three, the bubbling of the incident Bubble
- Event bubbling: The so-called bubbling refers to the upward transmission of events. When an event on a descendant element is triggered, the same event of its ancestor element will also be triggered.
- If you don't want event bubbling, you can cancel bubbling through the event object.
//可以将事件对象中的cancelBubble设置为true，即可取消冒泡。
event.cancelBubble=true;
Fourth, the delegation of the event
- If you want to bind an event once, you can apply it to multiple elements, even if the element is added later, we can try to bind it to the common ancestor element of the element.
//为ul绑定一个单击响应函数
ul.onclick=function(event){
//target： event中的target表示的是触发事件的对象
//如果触发事件的对象是我们期望的元素，则执行，否则就不执行
if(event.target.className=="link"){
alert("我是ul的单击响应函数");
}
}
- Event delegation: bind the event to the common ancestor element of the element uniformly, so that when an event on the descendant element is triggered, it will bubble up to the ancestor element, so that the event can be handled through the response function of the ancestor element.
- Event delegation uses bubbling. Through delegation, the number of event bindings can be reduced and event performance can be improved.
Five, event binding
-
Use object.event=function to bind the response function. It can only bind one response function to one element and one event at the same time, and it cannot bind multiple ones. If more than one is bound, the back will cover the front.
-
addEventListener(): This method can also be used to bind a response function to the element.
Parameters:
①The string of the event, don’t need to be on
②Callback function, which will be called when the event is triggered. ③Whether the event is triggered
in the capture phase requires a boolean value , Generally pass false and
use addEventListener() to bind multiple response functions for the same event of an element at the same time, so that when the event is triggered, the response function will be executed in the order of function binding.
This method does not support IE8 and below browsers, IE8 supports attachEvent() -
attachEvent(): In IE8, you can use attachEvent() to bind events.
Parameters:
①The string of the event, to be on
②Callback function, which will be called when the event is triggered.
This method can also be used to bind multiple events at the same time. This processing function, the difference is that it is bound to be executed first, and the order of execution is opposite to that of addEventListener(). -
Define a function to bind the response function for the specified element:
Parameters:
①obj object to bind the event
②eventStr event string (don’t be on)
③callback callback function
The this in addEventListener() is the this in
attachEvent() of the object that binds the event , and it is the this of the window that
needs to unify the two methods
function bind(obj,eventStr,callback){
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);
}else{
//IE8及以下
obj.attachEvent("on"+eventStr,function(){
//在匿名函数中调用回调函数
//this是谁由调用方式决定
callback.call(obj);
});
}
}
bind(btn01,"click",function(){
alert(1);
})
Six, the spread of the incident
There is no capture phase in IE8 and below browsers.
Seven, drag practice
window.onload=function(){
/*
拖拽box1元素
拖拽的流程：
1.当鼠标在被拖拽元素上按下时，可以开始进行拖拽 onmousedown
2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
*/
//获取box1
var box1=document.getElementById("box1");
//1.当鼠标在被拖拽元素上按下时，可以开始进行拖拽 onmousedown
box1.onmousedown=function(event){
//2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
event=event || window.event;
//div的左偏移量 鼠标.clentX -元素.offsetLeft
var ol=event.clientX - box1.offsetLeft;
//div的上偏移量 鼠标.clentY -元素.offsetTop
var ot=event.clientY - box1.offsetTop;
document.onmousemove=function(event){
//解决兼容问题
event=event || window.event;
//获取到鼠标的坐标
var left=event.clientX - ol;
var top=event.clientY - ot;
//设置div的偏移量
var st=document.documentElement.scrollTop;
var sl=document.documentElement.scrollLeft;
box1.style.top=top+st+"px";
box1.style.left=left+sl+"px";
};
//3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
document.onmouseup=function(){
//取消document.onmousemove事件
document.onmousemove=null;
//取消document.onmouseup事件
document.onmouseup=null;
};
/* 当我们拖拽一个网页中的内容时，浏览器会默认去搜索
引擎中搜索内容，此时会导致拖拽功能的异常，这个是浏览器提供的默认行为
如果不希望发生这个行为，则可以通过return false来取消默认行为*/
return false;
};
}
Eight, roller practice
window.onload=function(){
/* 当鼠标向下滚动时候，box1变长，向上滚动时，box1变短 */
var box1=document.getElementById("box1");
//为box1绑定一个鼠标滚轮滚动的事件
//onmousewheel鼠标滚轮滚动的事件,会在滚轮滚动时触发,但是火狐不支持该属性
/*
在火狐中需要使用DOMMouseScroll 来绑定滚动事件
注意该事件需要通过addEventListener()函数来绑定
*/
box1.onmousewheel=function(event){
//event=event || window.event;
//判断鼠标滚轮滚动的方向
//event.wheelDelta可以获取鼠标滚轮滚动的方向
//向上滚120，向下滚-120，wheelDelta这个不看大小，只看正负
//alert(event.wheelDelta);
//火狐不支持wheelDelta
//alert(event.detail);
if(event.wheelDelta>0 || event.detail<0){
//向上滚，box1变短
box1.style.height=box1.clientHeight-10+"px";
}else{
//向下滚，box1边长
box1.style.height=box1.clientHeight+10+"px";
}
/*
当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
*/
/*
使用addEventListener()方法绑定响应函数的，取消默认方式不能使用 return false
需要使用event取消默认行为,event.preventDefault()
但是IE8不支持event.preventDefault()，直接调用会报错
*/
event.preventDefault() && event.preventDefault();
return false;
}
bind(box1,"DOMMouseScroll",box1.onmousewheel);
function bind(obj,eventStr,callback){
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);
}else{
//IE8及以下
obj.attachEvent("on"+eventStr,function(){
//在匿名函数中调用回调函数
//this是谁由调用方式决定
callback.call(obj);
});
}
}
}
Eight, keyboard events
1. onkeydown: the button is pressed.
For onkeydown, if you keep pressing a certain key without letting go, the event will always be triggered.
When onkeydown is triggered continuously, the first and second time will be separated, and the following is very fast. This design is In order to prevent misoperation.
2. onkeyup: the key is released
3. Keyboard events are generally bound to some objects or documents that can get the focus
4. The key code can be obtained by keyCode , and it can be used to determine which key is pressed
if(event.keyCode===89){
console.log("y被按下了");
}
5. In addition to keyCode, the event object also provides several attributes
①altKey
②ctrlKey
③shiftKey
These three are used to determine whether alt, ctrl, shift are pressed, if pressed, it returns true, otherwise it returns false
