JavaScript DOM 事件

最新推荐文章于 2021-07-31 22:23:57 发布

是六月

最新推荐文章于 2021-07-31 22:23:57 发布

阅读量149

点赞数

分类专栏：前端JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45929716/article/details/105080542

版权

前端JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

欢迎访问的我的个人博客http://liubofeng.com/

一、什么是事件

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

二、HTML事件

语法：<tag 事件=“执行脚本”>
功能：在HTML元素上绑定事件。
说明：执行脚本可以是一个函数的调用。

三、DOM0级事件

语法：ele.事件=执行脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用。

四、鼠标事件

名称	定义和用法
onload	页面加载完成之后立即触发
onclick	鼠标点击时触发
onmouseover	鼠标滑过时触发
onmouseout	鼠标离开时触发
onfocus	获得焦点时触发
onblur	失去焦点时触发
onchange	域的内容改变时发生
onsubmit	表单中的确认按钮被点击时发生
onmousedown	鼠标按钮在元素上按下时触发
onmousemove	在鼠标指针移动时发生
onmouseup	在元素上松开鼠标按钮时触发
onresize	当调整浏览器窗口的大小时触发
onscroll	拖动滚动条滚动时触发

编程示例：
（1）当点击按钮时，按钮的字体颜色变成红色
（2）当鼠标离开按钮时，字体颜色变成灰色

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>2-14</title>
  <script>
   window.onload=function()
   {
    var ip=document.getElementById("ip")
    ip.onclick=function ()
    {
     this.style.color="red"     
    }
    ip.onmouseout=function ()
    {
     this.style.color="gray"
    }
   }
  </script>
 </head>
 <body>
  <input type="button" value="点击改变按钮字体颜色" id="ip">
 </body>
</html>

五、键盘事件与keyCode属性

名称	定义
onkeydown	在用户按下一个键盘按键时发生
onkeypress	按下键盘按键时发生(只响应字母与数字符号)
onkeyup	在键盘按键被松开时发生

keyCode：返回onkeypress、onkeydown 或 onkeyup
事件触发的键的值的字符代或者的键的代

编程示例:
实现：
（1）在文本域中输入文本，文本域的字数限制在30个字以内。
（2）每当用户输入一个字，就要提示还能输入多少个字
（3）当用户输入的文本超出了30个字时，要提示用户超出了多少字

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>4-5</title>
  <style>
   
  </style>
  <script>
   window.onload=function()
   {
    var toal=30;
    var text=document.getElementById("text")
    var count=document.getElementById("count")
    var ch=document.getElementById("ch")
    text.onkeyup=function()
    {
     var len=text.value.length
     var allow=toal-len
     if(text.value.length<=30)
     {
      
      count.innerHTML=allow
     }
     else
     {
      ch.innerHTML="您已超出"+(len-30)+"字"
     }
    }
   }
  </script>
 </head>
 <body>
  <p>字数限制在30字内，<span id="ch">您还可以输入<b id="count">30</b> 字</span></p>
  <textarea cols="50"  rows="7"  id="text"></textarea>
 </body>
</html>

是六月

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM 事件

一、什么是事件事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。二、HTML事件语法：<tag 事件=“执行脚本”>功能：在HTML元素上绑定事件。说明：执行脚本可以是一个函数的调用。三、DOM0级事件语法：ele.事件=执行脚本功能：在DOM对象上绑定事件说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用。四、鼠标事件名称定义和用法...
复制链接

扫一扫

专栏目录