javascript 点击一个按钮自动点击另一个 js自动点击页面按钮

转载

feiry 2023-07-22 15:30:07

文章标签 javascript 数组 html 自定义 文章分类 JavaScript 前端开发

js自动触发点击事件

//  进入页面立即触发
		(()=>{
			//  兼容IE
		    if(document.all) {
		        document.getElementById("aid").click();
		    }
		    //  兼容其它浏览器
		    else {
		        var e = document.createEvent("MouseEvents");
		        e.initEvent("click", true, true);
		        document.getElementById("aid").dispatchEvent(e);
		    }
		})();


//  三秒后模拟点击
setTimeout(function() {
    //  IE浏览器
    if(document.all) {
        document.getElementById("clickMe").click();
    }
    //  其它浏览器
    else {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById("btn").dispatchEvent(e);
    }
}, 3000);

以下来自

1、自动点击
//自动点击的方法 clickId 点击事件的id属性值字符串类型

function autoClick(clickId) {
    // IE
    if (document.all) {
        document.getElementById(clickId).click();
    }
    // 其它浏览器
    else {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById(clickId).dispatchEvent(e);
    }
}

document.all是什么？
document.all是IE 4.0及以上版本的专有属性，是一个表示当前文档的所有对象的数组，不仅包括页面上可见的实体对象，还包括一些不可见的对象，如html对象等等。all[] 已经被 Document 接口的标准的 getElementByid() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。尽管如此，这个 all[] 数组在已有的代码中仍然使用。

document.all的三个作用：
1、根据下标取元素：

语法： document.all[index];

index:要取的下标。

document.all(0)表示页面内第一个元素。

2、根据 name/id 取元素。

语法： document.all(“name/id” , index)

第二个参数index,可选。index表示如果有多个相同的name/id，取name/id集合中的第几个。当然id不应该重复。通过给某个元素设置id属性（id=aaaa）,然后用document.all.aaaa调用该元素。

在document.all数组里面，元素不分层次，是按照其在文档中出现的先后顺序，平行地罗列的。所以可以用数字索引来引用到任何一个元素。但比较常用的是用对象id来引用一个特定的对象，比如document.all[“element”]这样。

document.layers是Netscape 4.x专有的属性，是一个代表所有由储如

或对象的id属性来引用的，但是这里面不包含除此以外的其它元素。新的统一的标准用document.getElementById等系列方法来引用DOM对象，而且Netscape 6.0以后放弃了layers特征，虽然IE继续保留了document.all，但这最终没有成为DOM标准的一部分。

3、document.all可以判断浏览器是否是IE

if(document.all){ alert(“is IE!”); }

2、使用定时器 setInterval() 方法实现按钮自动触发onclick事件
默认已点击，可以在加载网页的时候使用 onload 方法实现一次点击。

以下例子，实现网页打开时默认弹出弹窗，在关闭弹窗后，每2秒钟自动点击一次弹出弹窗，完整的代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>自动点击例子</title>
</head>
<body onload="alert('这是默认点击弹窗')">
    <script type="text/javascript">
        setInterval(function () {
            if (document.all) {
                document.getElementById("buttonid").click();
            }
            else {
                var e = document.createEvent("MouseEvents");
                e.initEvent("click", true, true);
                document.getElementById("buttonid").dispatchEvent(e);
            }
        }, 2000);
    </script>
    <input id="buttonid" type="button" value="按钮" onclick="alert('这是自动点击弹窗')" />
    <style type="text/css">
        input {
            background: red;
            color: #fff;
            padding: 10px;
            margin: 20px;
        }
    </style>
</body>
</html>

3、JQuery自动触发事件的方法。具体如下：
常用模拟
有时候，需要通过模拟用户操作，来达到单击的效果。例如在用户进入页面后，就触发click事件，而不需要用户去主动单击。

在JQuery中，可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。

$(’#btn’).trigger(“click”);

这样，当页面加载完毕后，就会立刻输出想要的效果。也可以直接简写click()，来达到同样的效果：

$(’#btn’).click();

触发自定义事件
trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。例如为元素绑定一个“myClick”的事件，JQuery代码如下：

$('#btn').bind("myClick", function(){
 
  $('#test').append("<p>我的自定义事件.</p>");
 
});

//要触发这个事件，可以使用以下代码来实现：

$(’#btn’).trigger(“myClick”);
传递数据–trigger(type [,data])

trigger(type[，data])方法有两个参数，第1个参数是要触发的事件类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。

下面是一个传递数据的例子:

$(function(){
 
 $('#btn').bind("myClick", function(event, message1, message2){
 
     $('#test').append( "<p>"+message1 + message2 +"</p>");
 
 });
 
 $('#btn').click(function(){
 
  $(this).trigger("myClick",["我的自定义","事件"]);
 
 }).trigger("myClick",["我的自定义","事件"]);
 
})

执行默认操作

trigger()方法触发事件后，会执行浏览器默认操作。例如：