手动触发dom节点事件代码
在爬代码过程中,碰到一个稀奇古怪的问题。需要手工修改select的值,然后手动触发select的change事件,但使用网络上查到的通过trigger、onchange()事件触发都不执行,没办法,只好继续查找。
还好在stackoverflow网站上看到国外大神的回答,解决了碰到的问题。
原帖地址:http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript
手工触发的代码如下:
/**
* Fire an event handler to the specified node. Event handlers can detect that the event was fired programatically
* by testing for a 'synthetic=true' property on the event object
* @param {HTMLNode} node The node to fire the event handler on.
* @param {String} eventName The name of the event without the "on" (e.g., "focus")
*/
function fireEvent(node, eventName) {
// Make sure we use the ownerDocument from the provided node to avoid cross-window problems
var doc;
if (node.ownerDocument) {
doc = node.ownerDocument;
} else if (node.nodeType == 9){
// the node may be the document itself, nodeType 9 = DOCUMENT_NODE
doc = node;
} else {
throw new Error("Invalid node passed to fireEvent: " + node.id);
} if (node.dispatchEvent) {
// Gecko-style approach (now the standard) takes more work
var eventClass = ""; // Different events have different event classes.
// If this switch statement can't map an eventName to an eventClass,
// the event firing is going to fail.
switch (eventName) {
case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.
case "mousedown":
case "mouseup":
eventClass = "MouseEvents";
break; case "focus":
case "change":
case "blur":
case "select":
eventClass = "HTMLEvents";
break; default:
throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
break;
}
var event = doc.createEvent(eventClass); var bubbles = eventName == "change" ? false : true;
event.initEvent(eventName, bubbles, true); // All events created as bubbling and cancelable. event.synthetic = true; // allow detection of synthetic events
node.dispatchEvent(event, true);
} else if (node.fireEvent) {
// IE-old school style
var event = doc.createEventObject();
event.synthetic = true; // allow detection of synthetic events
node.fireEvent("on" + eventName, event);
}
};
html代码和调用如下
<a href="http://www.google.com" onclick="alert('clicked')" target="_blank">Go to google</a>
<button>Trigger event</button>
document.getElementsByTagName("button")[0].onclick = function() {
fireEvent(document.getElementsByTagName("a")[0], "click");
}
手动触发dom节点事件代码的更多相关文章
- 是否是有效的dom节点--轮子代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- visual studio 2013 触发挂起事件
在 VS2013 中调试 winddows phone 或者 win rt 程序的时候,需要手动触发 “挂起” 事件. 如果找不到这个按钮: 1.打开菜单栏中的 “自定义” 对话框: 2.选择调试位置 ...
- DOM事件代码小结
以下代码出自<DOM Enlightenment>一书1.三种事件形式 <body onclick="alert('触发内联属性事件')"> <div ...
- 节点操作,节点属性的操作及DOM event事件
##1. 节点操作 createElement(标签名) 创建一个指定名称的元素 someone.appendChild(new_node) 追加一个子节点(作为最后的子节点) someone.ins ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
- DOM节点的使用(常用方法+代码)
DOM节点的应用 学习总结 1. 什么是 DOM 2. HTMLDOM 3. 元素获取 元素获取方式 元素节点的属性操作 4. Node 对象的属性和方法 常用属性 常用方法 5. 事件处理 事件驱动 ...
- 关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧
1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果 ...
- jQuery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...
随机推荐
- docker安装kong和kong-dashboard
1:docker安装遵循官方手册 2:安装kong 参考文档:https://getkong.org/install/docker/ 安装过程基本和文档一致,文档十分简单清晰. 但应注意,为了最新版k ...
- 亚马逊免费服务器搭建Discuz!论坛过程(四)
上述命令还可能因缺少包引发其他错误: 如果出错则安装对应的包即可. 以下供参考: yum install libxml2 yum install libxml2-devel -y yum instal ...
- 使用 lua 编写 wireshark 协议解析插件
一.平台 操作系统:windows 7 wireshark:1.10.3 lua:5.1 二.准备 lua 语言基本语法,特别是关于表操作和循环 wireshark 文档,包括用户使用文档和开发者文档 ...
- Spring 源代码学习(一)
一 .Spring容器最基本的功能 1. 读取配置文件 2. 校验配置文件的正确性 3. 将配置文件信息加载到内存 4. 通过反射实例化bean对象 5. 构建系统 二 .核心类关系图 图1-1 D ...
- 【Codeforces 161D】Distance in Tree
[链接] 我是链接,点我呀:) [题意] 问你一棵树上有多少条长度为k的路径 [题解] 树形dp 设 size[i]表示以节点i为根节点的子树的节点个数 dp[i][k]表示以i为根节点的子树里面距离 ...
- Alliances
树国是一个有n个城市的国家,城市编号为1∼n.连接这些城市的道路网络形如一棵树, 即任意两个城市之间有恰好一条路径.城市中有k个帮派,编号为1∼k.每个帮派会占据一些城市,以进行非法交易.有时帮派之间 ...
- maven 的plugin 的使用
mvn [plugin-name]:[goal-name] mvn compiler:compile 这里写的十分详细: https://www.tutorialspoint.com/maven/ma ...
- java 执行可执行文件时提示“could not find or load main class ”的问题
- 零基础学python-4.2 其它内建类型
这一章节我们来聊聊其它内建类型 1.类型type 在python2.2的时候,type是通过字符串实现的,再后来才把类型和类统一 我们再次使用上一章节的图片来说明一些问题 我们通过对照上面的图片.在p ...
- 怎样给你的Android 安装文件(APK)瘦身
本文源地址:怎样给你的Android 安装文件(APK)瘦身 Android的apk文件越来越大了这已经是一个不争的事实. 在Android 还是最初版本号的时候,一个app的apk文件大小也还仅仅有 ...