首页 > 软件开发 > JavaScript >

GIF动态图教程-JS语言23-DOM事件处理(实例)

来源:互联网 2023-03-16 23:58:51 版权归原作者所有,如有侵权,请联系我们

dsK办公区 - 实用经验教程分享!

方法/步骤

  • 1

    希望当用户单击按钮时,弹出一个窗口,最简单的方式是直接在标记中添加事件处理,如图操作,onclick表示鼠标单击时触发的事件处理。dsK办公区 - 实用经验教程分享!

    GIF动态图教程-JS语言23-DOM事件处理(实例)dsK办公区 - 实用经验教程分享!

  • 2

    上诉直接把事件处理代码放在DOM结构中是一种不推荐的做法,更好的做法是写在JavaScript中,这样DOM结构和JavaScript代码分开,利于页面维护,如图操作。dsK办公区 - 实用经验教程分享!

    GIF动态图教程-JS语言23-DOM事件处理(实例)dsK办公区 - 实用经验教程分享!

  • 2相关内容未经许可获取自百度经验
  • 3

    处理函数也可以被单独创建,再赋值给元素的onclick属性,如图操作。dsK办公区 - 实用经验教程分享!

    GIF动态图教程-JS语言23-DOM事件处理(实例)dsK办公区 - 实用经验教程分享!

  • 4

    onclick表示鼠标单击,而onmouseover表示鼠标滑过,如图操作,当鼠标移动到按钮时就触发事件,并没有单击。dsK办公区 - 实用经验教程分享!

    GIF动态图教程-JS语言23-DOM事件处理(实例)dsK办公区 - 实用经验教程分享!

  • 5

    onmouseout表示鼠标移出,如图操作,当鼠标在接触按钮时又移出触发事件。dsK办公区 - 实用经验教程分享!

    GIF动态图教程-JS语言23-DOM事件处理(实例)dsK办公区 - 实用经验教程分享!

  • 6

    注册onload事件,当页面加载完毕时,触发事件,this表示自身对象,如这里的this表示页面本身,如果在函数中this表示的就是函数自身。可以把this理解为简写形式,就是调用自身对象的。dsK办公区 - 实用经验教程分享!

    注意:onload事件有一个缺点,因为当页面加载完毕时,才会执行代码,就会造成页面加载缓慢。dsK办公区 - 实用经验教程分享!

    GIF动态图教程-JS语言23-DOM事件处理(实例)dsK办公区 - 实用经验教程分享!

  • 注意事项

    • 按住Ctrl键 鼠标滚动滑轮可以放大网页更清楚查看gif动态图。
    • 因gif动态图将重复播放。建议进入-步骤阅读模式-边看文字边单击图片放大看。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!dsK办公区 - 实用经验教程分享!


    标签: JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号