>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 29563 个阅读者 刷新本主题
 * 贴子主题:  JavaScript处理事件 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2019-08-14 15:17:32     消息  查看  搜索  好友  邮件  复制  引用

  

JavaScript 处理 事件

         HTML 事件是发生在 HTML 元素上的事情。

         当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。            

HTML 事件

      HTML 事件可以是浏览器行为,也可以是用户行为。

      以下是 HTML 事件的范例:    
  •   HTML 页面完成加载
  •   HTML input 字段改变时
  •   HTML 按钮被点击
        通常,当事件发生时,你可以做些事情。

         在事件触发时 JavaScript 可以执行一些代码。

         HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素。

         单引号:
          
         <some-HTML-element
some-event= ' JavaScript 代码 '>

         双引号:

          <some-HTML-element
some-event= " JavaScript 代码 ">

         在以下范例中,按钮元素中添加了 onclick 属性 (并加上代码):            

范例

           < button   onclick = " getElementById('demo').innerHTML=Date() " >现在的时间是?</ button >

        以上范例中,JavaScript 代码将修改 id="demo" 元素的内容。

         在下一个范例中,代码将修改自身元素的内容 (使用 this.innerHTML):              

范例

           < button   onclick = " this.innerHTML=Date() " >现在的时间是?</ button >

                        
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小 JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用:
            

范例

           < button   onclick = " displayDate() " >现在的时间是?</ button >

常见的HTML事件

     下面是一些常见的HTML事件的列表:

    
事件 描述
onchange  HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
            

  JavaScript 可以做什么?

     事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:    
  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性
  • 等等 ...
     可以使用多种方法来执行 JavaScript 事件代码:    
  • HTML 事件属性可以直接执行 JavaScript 代码
  • HTML 事件属性可以调用 JavaScript 函数
  • 你可以为 HTML 元素指定自己的事件处理程序
  • 你可以阻止事件的发生。
  • 等等 ...
程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-21 11:25:11 重新编辑]
  Java面向对象编程-->图形用户界面(上)
  JavaWeb开发-->使用过滤器
  JSP与Hibernate开发-->持久化层的映射类型
  Java网络编程-->客户端协议处理框架
  精通Spring-->
  Vue3开发-->创建综合购物网站应用
  JavaScript数组去重(12种方法)
  最新的Vue面试题大全含源码级回答,吊打面试官系列
  前端面试官指导前端面试攻略
  BootStrap, React, Vue的比较
  JS 循环删除数组
  JavaScript中数组的常用方法(含ES6)
  14个JavaScript优化建议
  AJAX获取服务器响应
  SQL NULL 值
  HTML DOM Image图片对象
  HTML 头部的元素的用法
  JavaScript 代码规范
  JavaScript 调试
  jQuery Mobile 事件
  Android 广播接收器(Broadcast Receivers)
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。