window常用的属性

288 阅读3分钟

//定义和用法 //onresize 事件会在窗口或框架被调整大小时发生。 window.onresize = function(){ //窗口改变也调用函数

}

//定义和用法 //onscroll 事件在元素滚动条在滚动时触发。 window.onscroll= function(){ //滚动条在滚动时触发

}

//定义和用法 //onload 事件会在页面或图像加载完成后立即发生。 //onload 通常用于 元素,在页面完全载入后(包括图片、css文件等等。)执行脚本代码。 window.onload= function(){ //页面加载完成后触发

}

//定义和用法 //onmousewheel 当鼠标滚轮正在被滚动时运行的脚本。 window.onmousewheel= function(){ //当鼠标滚轮正在被滚动时运行的脚本。

}

//定义和用法 //onclick 元素上发生鼠标点击时触发。 window.onclick= function(){ //元素上发生鼠标点击时触发。

}

//定义和用法

//ondblclick 元素上发生鼠标双击时触发。。 window.ondblclick= function(){ //元素上发生鼠标双击时触发。。

}

  //定义和用法

//onmousedown 当元素上按下鼠标按钮时触发。。 window.onmousedown= function(){ //当元素上按下鼠标按钮时触发。。

}  

    //定义和用法

//onmouseup 当在元素上释放鼠标按钮时触发。。 window.onmouseup= function(){ //当在元素上释放鼠标按钮时触发。。

}

 //定义和用法

//onmousemove 当鼠标指针移入到元素上时触发。。(移入后一直触发) window.onmousemove= function(){ //当鼠标指针移入到元素上时触发。。。

} 

//定义和用法 //onmouseover 当鼠标指针移入到元素上时触发。。(移入后只触发一次)--onmouseenter 事件不支持冒泡 window.onmouseover= function(){ //当鼠标指针移入到元素上时触发。。。

}  

//定义和用法 //onmouseout 当鼠标指针移出元素时触发。---onmouseleave事件不支持冒泡 window.onmouseout= function(){ //当鼠标指针移出元素时触发。。

} 

//在拖动目标上触发事件 (源元素): //ondragstart - 用户开始拖动元素时触发--拖放图片时会带图片虚影 window.ondragstart= function(){ //用户开始拖动元素时触发。。

} 

//在拖动目标上触发事件 (源元素): //ondrag - 元素正在拖动时触发 window.ondrag= function(){ //元素正在拖动时触发。。

} 

//在拖动目标上触发事件 (源元素): //ondragend - 用户完成元素拖动后触发 window.ondragend= function(){ //用户完成元素拖动后触发。。

} 


 // 释放目标时触发的事件:

//ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 window.ondragenter= function(){ //当被鼠标拖动的对象进入其容器范围内时触发此事件。。

} 

// 释放目标时触发的事件: //ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 window.ondragover= function(){ //当某被拖动的对象在另一对象容器范围内拖动时触发此事件。。

} 

// 释放目标时触发的事件: //ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件 window.ondragleave= function(){ //当被鼠标拖动的对象离开其容器范围内时触发此事件。。

}  

// 释放目标时触发的事件:--外部图片-比例图片拖拽上传

//ondrop - 在一个拖动过程中,释放鼠标键时触发此事件 window.ondrop= function(){ //在一个拖动过程中,释放鼠标键时触发此事件。。 //阻止进行拖拽时浏览器的默认行为,即自动打开图片--ondragover-也要加上阻止默认事件 e.preventDefault();

   //方法一:获取拖拽图片的数组
   e.dataTransfer.files
    //方法二,这种方法另辟蹊径,巧妙的运用了forEach函数,经实验可成功获取文件
   var files = [];
  [].forEach.call(e.dataTransfer.files, function(file) {
    files.push(file);
  },false);
} 

//定义和用法 //onchange 在元素值被改变时运行的脚本。。
window.onchange = function(e){ //在元素值被改变时运行的脚本。 console.log(e.target.value) }

//定义和用法 //onfocus 当元素获得焦点时运行的脚本。
window.onfocus = function(e){ // 当元素获得焦点时运行的脚本。 console.log('onfocus') }

//定义和用法 //onblur 元素失去焦点时运行的脚本。
window.onblur = function(e){ //元素失去焦点时运行的脚本。 console.log('onblur') }