事件件是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. debian9部署jenkins

    这里记录两种部署方式,一种是通过包管理工具直接安装,另一种是用tomcat作为web容器运行jenkins.个人倾向第一种,部署简单,而且维护起来方便很多. 用包管理工具aptitude部署jenki ...

  2. 特别翔实的adaboost分类算法讲解 转的

    转https://www.cnblogs.com/litthorse/p/9332370.html 作为(曾)被认为两大最好的监督分类算法之一的adaboost元算法(另一个为前几节介绍过的SVM算法 ...

  3. linux 条件变量与线程池

    条件变量Condition Variables 概述 1. 条件变量提供了另外一种线程同步的方式.如果没有条件变量,程序需要使用线程连续轮询(可能在临界区critical section内)方式检查条 ...

  4. final的用法---java基础知识

    Java关键字final有“这是无法改变的”或者“终态的”含义,它可以修饰非抽象类.非抽象类成员方法和变量. final类不能被继承,没有子类,final类中的方法默认是final的. final方法 ...

  5. Dubbo学习笔记11:使用Dubbo中需要注意的一些事情

    指定方法异步调用 前面我们讲解了通过设置ReferenceConfig的setAsync()方法来让整个接口里的所有方法变为异步调用,那么如何指定某些方法为异步调用呢?下面讲解下如何正确地设置默写方法 ...

  6. Kafka 温故(三):Kafka的内部机制深入(持久化,分布式,通讯协议)

    一.Kafka的持久化 1.数据持久化:     发现线性的访问磁盘(即:按顺序的访问磁盘),很多时候比随机的内存访问快得多,而且有利于持久化:     传统的使用内存做为磁盘的缓存     Kafk ...

  7. 面板支持单个,多个元素的jQuery图片轮播插件

    一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  8. XHR工厂的实现

    ajax这种常见的开发模式已经遍布我们日常的开发之中了,ajax本质还是采用一种轮询的模式,就是隔一段时间去发送一次http请求,获取数据,然后显示在页面之上,当然,ajax比起新兴的WebScoke ...

  9. AngulaJs -- 隔离作用域

    具有隔离作用域的指令最主要的使用场景是创建可复用的组件 创建具有隔离作用域的指令需要将scope属性设置为一个空对象{}.如果这样做了,指令的 模板就无法访问外部作用域了: <div ng-co ...

  10. TED_Topic7:How we unearthed the spinosaurus

    By Nizar Ibrahim A 50-foot-long carnivore who hunted its prey in rivers 97 million years ago, the sp ...