WEB前端(6)—— JavaScript 事件处理

10 篇文章 1 订阅
5 篇文章 0 订阅

事件的介绍:

事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水。当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小。我们可以理解为JS事件指在浏览器窗体或者 HTML 元素上发生的,可以触发 JS 代码块运行的行为。

窗口事件:

窗口事件主要包括load,unload,abort,error,select,resize,scroll事件。

load事件:

在 JS 中,onload 事件在页面完全加载完毕的时候触发。该事件包含所有的图形图像、外部文件(如 CSS、JS 文件等)的加载,也就是说,在页面所有内容全部加载之前,任何 DOM 操作都不会发生。为 window 对象绑定 onload 事件的方法有两种。

window.onload = f;
function f() {
    alert("页面加载完毕");
}
<body onload="f()">
<script>
    function f() {
        alert("页面加载完毕");
    }
</script>


鼠标事件:

在 JS 中,鼠标事件是 Web 开发中最常用的事件类型,鼠标事件类型详细说明如下表所示:

事件类型说明
click单击鼠标左键时发生,如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时,同样会触发这个事件
dblclick  双击鼠标左键时发生,如果右键也按下则不会发生
mousedown单击任意一个鼠标按钮时发生
mouseout鼠标指针位于某个元素上且将要移出元素的边界时发生
mouseover鼠标指针移出某个元素到另一个元素上时发生
mouseup松开任意一个鼠标按钮时发生
mousemove鼠标在某个元素上时持续发生
<p>鼠标事件</p>
<input type="text" id="text" />
<script>
    var p1 = document.getElementsByTagName("p")[0];  //获取段落文本的引用指针
    var t = document.getElementById("text");  //获取文本框的指针引用
    function f () {  //事件侦测函数
        var event = event || window.event;  //标准化事件对象
        t.value = (event.type);  //获取当前事件类型
    }
    p1.onmouseover = f;  //注册鼠标经过时事件处理函数
    p1.onmouseout = f;  //注册鼠标移开时事件处理函数
    p1.onmousedown = f;  //注册鼠标按下时事件处理函数
    p1.onmouseup = f;  //注册鼠标松开时事件处理函数
    p1.onmousemove = f;  //注册鼠标移动时事件处理函数
    p1.onclick = f;  //注册鼠标单击时事件处理函数
    p1.ondblclick = f;  //注册鼠标双击时事件处理函数
</script>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值