事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好。元素添加事件是js语言中最基础的。我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子元素添加事件。今天我要给大家分享的是如何让通过元素本身为同级元素添加事件。

html代码:

 <div id="box1">我是box1</div>
<div id="box2">我是box2</div>

js代码:

let oB1 = document.getElementById("box1");
let oB2 = document.querySelector("#box2"); oB1.addEventListener("click",function(e){
let event = document.createEvent("HTMLEvents");//createEvent() 方法创建新的 Event 对象。
event.initEvent("click",false,false);//initEvent() 方法初始化新事件对象的属性。
//event.initEvent(eventType,canBubble,cancelable);eventType字符串值-->事件的类型;
      canBubble事件是否起泡;cancelable是否可以用preventDefault()方法取消事件。
      该方法将初始化 Document.createEvent() 方法 创建的合成 Event 对象的 type属性、bubbles 属性和 cancelable 属性。
      只有在新创建的 Event 对象被 Document 对象 或 Element 对象 的 dispatchEvent() 方法
     分派之前,才能调用 Event.initEvent() 方法。
event.eventType = "massage";//添加事件类型
e.target.nextElementSibling.dispatchEvent(event);//把事件信息传给兄弟节点 },false); oB2.addEventListener("click",function(){
alert("我是box2")
})

点击box1弹出“我是box2”

希望大牛们看到后多多留言指教,如果有不正确的地方欢迎指出。

js中怎么为同级元素添加点击事件的更多相关文章

  1. jquery:为动态加载的元素添加点击事件

    jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...

  2. jquery无法为动态生成的元素添加点击事件的解决方法

    遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...

  3. React map生成元素添加点击事件绑定this

    问题 使用.map(function(Item)生成元素添加onClick事件:onClick={this.provinceChange.bind(this, "99")}时,前台 ...

  4. [Swift通天遁地]一、超级工具-(1)动态标签:给UILabel文字中的Flag和url添加点击事件

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  5. js中 ajax动态新增节点无法触发点击事件

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件. 其实最简单的方法就是直接在标签中写onclick="",但是这样写有些场景的是实现不了的,最 ...

  6. 移动端,ajax 动态加载的元素,为动态添加的一系列同个类名的元素添加点击事件

    背景:一个列表页,有一系列同类名的元素,需要为每一个动态添加的列表项添加事件: 点击选择下图中不同的文档类型,再通过 ajax 动态加载不同的文档. 使用过的方法: 1.通知 jquery 的 $(s ...

  7. 关于JavaScript中的事件代理(例子:ul中无数的li上添加点击事件)

    面试题:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标点击时alert出这个li的内容和li的位置坐标xy. 看到这个题目,我们一般首先想到的思路是,for循环,遍历1000次 ...

  8. Jquery中动态生成的元素没有点击事件或者只有一次点击事件

    今天用jq做动态生成的元素的click事件时,click只执行了一次,当然有些朋友可能根本没执行, 执行了一次的原因是因为可能有函数加载了一遍,一次都没执行的可能是没绑定对象或者jq版本问题, 动态生 ...

  9. H5在js中向指定的元素添加样式

    今天在做一个按钮的功能控制,点击之后,要根据判断条件,修改按钮的样式,然后就发现了一个巨好用的方法, <button type="button" id="btn_A ...

随机推荐

  1. PostgreSQL(一)教程 -----高级特性

    一.视图 假设天气记录和城市为止的组合列表对我们的应用有用,但我们又不想每次需要使用它时都敲入整个查询.我们可以在该查询上创建一个视图,这会给该查询一个名字,我们可以像使用一个普通表一样来使用它: C ...

  2. Oracle 11g DRCP配置与使用

    Oracle 11g DRCP配置与使用Oracle 11g推出了驻留连接池(Database Resident Connection Pool)特性,提供了数据库层面上的连接池管理机制,为应对高并发 ...

  3. 神奇:java中float,double,int的值比较运算

    float x = 302.01f;    System.out.println(x == 302.01); //false  System.out.println(x == 302.01f); // ...

  4. mes平台Action类模版

    Connection conn = null; PreparedStatement pst = null; ResultSet rs = null; @Override public String e ...

  5. HTML5 快速学习二 Canvas

    本篇文章开始讲解HTML5的核心功能之一:Canvas 通过Canvas可以动态生成和展示图形.图表.图像以及动画. Canvas API功能非常多,我们将讨论最常用的功能. 我们先新建一个canva ...

  6. linux命令总结vmstat命令

    一.简介 vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.这个命令是我查看Linux/ ...

  7. node.js浅谈

    相信大家对node.js也很不陌生吧,现在我来总结一下常用的吧~ 我们Web全栈工程师最多的就是用Node作为后台了,Node.js虽然可以作为后台语言,但是相对于Java那些老牌后台语言真是一点优势 ...

  8. C#获取文件超大图标256*256(转)

    从Bing搜索得到,保存于此 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  9. 2017/05/23 java 基础 随笔

    1.多态的好处: a.提高了代码的维护性(继承保证) b.提高了代码的扩展性(由多态保证) package com.huawei; public class Demo2 { public static ...

  10. CVTE笔试题

    一.题目 给定一个数组a[N],我们希望构造数组b [N],其中b[j]=a[0]*a[1]…a[N-1] / a[j],在构造过程中,不允许使用除法: 要求O(1)空间复杂度和O(n)的时间复杂度: ...