JavaScript——DOM事件

最新推荐文章于 2022-08-03 15:40:21 发布

Abby_zzy

最新推荐文章于 2022-08-03 15:40:21 发布

阅读量223

点赞数

文章标签：鼠标时间事件委托事件模型事件对象

本文链接：https://blog.csdn.net/Abby_zzy/article/details/88601729

版权

事件对用户操作做出反应：

1.当用户点击鼠标时
2.当网页已加载时
3.当图像已加载时
4.当鼠标移动到元素上时
5.当输入字段被改变时
6.当提交 HTML 表单时
7.当用户触发按键时

DOM事件-使用方法

方法一：

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

方法二（从事件处理器调用一个函数）：

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(ele)
{
ele.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>

方法三(使用 HTML DOM 来分配事件）：

document.getElementById(ele).onclick=function(){
    “代码块”
}
function fun1(){
    “代码块”
}
document.getElementById(ele).onclick=function(){fun1() };

窗口事件属性

**onload：**当文档加载后运行脚本。
**onresize：**当试图窗口调整大小时，执行脚本（方法体中的代码）。

例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script>
      /*当页面加载时。。。。发生什么事情。
      在初始化的时候,向服务端请求的过程。
      */
      window.onload = function(){
        alert('页面加载中......');
      }
      /*当试图窗口大小发生改变时：执行脚本(方法体中代码)
       */
      window.onresize = function(){
        alert('窗口变小了');
      }
    </script>
  </body>
</html>

监听滚动条

onscroll：当页面内容超出页面试图的大小时，出现滚动条控制。

例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      p{
        height: 300px;
      }
    </style>
  </head>
  <body>
    <p>让页面出现滚动条</p>
    <p>让页面出现滚动条</p>
    <p>让页面出现滚动条</p>
    <p>让页面出现滚动条</p>
    <p>让页面出现滚动条</p>
    <script>
      /*不规范写法：因为同步，一旦中间有某个程序执行时间长
       *下面的其他的程序都处于等待状态。
       */
      window.onscroll = function(){
        alert('出现滚动条了');
      }
    </script>
  </body>
</html>

鼠标事件

onclick	当用户点击某个对象时调用的事件句柄。
oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发
ondblclick	当用户双击某个对象时调用的事件句柄。
onmousedown	鼠标按钮被按下。
onmouseenter	当鼠标指针移动到元素上时触发。
onmouseleave	当鼠标指针移出元素时触发
onmousemove	鼠标被移动。
onmouseover	鼠标移到某元素之上。
onmouseout	鼠标从某元素移开。
onmouseup	鼠标按键被松开。

onclinck点击事件–常用：
点击事件：是一个累加出发的触发的过程，每次点击都是上次点击后的结果，
基础上进行事件触发的,而不是从初始化进行触发的。
单独封装函数每次启动,执行完毕函数体中内容都会释放掉,

例一：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      #btn{
        width: 50px;
        height: 50px;
        border: 2px solid salmon;
      }
    </style>
  </head>
  <body>
    <div id="btn" onclick="cl()"></div>
    //方法三：
    <h1 onclick="this.innerHTML='Gun'">Come On</h1>
    <script>
      /*//方式一：绑定点击事件
      document.getElementById('btn').onclick=function(){
        alert('hello world');
      }*/
      
      /*//方式二:从事件处理器调用一个函数
      function cl(){
        alert('hello boy');
      }*/
      
    </script>
  </body>
</html>

例二：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      .box{
        width: 100px;
        height: 100px;
        background: red;
      }
      #btn{
        width: 50px;
        height: 30px;
        border: 3px solid slateblue;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div id="btn"></div>
    <script>
      var box = document.getElementsByClassName('box')[0];
      var btn = document.getElementsByClassName('btn');
      
      box.onmousedown = function () {
              console.log('onmousedown')
          }
          box.onmouseenter = function () {
              console.log('onmouseenter')
          }
          box.onmousemove = function () {
              console.log('鼠标放上onmousemove来了')
          }
          box.onmouseout = function () {
              console.log('onmouseout')
          }
    </script>
  </body>
</html>

表单事件

onblur	元素失去焦点时触发
onchange	该事件在表单元素的内容改变时触发( , , , 和 )
onfocus	元素获取焦点时触发
onfocusin	元素即将获取焦点时触发
onfocusout	元素即将失去焦点时触发
oninput	元素获取用户输入时触发
onreset	表单重置时触发
onsearch	用户向搜索域输入文本时触发 ( <input=“search”>)
onselect	用户选取文本时触发 ( 和 )

最低0.47元/天解锁文章

Abby_zzy

关注

0
点赞
踩
1

收藏

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

事件对用户操作做出反应：1.当用户点击鼠标时2.当网页已加载时3.当图像已加载时4.当鼠标移动到元素上时5.当输入字段被改变时6.当提交 HTML 表单时7.当用户触发按键时DOM事件-使用方法方法一：&lt;h1 onclick="this.innerHTML='谢谢!'"&gt;请点击该文本&lt;/h1&gt;方法二（从事件处理器调用一个函数）：&lt;!DOCTY...
复制链接

扫一扫