JS常用事件

事件
onclick  点击事件
onload  用户进入某个页面的时候触发(onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。)
onunload  用户离开某个页面的时候触发(onload 和 onunload 事件可用于处理 cookie。)
onchange  内容变化事件(常结合对输入字段的验证来使用)
onmouseover  鼠标移动到HTML元素上方的事件
onmouseout  鼠标移出HTML元素上方的事件
onmousedown  鼠标按下的时候触发的事件
onmouseup  鼠标弹起触发的事件(onmousedown,onmouseup和onclick区别,onclick是鼠标完成点击事件的时候触发的事件)
onfocus  元素获取焦点事件
onblur  元素失去焦点事件
onabort  图像的加载失败
ondblclick  双击事件
onerror  当加载图像和文档时发生错误
onkeydown  键盘按键被按下发生的事件
onkeyup  键盘按键被松开发生的事件
onkeypress  键盘按键按下并松开发生的事件
onmousemove  鼠标移动
onresize  窗口或者框架被重新调整大小
onselect  文本被选中
onreset  重置按钮被点击
onsubmit  提交按钮被点击

事件绑定几种方法

绑定事件的几种方法

  1、行内绑定(缺点: 不利于后期维护)

    image

  2、动态绑定

    获取到dom元素,并在元素上绑定事件

    image

    (行内绑定中,其事件处理中的this指向了全局window对象;动态绑定中,其事件处理中的this指向了当前正在操作的dom对象)

  3、事件监听

    image

    处理表格或者列表中的数据的时候使用事件委托的方式,只绑定一次事件,避免性能的损耗。

  4、jquery绑定事件

    4.1 bind绑定

    image

    (以下是简写)

    image

    4.2 on绑定(on(events,[selector],[data],fn))

    image

    image

    4.3 更多

    绑定事件的方法还有live 和 delegate。

    几种方法之间的差别,bind()的事件函数只能针对已经存在的元素进行事件的设置。如果你想对动态创建的元素bind()事件,是没有办法达到效果的,但是live(),on(),delegate()均支持未来新添加元素的事件设置,现在基本已经使用on替换掉另外几种方法。

posted @ 2022-09-06 10:26  huangchun0121  阅读(418)  评论(0)    收藏  举报