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列表

 

 

 Javascripts 触发事件

 

 

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>

       

 

原创文章,作者:1402239773,如若转载,请注明出处:https://blog.ytso.com/277265.html

(0)
上一篇 2022年7月27日
下一篇 2022年7月27日

相关推荐

发表回复

登录后才能评论