精华内容
下载资源
问答
  • JavaScript自动触发事件

    万次阅读 2019-02-17 11:05:46
    有时候,我们需要代码自动触发对应的事件,而不需要人为操作。比如,一个按钮的点击事件,不要点击它,而让它自动执行。 首先定义事件,先按照传统的 onclick 方式来。(这里以点击某个标签事件为梨) var xx = ...

    有时候,我们需要代码自动触发对应的事件,而不需要人为操作。比如,一个按钮的点击事件,不要点击它,而让它自动执行。

    首先定义事件,先按照传统的 onclick 方式来。(这里以点击某个标签事件为梨)

    var xx = document.getElementById("xx");
    xx.onclick = function(){
            alert( this.innerHTML );
    }

    触发事件:

     xx.click();  // IE8+,chrome,FF

    也可以:

      xx.onclick();

    但是这种方式的本质是执行 onclick指向的函数。

    如果用 addEventListener 来添加事件 , xx.onclick() 这种方式就无法触发事件代码执行。

    综上,要触发事件,就使用类似  xx.click() 就行了。

    ----------------2019.8.4 更新 -----------------

    经过查阅资料,通过代码自动触发事件,还是用以下类似的代码更科学:

    代码触发事件:
    <button id="mybtn">按钮</button>
    <script>
        let btn = document.getElementById("mybtn");
        btn.addEventListener("mouseenter",function(){
           console.info("事件发生!");
        });
        // 不通过鼠标,自动 mouseenter 事件。其他事件也类推。
        let  ev = new Event("mouseenter");
        btn.dispatchEvent(ev);
    </script>

    new Event() 是创建一个事件对象。通过 标签 的 dispatchEvent 方法可以触发该事件。

    展开全文
  • JavaScript原生自动触发事件

    千次阅读 2020-05-11 09:06:47
    在jquery中提供了trigger()方法帮助我们自动触发事件,原理是什么呢?接下来让我们一探究竟! 一、eventType eventType共有5种类型: HTMLEvents:包括 'abort', 'blur', 'change', 'error', 'focus', 'load',...

     在有些情况下,我们需要程序逻辑自动触发元素的事件,例如js提供了click(), form提供了reset(),submit()等方法!在jquery中提供了trigger()方法帮助我们自动触发事件,原理是什么呢?接下来让我们一探究竟!

    一、eventType

    eventType共有5种类型:

    • HTMLEvents:包括 'abort', 'blur', 'change', 'error', 'focus', 'load', 'reset', 'resize', 'scroll', 'select', 'submit', 'unload'.

    • UIEevents :包括 'DOMActivate', 'DOMFocusIn', 'DOMFocusOut', 'keydown', 'keypress', 'keyup'.

    • MouseEvents:包括 'click', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup'.

    • MutationEvents:包括 'DOMAttrModified', 'DOMNodeInserted', 'DOMNodeRemoved','DOMCharacterDataModified','DOMNodeInsertedIntoDocument', 'DOMNodeRemovedFromDocument', 'DOMSubtreeModified'.

    上述加粗的是经常会用到的事件类型

    二、createEvent(eventType)

    eventType=MouseEvents,触发事件为click为例:

    document.body.onclick=function(){
        alert("hello")
    }
    var event = document.createEvent('MouseEvents');
    // initEvent接受3个参数:
    // 事件类型,是否冒泡,是否阻止浏览器的默认行为
    event.initEvent("click", false, true);
    //触发document上绑定的click事件
    document.body.dispatchEvent(event);
    

    通过el.dispatchEvent触发事件,聪明的你有没有想到vue里的$emit?

    三、自定义事件

    document.body.addEventListener("veb",function(e){
             alert(e.eventType)
    })
    var event = document.createEvent('HTMLEvents');
    // initEvent接受3个参数:
    // 事件类型,是否冒泡,是否阻止浏览器的默认行为
    event.initEvent("veb", false, true);
    //通过eventType传递事件信息
    event.eventType="I love Veblen"
    //触发document上绑定的click事件
    document.body.dispatchEvent(event);

     示例

    /*<input id="buttonid" type="button" value="按钮" onclick="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>

     

    展开全文
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>...script type="text/javascript"> setTimeout(()=>{ // 兼容.
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<button id="d1">你好</button>
    		<script type="text/javascript">
    			
    		setTimeout(()=>{
    			// 兼容IE
    			btn.onclick = function(){
    				console.log("d1");
    			}
    		    if(document.all) {
    		        document.getElementById("d1").click();
    		    }
    		    // 兼容其它浏览器
    		    else {
    		        var e = document.createEvent("MouseEvents");
    		        e.initEvent("click", true, true);
    		        document.getElementById("d1").dispatchEvent(e);
    		    }
    		},3000); // 3秒后执行	*/
    
    		</script>
    	</body>
    </html>
    

     

    展开全文
  • 主要介绍了javascript触发模拟鼠标点击事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 利用JavaScript代码可以帮助我们实现鼠标的自动点击事件。比如点击了按钮1以后,JavaScript代码会自动去点击下一个按钮,一直点击到按钮5才会停止(可根据实际情况进行相应的调整)。 效果图如下所示: 按钮1被...
  • 使用asp.net,在刷新页面的时候会自动触发服务器端的事件。举个简单的例子,如:一个注册页面,我们填写完注册信息之后,如果按F5刷新之后,会自动触发到Button事件上,这样就造成了又注册了一次的麻烦。 我先前的...
  • javascript 自动触发 按键盘操作 trigger

    万次阅读 2018-10-26 15:41:47
     的合法值和每个值创建的事件接口: 参数 事件接口 初始化方法 HTMLEvents HTMLEvent iniEvent() MouseEvents MouseEvent iniMouseEvent() UIEvents UIEvent ...

    回车键 keyCode 13

    HTMLElement.prototype.pressKey = function(code) {
    	var evt = document.createEvent("UIEvents");
    	evt.keyCode = code;
    	evt.initEvent("keydown", true, true);
    	this.dispatchEvent(evt);
    }

     

    test:

    document.body.onkeydown = function(e) {
        console.log("key pressed, code=" + e.keyCode);
    };
    
    document.body.pressKey(13);

     eventType 的合法值和每个值创建的事件接口:

    参数事件接口初始化方法
    HTMLEventsHTMLEventiniEvent()
    MouseEventsMouseEventiniMouseEvent()
    UIEventsUIEventiniUIEvent()

    参照文档:

    http://www.w3school.com.cn/xmldom/met_document_createevent.asp

    http://www.w3school.com.cn/xmldom/dom_event.asp

     

    展开全文
  • js原生和vue的自动触发事件

    千次阅读 2019-10-30 14:48:15
    有时我们需要自动触发点击事件 , 而不是人为点击 <body> <button id="btn">点击</button> <script> const btn = document.getElementById("btn"); btn.addEventListener("click", ...
  • js事件自动触发

    千次阅读 2019-07-29 16:27:40
    有些时候会遇到网页加载完成自动执行事件的情况,这里以点击事件为例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=...
  • js自动触发点击事件

    千次阅读 2020-08-18 10:23:28
    js自动触发点击事件 // 进入页面立即触发 (()=>{ // 兼容IE if(document.all) { document.getElementById("aid").click(); } // 兼容其它浏览器 else { var e = document.createEvent(...
  • 使用asp.net,在刷新页面的时候会自动触发服务器端的事件。举个简单的例子,如:一个注册页面,我们填写完注册信息之后,如果按F5刷新之后,会自动触发到Button事件上,这样就造成了又注册了一次的麻烦。 我先前的...
  • javascript 脚本主动触发鼠标事件

    千次阅读 2019-08-13 15:16:50
    js 通过程序主动触发dom节点的事件,可以通过dom提供的 createEvent / dispatchEvent来实现 document.createEvent(eventType) 参数:eventType 共5种类型: Events :包括所有的事件. HTMLEvents:包括 '...
  • html中自动触发事件

    万次阅读 2019-01-03 22:53:42
     在编写前端代码的时候,进行某个操作后希望系统能自动触发一个动作,比如自动触发button的单击动作,此时可以使用jquery的trigger来实现,  如$('#button1').trigger("click"); 表示自动触发id为...
  • jquery自动触发点击事件

    千次阅读 2020-06-30 16:31:10
    iframe内嵌页自动选中激发其父页面的点击事件。 纯手工解释: <html> //这是父级页面哦 <li > <a class="menuItem" th:href="@{/system/analyse}"><i id="reportAnalyse" class="fa fa-...
  • js按钮页面加载时自动触发事件

    千次阅读 2020-04-13 17:26:14
    js事件页面加载时自动触发 一般按钮自动点击触发事件 id是按钮id值 $('#id').trigger("click"); layui下拉框按钮自动点击触发事件 lay-filter_value是下拉框的lay-filter的值 data_value 是下拉框的值 var select =...
  • 主要介绍了中文输入法不触发onkeyup事件的解决办法,需要的朋友可以参考下
  • script type="text/javascript"> // 两秒后模拟点击 setTimeout(function() { // IE if(document.all) { document.getElementById("clickMe").click(); } // 其它浏览器 else { var...
  • JS自动触发onclick事件

    千次阅读 2020-04-04 21:40:07
    <div id="btn" οnclick="tip('...触发onclick</div> <script type="text/javascript"> function tip (msg){ alert(msg); } // 三秒后模拟点击 setTimeout(function() { // IE浏览器 if(docume...
  • 每当猴子们问我JavaScript和DOM里啥东西最牛逼时,我都会一巴掌打回去:卧槽还用问么当然是事件响应了啊!没它你能有时间和我讨论这个?你早去工地搬砖去了好么!浏览器没有事件响应就没有行为交互,那简直就是一夜...
  • 最近项目中遇到的问题,需要动态加载数据,而且当...最后在另一位博主的帖子里,看到了使用原生 JavaScript 触发 oninput 事件的方法 var evt = document.createEvent('HTMLEvents') evt.initEvent('input', t..
  • 今天做项目因为添加了一个需求,我需要在某种情况下,在webview页面加载完成后,不在当前页面停留,自动触发某个元素的点击事件,自动加载到下一个页面。 HTML的源代码: 我现在要做的就是自动触发第一张图片的...
  • 一次select手动赋值操作发现没有该select的选中事件,琢磨了下做如下操作即可。 写了个common.js常用操作的工具类,修改了赋值方法。 layui.define(['layer','form','laydate','dtree','carousel'],function (e) { ...
  • jQuery自动触发事件trigger使用

    千次阅读 2015-11-26 22:34:50
    触发click事件,而无需主动点击。 比如以下代码: body> a href="#" onclick="javascript:document.getElementById('d').innerHTML='x1'">点击1a> a href="#" onclick="javascript:document.g
  • 大家都知道 jQuery有个 trigger 方法,可以触发被选元素的指定事件类型。 那么在原生js中怎么实现 trigger 的方法呢?首先上代码: 二、如果我想在不实际改变浏览器窗口大小的情况下触发 window的 resize 事件可不...
  • 关注可了解更多的教程及排版技巧。...标签的点击触发以及自动触发的问题 a标签的点击事件,直接给a标签设置id,进而对a进行点击即可; <ahref="javascript:;"class="next-stepbtnmt50"id="submit">提交预...
  • 触发click事件,而无需主动点击。 点击1 点击2 点击3 实现效果为'点击1'页面上将显示x1 ,'点击2'页面上显示x2 … 但需要实现首次进入页面为默认是'点击1' 在jQuery中,可以使用trigger()方法完成...
  • 进入页面自动执行点击事件,跳转的有些快,注意看那一瞬间的变化! <html lang="en"> <head> <meta charset="UTF-8"> , initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> 测试title>...
  • javaScript学习笔记(一)js基础

    万次阅读 多人点赞 2018-09-21 10:07:18
    JavaScript是目前web开发中不可缺少的脚本语言,js不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JavaScript代码。 诞生于1995年,当时的主要目的是验证表单的数据是否合法。 Java...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 116,772
精华内容 46,708
关键字:

javascript自动触发事件

java 订阅