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 ...
随机推荐
- Idea 2016 激活码
43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...
- SQL语句中将形式（12/10/19 4:13:21 PM）转化为（2019-12-10）
convert(char(10),convert(datetime, H.TOEX_FIN_REJECT_TIMR)+1,20),
- Node.js 中 process.cwd()与__dirname的区别
process.cwd() 是当前执行node命令时候的文件夹地址 --工作目录,保证了文件在不同的目录下执行时,路径始终不变 __dirname 是被执行的js 文件的地址 --文件所在目录 当前模 ...
- openstack学习之neutron ml2初始化代码分析
这里没有 去详细考虑neutron server怎么初始化的,而是直接从加载插件的地方开始分析.首先我们看下下面这个文件. Neutron/api/v2/router.py class APIRout ...
- 学习go语言第二天-变量、常量
编写测试程序 源码文件以_test结尾;例如:xxx_test.go 测试方法名以Test开头;例如:func TestXXXXX(t *testing.T){} 实现斐波那且数列 package f ...
- CoderForces 163E e-Government(AC自动机+树状数组维护fail树的dfs序)
E. e-Government time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...
- unity3d 柏林噪声 PerlinNoise 规律 算法
测试 每个小数值取100次 print(0.1); LaTest3(0.1f, 0.1f); print("Max:" + La.Max() + "|Min:" ...
- 【Cute-Webpack】Webpack4 入门手册（共 18 章）
介绍 1. 背景 最近和部门老大,一起在研究团队[EFT - 前端新手村]的建设,目的在于:帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水平. 本文也是属于[E ...
- Orleans[NET Core 3.1] 学习笔记（三）（ 3 ）服务端配置
服务端配置 Silo通过SiloHostBuilder和许多补充选项类以编程方式进行配置. Silo配置有几个关键方面: Orleans集群信息 集群提供程序(不知道咋翻译) Silo到Silo和Cl ...
- redis(7)--redis应用实战
问题1:哨兵模式下客户端应该连接哪个redis-server? 问题2:集群模式下为什么会有MOVED error Redis Java客户端介绍 已有的客户端支持 Redis Java客户端有很多的 ...