dom-day05

2018.9.7 星期五
复习：
HTML绑定:

DOM0级绑定:
div.onclick = handle;
div.onclick = handle2;
//如果同一节点同一事件类型，绑定两个函数，后者覆盖前者。

div.onclick = null;

DOM2级绑定:
非IE8及以下：
div.addEventListener(‘click’,handle,true/false);

  div.addEventListener('click',handle1,true/false);

   //如果同一元素同一事件类型绑定了多个函数，依次执行

   div.removeEventListener('click',handle,true/false);//解绑

IE8及以下：
   div.attachEvent('onclick',handle);
   div.attachEvent('onclick',handle1);
   //如果同一元素同一事件类型绑定了多个函数，倒叙执行

   div.detachEvent('onclick',handle);//解绑
   匿名函数在DOM2级无法解绑。

事件对象event:
DOM0级
function handle(event){}

  非IE8及以下：
       event
   IE8及以下：
       window.event

DOM2级
function handle(event){}
event就是事件对象

阻止冒泡：
非IE8及以下：
event.stopPropagation()
IE8及以下：
event.cancelBubble() = true;

阻止默认：
非IE8及以下：
event.preventDefault()
IE8及以下：
event.returnValue = false;

获取源元素：
非IE8及以下：
event.target
event.currentTarget 当前目标对象，和this一样
IE8及以下：
event.srcElement

this指向：
非IE8及以下：
this == event.currentTarget
IE8及以下：
this–>window

其他事件类型：
click 点击

 mouseenter   鼠标进入元素
 mouseleave   鼠标离开元素  
 mouseover    鼠标进入元素【支持子元素】
 mouseout     鼠标离开元素【支持子元素】 

 keydowm      键盘按下
 keyup        键盘抬起

 focus        聚焦事件，input输入框
 blur         失焦，

event的其他属性：
clientX 视口区的x坐标
clientY 视口区的y坐标

screenX   屏幕区的x坐标
csreenY   屏幕区的y坐标

pageX     页面区的x坐标
pageY     页面区的y坐标

如果页面不滚动的话，页面区与视口区的(0,0)重合

绘图：
mousedown:
鼠标按下的时候，创建div，设置位置，将位置放到外部变量中，
将div放到外部变量中，以供mouseover和mouseup使用。

mouseover:
 鼠标移动的时候，判断是否有div，如果有的话，设置其宽高。
 宽高就是移动到的位置减去开始的位置。

mouseup:
  清空外部变量div
  如果不清空，在以下情况下会有异常：
     鼠标按下-鼠标移动-鼠标抬起-鼠标移动设置上一个div的宽高

显示与隐藏：
点击按钮进行显示与隐藏

//实现图片轮播
多张图片只显示一张
图片[]

显示图1
时隔2s
显示图2
时隔2s
显示图3
count=0;
setIterval(function(){
var imgs = document.images;
imgs.forEach(function(item,index){
if(index == count%imgs.length){
item显示
}else{
item不显示
}
});
count++;
},2000);

超时调用：
setTimeout(function(){
alert(1);
},2000); //多少秒后执行，只执行一次

clearTimeout(function(){
alert(1);
},2000); //每几毫秒执行一次

间歇调用：
setInterval(function(){
alert(1);
})

//在网页上显示当前时间

alert() 确认框

prompt(‘提示信息’) 会话框

猜你喜欢