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”
希望大牛们看到后多多留言指教,如果有不正确的地方欢迎指出。
转载于:https://www.cnblogs.com/sdcs/p/8253766.html
js中怎么为同级元素添加点击事件相关推荐
- JQuery 动态生成元素添加点击事件
页面代码 <html> ... <body> <div id="divBox"></div> <script> $(fu ...
- 为未来元素添加点击事件的两种写法
哈哈哈,小七来了,对于经常搬砖撸代码的猴子们,一定会遇到给好多li(死的还是动态字符串拼接生成的(对未来元素添加不到事件的看之前写的事件委托))添加点击事件 第一种: var index=0; for ...
- js原生给生成的html添加点击事件,原生js为动态元素添加监听事件
//已存在div //创建标签 function createpage(){ var span=document.createElement('span') span.innerHTML=" ...
- jq遍历循环,给每个元素添加点击事件,并返回当前元素的索引值(闭包问题)
jq循环绑定点击事件造成闭包问题 需求:给每个带有tab类名的元素点击点击事件,点击时可以添加active类名,(用于样式切换),而且还需要返回当前元素对应的索引值: 方法一(出现闭包) 先引入jq ...
- 给父元素添加点击事件时,获取到的 event.target 为子元素(point-events: none 的妙用)
目录 场景 分析 解决 场景 使用 ion-select 组件时,点击下拉图标 点击事件的 event.target,不是图标本身的 DOM,而是图标子元素的 DOM 这会导致 popover 无法计 ...
- android列表集合点击事件,给ListeView列表中的每一个Item添加点击事件
首先声明本文主要是在ArrayAdapter.SimpleAdapter中对ListView的每一项进行点击事件! 先看下运行结果 第一步:在xml布局中写一个ListView android:lay ...
- 通过js动态为标签元素添加点击事件
最近遇到了,就研究了下,总结了下: 我所知道的有如下几种方式: var submitSpan = document.getElementById("submitSpan");第一种 ...
- JavaScript实现动态添加的元素添加点击事件
在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可.动态添加的元素怎么绑定事件呢? 原生JavaScript ...
- elementUI使用之table表格如何给行元素添加点击事件
官方文档提供的event事件 在代码中绑定事件 在methods中写方法 好了,这样就可以实现了.
最新文章
- JSTL 读取数组 和 字符串连接
- 多进程和多线程的概念
- hdu 3392 Pie
- 解决IntelliJ IDEA报错Failed to read candidate component class: file [ ]; nested exception is org.
- 【轻端重云和边缘架构新模式】
- python课本第三章答案idle_第三天任务 (【基于Python编程从入门到实践】第三章 列表 书本及动手试一试)...
- bootstrap后台模板_免费bootstrap后台管理系统模板源码 网站后台模板_后台管理界面...
- leetcode 387 C++数组做法
- 用计算机按数字铃声,在计算器上输入数字时按什么键
- 阿里的CTR预测(二):Deep Interest Evolution Network
- Windows phone8 基础篇(二) xaml介绍 一
- tensorflow之读取jpg图像保存为tfrecord再读取
- Linux-第二篇常用命令
- ubuntu linux打印系统时间
- js进行txt文件下载方式或oss文件访问下载跨域解决
- BZOJ2827 - 千山鸟飞绝
- 【EasyUI篇】TreeGrid树表格组件
- 互联网快讯:腾讯新闻上线数字藏品馆;极米多款产品受消费者青睐;微信更新IOS系统朋友圈可发20张图片
- oracle能用hql吗,使用HQL查询日期,Oracle报“Invalid number”
- 烦立停:过度营销的孙宇晨输给了一个结石