前端事件大全

加on和不加on的区别:

        1.加on的是绑定事件,绑定在某个元素上,当该元素满足事件条件时执行,示例 : 

<script type="text/javascript">   
function change(){   
alert("onclick");   
}   
</script>  
<button id="btn3" onclick="change()">dd</button>   

        2.不加on的是方法,作用是,当调用这个方法的元素满足事件状态时,执行事件方法中的function方法代码

<script type="text/javascript">   
$(function(){   
    $("#btn4").click(function(){   
        alter("1");
    });   
});   
</script>  
<button id="btn4">ee</button> 

提示:两者用法有些许不同,是两个感念,但本质一样,加on的是在元素中绑定一个在js中写好的方法,不加on是获取一个元素,给他加上事件方法

注意:

        1 . 事件方法中不要直接写代码,要写function(){}方法后在里面写代码

        元素.click(function(){

                执行操作:

        });

        2.onclick绑定的方法不要写在${function(){}}中, 既文档加载完成时执行的代码中,不然调用的那个方法无效,是不执行的,可以自己屡屡思路就知道的缘故

 ( 因为写在文档加载完成时里面的话 , 加载完页面后那个声明在那里面的方法就相当于" 被执行过一遍了 " , 但是因为文档加载完成时里面的代码没有调用那个方法,所以你看到不他执行过后的效果,然后你再在其他地方调用这个已经被执行过然后丢进垃圾缓存里的东西,是找不到的,就算有,对程序而言也没有,就算联想到也没有,不是说js的方法只能被执行一遍就不执行了,是因为他写在加载文档完成时执行了,加载完成时执行一遍后就不会再执行了,简单说,作用域不同 )

鼠标事件

事件	描述
onclick	鼠标点击时触发
ondbclick	鼠标双击时触发
onmousedown	鼠标按下时触发 （只是按下的瞬间）
onmouseleave	鼠标移除事件
onmouseover	鼠标划过，经过，移进时触发
onmousemove	鼠标移动，指的是移动,时触发 (与over的区别在于over只是在移进时触发一次，而move只要鼠标移动就会触发)
onmouseout	移开时触发
oncontextmenu	鼠标右键菜单展开时触发。 在此事件中 ev.preventDefault() 可阻止右键菜单的弹出。

键盘事件

事件	描述
onkeydown	键盘被按下动作时触发
onkeyup	键盘被松开时触发
onkeypress	某个键盘的键被按下或按住时触发 [ 键盘 < 字符键 ( 除去那些功能键，例如：Ctrl shift等 ) > 被按下,而且如果按住不放的话，会重复触发此事件 ]

UI事件

事件	描述
window.onload	页面元素（包含图片，多媒体等）加载完成后执行
window.onscroll	页面滚动事件
window.onresize	窗口或者框架被重新调整大小时

表单事件

事件	描述
onblur	失去焦点时（表单验证最常用）
onfocus	获得焦点时触发
onchange	内容改变且失去焦点时
change	状态发生改变事件
oninput	内容改变时
onreset	重置按钮被点击
onsubmit	提交按钮被点击
onselect	输入框文本被选中

事件

事件	描述
onabort	图像加载被中断
ondblclick	鼠标双击某个对象
onerror	当加载文档或图像时发生某个错
onload	某个页面或图像被完成加载
onmouseup	某个鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被调整尺寸
ondragstart	用户开始拖动元素时触发
ondrag	元素正在拖动时触发
ondragend	用户完成元素拖动后触发
ondragenter	当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover	当被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave	当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop	在一个拖动过程中，释放鼠标键时触发此事件