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 ...
随机推荐
- ByteBuffer的allocate与allocateDirect2013-01-11
在Java中当我们要对数据进行更底层的操作时,通常是操作数据的字节(byte)形式,这时常常会用到ByteBuffer这样一个类.ByteBuffer提供了两种静态实例方式: public sta ...
- 前端常用功能记录(二)—datatables表格
并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的前端开发者来说它更是锦上添 ...
- HDU 6085 bitset
Rikka with Candies Time Limit: 7000/3500 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Other ...
- SSO后期补充理解
sso系统的提出: 为什么会产生sso系统呢?它的作用是什么?这跟普通的登录系统有什么区别? 我们先来说说session的实现原理:session跟cookie都是用户的会话跟踪技术,为什么登录成功后 ...
- saltstack主机管理项目【day39】:主机管理项目开发
项目目标 salt state.apply -h "ubuntu,centos" -g "ubuntu,centos" -f "ubuntu,cent ...
- hdu 5290 Bombing plan
http://acm.hdu.edu.cn/showproblem.php?pid=5290 题意: 一棵树,每个点有一个权值wi,选择点i即可破坏所有距离点i<=wi的点,问破坏所有点 最少需 ...
- bzoj千题计划197:bzoj4247: 挂饰
http://www.lydsy.com/JudgeOnline/problem.php?id=4247 先把挂饰按挂钩数量从大到小排序 dp[i][j]前i个挂饰,剩下j个挂钩的最大喜悦值 分挂和不 ...
- 如何用javascript获取和设置css3属性
==================获取======================== 我想到的第一个思路 var test = document.getElementById('test'); c ...
- 面板支持单个,多个元素的jQuery图片轮播插件
一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- AngularJs-$parsers自我理解-解析
$parsers 首先先了解下它具体的作用,当用户与控制器进行交互的时候.ngModelController中的$setViewValue()方法就会被调用,$parsers的数组中函数就会以流水线的 ...