JS---DOM---为元素绑定事件的引入，为元素绑定多个代码，兼容代码
1. 为元素绑定事件的引入：
用src直接绑定多个，只实现最后一个（programmer2.js）
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script src="programmer1.js"></script>
<script src="programmer2.js"></script>
<script> my$("btn").onclick=function () {
console.log("小杨好帅哦");
};
</script>
2. 为元素绑定多个事件
为元素绑定事件(DOM) :一种, 但是不兼容, 所以还是有两种
2.1 对象.addEventListener("事件类型", 事件处理函数, false); ----->谷歌和火狐支持, IE8不支持
- 参数1:事件的类型---事件的名字,没有on
- 参数2:事件处理函数---函数(命名函数,匿名函数)
- 参数3:布尔类型,目前就写false
//为同一个元素绑定多个相同的事件--
my$("btn").addEventListener("click", function () {
console.log("小苏猥琐啊");
}, false);
my$("btn").addEventListener("click", function () {
console.log("小苏龌龊啊");
}, false);
my$("btn").addEventListener("click", function () {
console.log("小苏邪恶啊");
}, false);
my$("btn").addEventListener("click", function () {
console.log("小苏下流啊");
}, false);
2.2 对象.attachEvent("有on的事件类型", 事件处理函数) ----->谷歌不支持, 火狐不支持, IE8支持
- 参数1:事件类型---事件名字，有on
- 参数2:事件处理函数---函数(命名函数,匿名函数)
my$("btn").attachEvent("onclick", function () {
console.log("小杨好帅哦1");
});
my$("btn").attachEvent("onclick", function () {
console.log("小杨好帅哦2");
});
my$("btn").attachEvent("onclick", function () {
console.log("小杨好帅哦3");
});
3. 为元素绑定事件的兼容代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title> </head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script> //为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
function addEventListener(element,type,fn) {
//判断浏览器是否支持这个方法
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
} addEventListener(my$("btn"),"click",function () {
console.log("哦1");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦2");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦3");
}); </script>
</body>
</html>
JS---DOM---为元素绑定事件的引入，为元素绑定多个代码，兼容代码的更多相关文章
- jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递
前述:jquery中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递. 但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问 ...
- jquery绑定事件的坑，重复绑定问题
我实现点击table表格中的删除按钮,找到当前按钮的祖先元素tr 然后删除该行,但是我首先点击删除的时候要先弹出提示框,是否要下载,这时在点击删除按钮删除,之前没有考虑到事件重复绑定问题,所以每次点击 ...
- JS DOM -- 关于回车键盘事件执行事件
一.需求制作一个模拟对话框, 二. 1.需要发送后,输入框清空 2.按enter键可发送 三.代码部分 <!DOCTYPE HTML> <html> <head> ...
- 对jquery新增加的class绑定事件 jquery 对相同class 绑定事件
当页面加载时,就会注册所有的事件,后面通过jquery新增的内容(<div class="item"></div>),再对新增的添加事件$(".i ...
- Jquery Validate根据其他元素的事件来触发单个元素的异步校验
场景:在做一个车辆信息管理模块,而车牌是通过车牌颜色和车牌号码来确定唯一性的,录入车牌信息时需对车牌进行唯一性校验.
- javascript元素绑定事件
js元素绑定事件 想给一个元素绑定一个方法之后,在绑定一个方法而且不被覆盖 window.onload = function () { alert('a'); } window.onlaod=fu ...
- jquery html动态添加的元素绑定事件详解
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div&g ...
- 给js动态创建的对象绑定事件
1.使用原生JS动态为动态创建的对象绑定事件 1-1.创建一个function,用来兼容IE8以下浏览器添加事件 function addEvent(el, type, fn) { if(el.ad ...
- jquery的bind跟on绑定事件的区别
jquery的bind跟on绑定事件的区别:主要是事件冒泡: jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(ev ...
随机推荐
- 【跟唐老师学习云网络】 - 第7篇 Tcpdump大杀器抓包
[摘要] 前面章节的网络协议栈相关的信息建议大家多学习一遍,因为这些都是最基础的东西,想玩好云网络必备基本功.. 一.上帝视角 之前提到过定位问题可以开启上帝视角,那么如何开启就要依靠tcpdump这 ...
- 使用Docker测试静态网站
参考书籍 :第一本docker书[澳]James Turnbull 1.Sample网站的初始Dockerfile 文件目录如下: Dockerfile文件代码: 安装nginx 在容器中创建一个目 ...
- mac 安装 XX-Net-3.12.11
目录 一 下载xx-net稳定版 二 使用Chrome浏览器 三 开启IPv6 mac禁用SIP机制 SIP 步骤 其他 附完整的csrutil命令 一 下载xx-net稳定版 github稳定版-X ...
- Springboot实现登录功能
SpringBoot简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再 ...
- HashMap的常见问题
关于HashMap的一些常见的问题,自己总结一下: 首选HashMap在jdk1.7和jdk1.8里面的实现是不同的,在jdk1.7中HashMap的底层实现是通过数组+链表的形式实现的,在jdk1. ...
- Selenium自动化面试题
(1)selenium的工作原理? ① 脚本启动driver ② driver去驱动浏览器作为远程服务器 ③ 执行脚本发送请求 ④ 服务器解析请求作出相应操作,并返回给客户端(脚本) ( ...
- 【Web技术】400- 浅谈Shadow DOM
编者按:本文作者:刘观宇,360 奇舞团高级前端工程师.技术经理,W3C CSS 工作组成员. 为什么会有Shadow DOM 你在实际的开发中很可能遇到过这样的需求:实现一个可以拖拽的滑块,以实现范 ...
- 阿里巴巴的26款Java开源项目
阿里巴巴的26款Java开源项目 开源展示了人类共同协作,成果分享的魅力.没有任何一家网络公司可以不使用开源技术,仅靠自身技术发展起来.“取之于开源,用之于开源,才能促进开源的良性发展”,阿里巴巴各个 ...
- UWP 使用SSL证书，保证数据安全
事情是这样的,我们后端的小伙伴升级了用户会员系统,使用了全新的GraphQL登录机制,并且采用SSL加密的方式来实现阻止陌生客户端请求的案例. GraphQL在UWP端的实现,以后有时间会单独写一篇文 ...
- 分享一个mysql服务启动与关闭的bat文件
有时候打开数据库可视化工具(sqlyog.navicat)连接数据库时,会出现以下报错信息. 大家都知道是数据库的服务没有启动. 所以我想给大家分享一个bat文件可供快速启动mysql的数据库的服务, ...