网络视频直播系统 Eclipse ISP caching rspec Zeptojs react视频教程 python开发安卓应用 spring源码下载 oracle给表增加字段 python获取数据类型 python基础语法 python条件判断 python函数大全 java环境 java队列 java基本类型 java基础类型 java集合遍历 php入门例子 ie模拟器 垃圾邮件数据集 0x0000004e 制作字幕的软件 渐变事件 idataparameter mssql 7个人 php四舍五入 dnf武极刷图加点 远程桌面管理软件 安卓adb pycharm中文版 python求和 apihook java表白代码 平均值符号怎么输入 加字幕软件 ps描边怎么用 加字幕的软件
当前位置: 首页 > 学习教程  > 

js 原生方法 -- 模拟浏览器的 点击事件

2020/10/16 18:03:27 文章标签: js原生点击事件

js 原生方法 – 模拟浏览器的 点击事件 1. 创建自定事件并监听 可看看 MDN 的 Evnet&#xff0c; CustomEvent 对象 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content&qu…

js 原生方法 – 模拟浏览器的 点击事件

1. 创建自定事件并监听

可看看 MDN 的 Evnet, CustomEvent 对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>simulate click</title>
</head>
<body>
  <input type="button" value="clickMe" id="demo_click">
  <script>
      
      const btn = document.getElementById('demo_click');
      btn.onclick = function () { //
        alert('click complete!');
      };
      // 1. 创建自定义事件
      const event = new Event('build');  // 自定义事件
       
      document.addEventListener('build', function (e) {
        console.log('dispatch');
      }, false); // dom 监听事件
      document.dispatchEvent(event); // dom触发事件
  </script>
</body>
</html>

模拟 浏览器的鼠标点击事件

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>simulate click</title>
</head>
<body>
  <input type="button" value="clickMe" id="demo_click">
  <script>
      
      const btn = document.getElementById('demo_click');
      btn.onclick = function () { //
        alert('click complete!');
      };
      simulateClick();
    // 2. 模拟 浏览器的鼠标点击事件
    // 2.1 可以触发 onclick 事件(先触发)
    // 2.2 可以触发 addEventListener 事件(后触发)
    // 2.3 jQuery 的事件绑定底层就是 addEventListener ,
      function simulateClick() { // 模拟 浏览器的鼠标点击事件
        const event = new MouseEvent('click', {
          view: window,
          bubbles: true,
          cancelable: true
        });
        btn.dispatchEvent(event);      
      }
  </script>
</body>
</html>

本文链接: http://www.dtmao.cc/news_show_300342.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?