ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

Javascripts 触发事件

2022-07-27 08:31:16  阅读:181  来源: 互联网

标签:触发 document JavaScript getElementById HTML 事件 元素 Javascripts


后端需要的前端知识

  • HTML+CSS+Js(超级熟练)
  • Js必会?:
    • 函数闭包?
    • DOM
      • id,name.tag
      • create,remove
    • BOM:浏览器对象模型
      • window
      • document

满足某些条件就会被触发例如单击

常用操作:

  1. 单击事件: onclick 最常用
  2. 双击事件: ondblclick
  3. 获得焦点事件: onfocus
  4. 失去焦点事件: onblur
  5. 鼠标移动事件: onm ousemove
  6. 鼠标离开事件: onm ouseout
  7. 鼠标抬起事件: onm ouseover
  8. 键盘抬起事件: onkeyup
  9. 页面加载事件: onl oad

要一个操作触发多个事件只需要在事件中以分号隔开即可

<input type="button" name="" id="" value="单击事件"  
onclick="testdanji();testsuanji()"/>

API列表

 

 

 

 

 

DOM

  • 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应
  • 查找 HTML 元素
    • 通过 id 找到 HTML 元素
      • var x=document.getElementById("intro");
    • 通过标签名找到 HTML 元素,例如查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素:
      • var x=document.getElementById("main");
        var y=x.getElementsByTagName("p");
    • 通过类名找到 HTML 元素
      • var x=document.getElementsByClassName("intro");
HTML DOM
  • HTML DOM 允许 JavaScript 改变 HTML 元素的内容,JavaScript 能够创建动态的 HTML 内容。

    • 例:在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。
      <!DOCTYPE html>
      <html>
      <body>
      
      <script>
      document.write(Date());
      </script>
      
      </body>
      </html>
       
  • 改变 HTML 内容
    •  修改 HTML 内容的最简单的方法是使用 innerHTML 属性。如需改变 HTML 元素的内容,请使用这个语法:document.getElementById(id).innerHTML=新的 HTML
    • <html>
      <body>
      
      <p id="p1">Hello World!</p>
      
      <script>
      document.getElementById("p1").innerHTML="新文本!";
      </script>
      
      </body>
      </html>

       

  • 改变 HTML 属性

    • 如需改变 HTML 元素的属性,请使用这个语法:document.getElementById(id).attribute=新属性值

    • <!DOCTYPE html>
      <html>
      <body>
      
      <img id="image" src="smiley.gif">
      
      <script>
      document.getElementById("image").src="landscape.jpg";
      </script>
      
      </body>
      </html>

       

       

  • 改变 HTML 样式

    • 如需改变 HTML 元素的样式,请使用这个语法:document.getElementById(id).style.property=新样式

    • <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>菜鸟教程(runoob.com)</title>
      </head>
      <body>
       
      <p id="p1">Hello World!</p>
      <p id="p2">Hello World!</p>
      <script>
      document.getElementById("p2").style.color="blue";
      document.getElementById("p2").style.fontFamily="Arial";
      document.getElementById("p2").style.fontSize="larger";
      </script>
      <p>以上段落通过脚本修改。</p>
       
      </body>
      </html>

       

HTML DOM 事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

 

HTML 事件的例子:

    • 当用户点击鼠标时
    • 当网页已加载时
    • 当图像已加载时
    • 当鼠标移动到元素上时
    • 当输入字段被改变时
    • 当提交 HTML 表单时
    • 当用户触发按键时
  • 如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:onclick=JavaScript
  • 在本例中,当用户在 <h1> 元素上点击时,会改变其内容:
    <!DOCTYPE html>
    <html>
    <body>
    <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
    </body>
    </html>
     
  • 如需向 HTML 元素分配 事件,您可以使用事件属性。
  • 向 button 元素分配 onclick 事件:
    
    <button onclick="displayDate()">点这里</button>
    在上面的例子中,名为 displayDate 的函数将在按钮被点击时执行。
  • onload 和 onunload 事件

    • onload 和 onunload 事件会在用户进入或离开页面时被触发。

      onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

      onload 和 onunload 事件可用于处理 cookie。

      <body onl oad="checkCookies()">
      

       

  • onchange 事件

    • onchange 事件常结合对输入字段的验证来使用。

      下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。

    • <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>菜鸟教程(runoob.com)</title>
      </head>
      <head>
      <script>
      function myFunction(){
          var x=document.getElementById("fname");
          x.value=x.value.toUpperCase();
      }
      </script>
      </head>
      <body>

       

 

标签:触发,document,JavaScript,getElementById,HTML,事件,元素,Javascripts
来源: https://www.cnblogs.com/yayuya/p/16523389.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有