js中怎么为同级元素添加点击事件
事件件是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中怎么为同级元素添加点击事件的更多相关文章
- jquery:为动态加载的元素添加点击事件
jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...
- jquery无法为动态生成的元素添加点击事件的解决方法
遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...
- React map生成元素添加点击事件绑定this
问题 使用.map(function(Item)生成元素添加onClick事件:onClick={this.provinceChange.bind(this, "99")}时,前台 ...
- [Swift通天遁地]一、超级工具-(1)动态标签:给UILabel文字中的Flag和url添加点击事件
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- js中 ajax动态新增节点无法触发点击事件
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件. 其实最简单的方法就是直接在标签中写onclick="",但是这样写有些场景的是实现不了的,最 ...
- 移动端,ajax 动态加载的元素,为动态添加的一系列同个类名的元素添加点击事件
背景:一个列表页,有一系列同类名的元素,需要为每一个动态添加的列表项添加事件: 点击选择下图中不同的文档类型,再通过 ajax 动态加载不同的文档. 使用过的方法: 1.通知 jquery 的 $(s ...
- 关于JavaScript中的事件代理(例子:ul中无数的li上添加点击事件)
面试题:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标点击时alert出这个li的内容和li的位置坐标xy. 看到这个题目,我们一般首先想到的思路是,for循环,遍历1000次 ...
- Jquery中动态生成的元素没有点击事件或者只有一次点击事件
今天用jq做动态生成的元素的click事件时,click只执行了一次,当然有些朋友可能根本没执行, 执行了一次的原因是因为可能有函数加载了一遍,一次都没执行的可能是没绑定对象或者jq版本问题, 动态生 ...
- H5在js中向指定的元素添加样式
今天在做一个按钮的功能控制,点击之后,要根据判断条件,修改按钮的样式,然后就发现了一个巨好用的方法, <button type="button" id="btn_A ...
随机推荐
- PostgreSQL(一)教程 -----高级特性
一.视图 假设天气记录和城市为止的组合列表对我们的应用有用,但我们又不想每次需要使用它时都敲入整个查询.我们可以在该查询上创建一个视图,这会给该查询一个名字,我们可以像使用一个普通表一样来使用它: C ...
- Oracle 11g DRCP配置与使用
Oracle 11g DRCP配置与使用Oracle 11g推出了驻留连接池(Database Resident Connection Pool)特性,提供了数据库层面上的连接池管理机制,为应对高并发 ...
- 神奇:java中float,double,int的值比较运算
float x = 302.01f; System.out.println(x == 302.01); //false System.out.println(x == 302.01f); // ...
- mes平台Action类模版
Connection conn = null; PreparedStatement pst = null; ResultSet rs = null; @Override public String e ...
- HTML5 快速学习二 Canvas
本篇文章开始讲解HTML5的核心功能之一:Canvas 通过Canvas可以动态生成和展示图形.图表.图像以及动画. Canvas API功能非常多,我们将讨论最常用的功能. 我们先新建一个canva ...
- linux命令总结vmstat命令
一.简介 vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.这个命令是我查看Linux/ ...
- node.js浅谈
相信大家对node.js也很不陌生吧,现在我来总结一下常用的吧~ 我们Web全栈工程师最多的就是用Node作为后台了,Node.js虽然可以作为后台语言,但是相对于Java那些老牌后台语言真是一点优势 ...
- C#获取文件超大图标256*256(转)
从Bing搜索得到,保存于此 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...
- 2017/05/23 java 基础 随笔
1.多态的好处: a.提高了代码的维护性(继承保证) b.提高了代码的扩展性(由多态保证) package com.huawei; public class Demo2 { public static ...
- CVTE笔试题
一.题目 给定一个数组a[N],我们希望构造数组b [N],其中b[j]=a[0]*a[1]…a[N-1] / a[j],在构造过程中,不允许使用除法: 要求O(1)空间复杂度和O(n)的时间复杂度: ...