一

事件类型 1.文档事件 （1）beforeunload beforeunload事件当窗口将要关闭，或者document和网页资源将 要卸载时触发。它可以用来防止用户不当心关闭网页。 window.onbeforeunload = function() {  if (textarea.value != textarea.defaultValue) {    return '你确认要离开吗？';  } };

beforeunload事件：

window.onbeforeunload = function(){

　　return "确定要离开此页面吗？";

}

defaultValue：可以获取文本框的value的值。

input.onfocus = function(){

　　if(this.value == this.defaultValue){

　　　　this.value = "";

　　　　this.style.background = "#fff";

}

}

input.onblur = function(){

　　if(this.value == ""){

　　　　this.value = this.defaultValue;

}

}

例子二：

window.onload=function(){
    var oInput=document.getElementById('input1');
    oInput.onfocus=function(){
        if(oInput.value==oInput.defaultValue){
            oInput.value='';
            this.style.color='#000';
            console.log(111);
        }
    };
    oInput.onblur=function(){
        if(!oInput.value){
            oInput.value=oInput.defaultValue;
            this.style.color='#999';
        }
    }
};

（2）load、error： load事件在页面加载成功时触发，error事件在页面加载失败时触发。注意，页面从浏览器缓存加载，并不会触发load事件。
（3）DOMContentLoaded 当HTML文档下载并解析完成以后，就会在document对象上触发 DOMContentLoaded事件。这时，仅仅完成了
HTML文档的解析 （整张页面的DOM生成），所有外部资源
（样式表、脚本、iframe 等等）可能还没有下载结束。也就是说，这个事件比load事件，发 生时间早得多。
 document.addEventListener("DOMContentLoaded", function(event) {  console.log("DOM生成"); });
（4）readystatechange readystatechange事件发生在Document对象和XMLHttpRequest对 象，当它们的readyState属性发生变化时触发。
 document.onreadystatechange = function ()
 {  if (document.readyState == "interactive") {    // ...  } }
readyState//
  • uninitialized - 还未开始载入
  • loading - 载入中
  • interactive - 已加载，文档与用户可以开始交互
  • complete - 载入完成

（5）scroll scroll事件在文档或文档元素滚动时触发。

eg:

　　

div{
    width: 100px;
    height: 100px;
    overflow: scroll;
}
var div = document.querySelector("div");
div.onscroll = function(){
    console.log(111);
}

（6）resize resize事件在改变浏览器窗口大小时触发，发生在window、body、 frameset对象上面。

var resizeMethod = function(){  if (document.body.clientWidth < 768) {    console.log('移动设备');  } };

window.addEventListener("resize", resizeMethod, true);

 

2.焦点事件

（1）focus Element节点获得焦点后触发，该事件不会冒泡。

（2）blur Element节点失去焦点后触发，该事件不会冒泡。

3.键盘事件 键盘事件用来描述键盘行为，主要有keydown、keypress、keyup 三个事件。 （1）keydown 按下键盘时触发该事件。 （2）keypress 只要按下的键并非Ctrl、Alt、Shift和Meta，就接着触发keypress事 件。 （3）keyup 松开键盘时触发该事件。

4.触摸事件 （1）touchstart 用户接触触摸屏时触发，它的target属性返回发生触摸的Element节点。 （2）touchend 用户不再接触触摸屏时（或者移出屏幕边缘时）触发 （3）touchmove 用户移动触摸点时触发

（4）clientX、clientY clientX属性和clientY属性，分别表示触摸点相对于浏览器视口左上 角的横坐标和纵坐标，与页面是否滚动无关。

（5）screenX、screenY screenX属性和screenY属性，分别表示触摸点相对于屏幕左上角 的横坐标和纵坐标，与页面是否滚动无关。

（6）pageX、pageY pageX属性和pageY属性，分别表示触摸点相对于当前页面左上角 的横坐标和纵坐标，包含了页面滚动带来的位移。

 

事件委托： 事件代理

因为子元素太多，所以不可能给每一个子元素，添加事件

给父级添加事件，通过冒泡事件，使得可以实现

var ul = document.querySelector('ul');

ul.addEventListener('click', function(event) {

 if (event.target.tagName.toLowerCase() === 'li') {    // some code  } });

 

6.Event （1）preventDefault()：阻止默认事件

（2）stopPropagation()：stopPropagation方法阻止事件在DOM中 继续传播，防止再触发定义在别的节点上的监听函数。
function stopEvent(e) { e.stopPropagation(); } el.addEventListener('click', stopEvent, false);

e.stopPropagation() 阻止冒泡；

 

target：当前真正事件触发者;

ul.addEventListener("click",function(e){

e.target.innerHTML;

})

节省内存 ，代码优化，

tagName 是大写的 ；可以用toLowerCase改变

阻止默认行为： eg：a有跳转功能， e.preventDefault();可以阻止事件默认行为

currenTarget和 target：

currentTarget始终是监听事件者  target是事件真正的触发者

e.target

 

this：

7.this关键字 实际编程中，监听函数内部的this对象，常常需要指向触发事件的 那个Element节点。 // HTML代码为 // <p id="para">Hello</p> var id = 'doc'; var para = document.getElementById('para'); function hello(){  console.log(this.id); } para.addEventListener('click', hello, false);