js中的事件绑定的三种方式
2024-09-25 06:23:50
1 直接在html标签中绑定
<button onclick = "show()"></button>
注意当你引用的js代码是包裹在window.onload中的形式的时候,show()是会报没有定义的错误,原因在于window.onload是在
页面全部加载完之后再去解析加载里面的内容。而button的点击事件在解析button的时候没有被定义。
2 用js的对象进行绑定事件
<body>
<buttonid="btn1">点击1</button>
</body>
<script>
window.onload =function(){
console.log("onload事件执行...");
var oBtn = document.getElementById('btn1');
oBtn.onclick =function(){
console.log('btn1的点击事件被触发...');
}
}
</script>
3 用事件监听的方式
<script>
window.onload =function(){
console.log('onload执行...');
var oBtn = document.getElementById('btn1');
oBtn.addEventListener('click',function(){
console.log('btn1的点击监听事件被触发');
})
}
</script>
4 事件监听的捕获和冒泡方式
addEventListener(‘触发事件’,’执行函数’,boolean),boolean默认为false
添加事件监听的第三个参数,flase:冒泡 ,true:捕获;两者区别在于,冒泡触发是从内向外的,捕获事件是从外向内的,点击事件的顺序是从外到内,在从内到外,给事件设置不同的事件监听方式使他在不同的阶段执行
<div id ='div1'>
<div id="div2">
<button id ='btn1'>点击1</button>
<button id ='btn2'>点击2</button>
</div>
</div>
<script>
window.onload =function(){
console.log('onload执行...');
document.getElementById('btn1').addEventListener('click',function(){
console.log('btn1的点击监听事件被触发');
},false);
document.getElementById('btn2').addEventListener('click',function(){
console.log('btn2的点击监听事件被触发');
},true);
document.getElementById('div1').addEventListener('click',function(){
console.log('div1的点击监听事件被触发');
},false);
document.getElementById('div2').addEventListener('click',function(){
console.log('div2的点击监听事件被触发');
},true);
}
</script>
5 阻止事件冒泡
通过e.stopPropagation();阻止冒泡
document.getElementById('btn1').addEventListener('click',function(e){
e.stopPropagation();
console.log('btn1的点击监听事件被触发');
},false);
最新文章
- mysql数据库备份
- zabbix3.0.4 邮件告警详细配置
- HttpWebRequest请求时无法发送具有此谓词类型的内容正文。
- mvc导出EXCEL
- JavaScript对象属性赋值操作的逻辑
- 021ARM处理器工作模式
- Machine Learning 学习笔记 (1) —— 线性回归与逻辑回归
- 手把手教你使用 Imagepro plus - 宏操作【转】
- 理解Android的startservice和bindservice(转)
- armv8(aarch64)linux内核中flush_dcache_all函数详细分析
- android-sdk-windows版本号下载
- android删除文件出错
- 关于UtilTimerStack类的使用--XWork2、Struts2内置性能诊断类
- php学习笔记——文件(1)
- LogBack学习
- UIPopoverPresentationController使用
- Swing-JCheckBox用法-入门
- LeetCode 235. Lowest Common Ancestor of a Binary Search Tree (二叉搜索树最近的共同祖先)
- HTML学习笔记 基础标签及css引用案例 第一节 (原创)参考使用表
- mobile_基础事件
热门文章
- springboot结合mybatis
- FreeRTOS优化与错误排查方法
- JavaEE——JSP开发模式(model1)
- HTML5存储--离线存储
- 最新打赏正版V15微信视频打赏源码 带(百倍)暗雷 N秒试看 自动切换域名 自动防封
- Windows 7 SP1官方原版ISO系统镜像所有版本下载集合
- Git上传项目至GitHub
- Vue 实现点击空白处隐藏某节点(三种方式:指令、普通、遮罩)
- [JZOJ5817] 【NOIP提高A组模拟2018.8.15】 抄代码
- opencv::Laplance算子