首页 > 代码库 > DOM事件类型总结大全

DOM事件类型总结大全

unload:事件在用户退出页面时发生

    window.onload = function(){

      return "页面关闭!";

    };

onblur:失去焦点发生变化

    window.onblur = function(){

      inp.value = http://www.mamicode.com/inp.value.toUppercase();

    };

onfocus:点击文本框会获得焦点发生

    inp.focus = function(){

      alert(‘弹出的内容‘);

    };

onselect:要选中文本框中的内容会执行的事件

    inp.onselect = function(){

      alert(‘要执行的内容‘);

    };

onchange:事件会在域的内容发生改变时发生

    inp.onchange = function(){

      alert(‘要执行的内容‘);

    };

onreset:当点击重置的时候才会发生

    form.onreset = function(){

      //点击重置,是form;

    };

onsumbit:点击提交 

    form.onsumbit = function(){

      alert(‘要执行的内容‘);

    };

onresize:当窗口发生大小变换的时候就会执行

    window.onresize = function(){

      alert(‘要执行的内容‘);

    };

scrollBy、scrollTo:相对于自己之前的位置发生偏移,一个x一个y轴为参数

    function scroll(){

      window.scrollBy(100,100);

      window.scrollTo(100,100);//绝对,固定

    };

ondbclick:双击发生变化

    inp.ondbclick = function(){

      inp.value = "http://www.mamicode.com/我双击了";

    };

onclick:点击发生变化

    inp.onclick = function(){

      inp.value = "http://www.mamicode.com/我点击了";

    };

onmouseover:鼠标经过会发生变化,类似hover效果

    inp.onmouseover = function(){

      inp.value = "http://www.mamicode.com/我鼠标滑过了";

    };

onmouseout:鼠标移除会发生变化

    inp.onmouseout = function(){

      inp.value = "http://www.mamicode.com/我鼠标移除来了了";

    };

onmousedown:鼠标按键按下去会发生变化

    inp.onmousedown = function(){

      inp.value = "http://www.mamicode.com/我鼠标按下来了";

    };

onmouseup:按键按下去并释放松开会发生变化

    inp.onmouseup = function(){

      inp.value = "http://www.mamicode.com/我鼠标按下并释放了";

    };

onkeydown:按下键盘去会发生变化

    inp.onkeydown = function(){

      inp.value = "http://www.mamicode.com/我按下键盘了";

    };

onkeyup:按下键盘去会发生变化

    inp.onkeyup = function(){

      inp.value = "http://www.mamicode.com/我松开键盘了";

    };

DOM事件类型总结大全