当前位置: 首页 > JS > 绑定点击事件(模拟鼠标事件)、模拟html事件

绑定点击事件(模拟鼠标事件)、模拟html事件

  • 分类:JS
  • 本文标签: js事件
  • 发布时间:2015-09-16 15:47:46
  • 作者:Ferman
  • 查看数: 190

在逛商城的时候,在商品的详情页,有一个购买按钮,但是我们鼠标下滑后看不到购买按钮时,会出现一个吸顶的导航条,这个条上也有一个购买按钮,其实这两个按钮的作用是一样的,但是他们走的代码是不一样的,如果将同样的代码写入他们各自的点击方法中,那么维护起来非常麻烦,一不小心也会漏掉。这里就介绍下如果有A、B两个按钮,那么点击这两个按钮是一样的效果,处理的思路是点击B按钮就按流程走,但是点击A按钮时模拟一下点击B,这样效果就会一样,这就是模拟鼠标事件:

具体的js代码如下:

//点击B按钮,正常处理
B.onclick = function(){
    console.log('b');
}
//点击A按钮,绑定到B按钮
A.onclick = function(){
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click',true,true,document.defaultView,0,0,0,0,0,
    false,false,false,false,0,null);
    B.dispatchEvent(event);
}

模拟HTML事件,其实与模拟鼠标事件的原理是一样,就是创建的事件对象不相同而已,有一个例子:

比如有A、B两个input文本框,要求必须是填完A以后才能填B,否则B不允许填写,下面就给出模拟HTML时间的一个例子:

html代码:

<input type="text" name="a" id="A"></input>
<input type="text" name="b" id="B"></input>

模拟HTML事件js处理代码

//A、B,必须先填写A,否则点击B无作用,B不会获取焦点
 document.getElementById("B").onfocus = function() {
     var target = document.getElementById("A");
     if (!target.value) {
         var event = document.createEvent("HTMLEvents");
         event.initEvent("focus", true, false);
         target.dispatchEvent(event);
     }
 }
 document.getElementById("A").onfocus = function() {
     this.focus();
 }

其实除了上面的模拟鼠标事件和模拟HTML事件外,还有模拟键盘事件、模拟dom的变动时间,但是后两者可能用的不太多,如果想要了解的话,推荐大家看一本书《JavaScript高级程序设计》,这本书里面可以学到很多东西。


转载时请以 超链接的形式 注明:转自Ferman

                  

About me