浏览器DOM事件触发

除用户人为交互触发事件外,用js脚本触发事件的一般流程为

  1. 创建事件 var e = Event(‘event_name‘, {key: value, ...})
  2. 分发事件到 event.target
  3. 触发事件处理函数 EventHandler

示例

<select >
    <option value="all" selected>all</option>
    <option value="active">active</option>
    <option value="completed">completed</option>
</select>
<script>
    let select = document.getElementsByTagName(‘select‘)[0];
    select.onchange = handleChange;
    function handleChange(e){
        console.log(‘changed‘);
    }
</script>

如上脚本中的 change 事件脚本触发的方式如下:

var e = Event(‘change‘, {bubbles: true});
select.options[1].dispatchEvent(e);

原文地址:https://www.cnblogs.com/zhaofeng-shu33/p/10351963.html

时间: 2024-11-05 23:26:45

浏览器DOM事件触发的相关文章

JavaScript&amp;jQuery.DOM事件触发元素

事件触发元素 事件触发元素,也叫事件的目标,也叫事件对象,也就是与用户进行交互的具体元素. 在事件监听器中,事件触发元素会自动传递到监听器的函数中. <!DOCTYPE html><html> <head> <title>事件触发元素</title> <meta charset="UTF-8"> <meta name="viewport" content="width=devic

整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流.都是流的一种生动体现.用术语说流是对输入输出设备的抽象.以程序的角度说,流是具有方向的数据. 事件流分事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其

js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息.所有浏览器对象都支持event对象,但支持方式不同. DOM中的事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中.无论指定事件处理程序时使用什么方法(DOM0级或DOM2级),都会传入event

DOM事件对象、IE事件对象、旧浏览器事件对象的JavaScript区别

事件流: 事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). 事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. DOM2级事件处理程序: .addEventListener();      .removeEventListener(); 在IE浏览器中不起作用!IE事件处理程序: .attachEvent();     .detachEvent(); 跨浏览器常用事件处理程序: var eventUt

如何显示哪个 DOM 元素触发了事件

我们如果想显示DOM元素触发了事件,直接用event.target就可以实现,见如代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>target</title> <script type="text/javascript" src="../js/jquery.min.js"></s

DOM事件总结(事件处理程序的类型及浏览器的兼容性)

事件处理: 1.HTML事件处理程序 例子: <input type="button" id="btn" value="click me" onclick="alert('Hello!');"> 或者: <input type="button" id="btn" value="click me" onclick="show()"&

DOM事件探秘

#事件流 事件捕获:由document向事件触发的元素捕获 事件冒泡:由触发事件的元素向上级触发 #事件处理程序 HTML事件处理程序 <input type="button" value="按钮" onclick="alert('hello world')"></input> 或者 <script type="text/javascript"> function showMes(){ al

EventUtil——跨浏览器的事件对象

前言:什么是EventUtil? 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即跨浏览器的事件处理程序 习惯上,这个方法属于一个名为EventUtil的对象 编写并使用该对象后,可保证处理事件的代码能在大多数浏览器下一致的运行 本文将围绕着EventUtil对象展开,并提供该通用对象代码以作参考分享 文章主要内容参考书籍为<JavaScript高级程序设计>([美]Nicholas C.Z

DOM事件模型学习笔记

下面的内容属于阅读笔记,其中涉及大量内容来自于PPK的博客的内容,如果你要跟随我的脚步领略大家风采,那么就从Introduction to Events开始阅读吧. 现代的前端开发应该是会严格遵守 html 展示文档内容构成,css 渲染页面效果,javascript 提供交互 浏览器提供交互行为可以追溯到Netscape公司在其第二个版本中支持javascript语言,随后其与微软之间的浏览器大战,以及w3c标准制定的落后,导致至今一直被诟病的浏览器兼容问题,而这些不兼容中关于DOM事件模型的